/* ============================================================
   Календар „Вашият месец“: месец от 28 дни, в който се появяват постовете.
   Променливи (CSS на страницата може да ги смени):
     --mo-bg / --mo-fg  фон и текст на сцената          --mo-accent  надзаглавието, седмиците, триъгълникът на видеото
     --mo-h             големината на заглавието         --mo-cal-w   най-голямата ширина на календара „Само календарът“
     --m                докъде е стигнал месецът (0–1); идва от скрипта
   ============================================================ */

.pfx.mo { --m: 0; }

/* ---------- сцената: текст вляво, календар вдясно; закача се, докато месецът се пълни ---------- */
.pfx.mo-scene { position: relative; height: calc((100 + var(--mo-len, 180)) * 1svh); background: var(--mo-bg, #07080A); color: var(--mo-fg, #EDEFF1); }
.pfx.mo-scene.tone-light { --mo-bg: #fff; --mo-fg: var(--ink, #16181B); }
.pfx.mo-scene .mo-stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-block: clamp(72px, 11vh, 100px) clamp(28px, 6vh, 60px); overflow: clip; }
.pfx.mo-scene .mo-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.pfx.mo-scene .mo-label { color: var(--mo-accent, #2AC4EA); }
.pfx.mo-scene .mo-h { margin-top: 18px; font-size: var(--mo-h, clamp(40px, 5.4vw, 96px)); line-height: .98; letter-spacing: -.055em; font-weight: 200; }
.pfx.mo-scene .mo-h b { font-weight: 800; }
/* седмиците светват една след друга, докато месецът напредва */
.pfx.mo-scene .mo-weeks { display: grid; gap: 4px; margin-top: 34px; }
.pfx.mo-scene .mo-weeks li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 16px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); opacity: clamp(.25, calc((var(--m) * (var(--mo-weeks, 4) + .4) - var(--i)) * 1.4), 1); transition: opacity .3s; }
.pfx.mo-scene .mo-weeks span { grid-row: span 2; padding-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mo-accent, #2AC4EA); }
.pfx.mo-scene .mo-weeks b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pfx.mo-scene .mo-weeks p { font-size: 15px; line-height: 1.5; color: color-mix(in srgb, currentColor 65%, transparent); }

/* ---------- самият календар ---------- */
.pfx .mo-cal { position: relative; width: 100%; }
.pfx.mo-solo .mo-cal { max-width: var(--mo-cal-w, 580px); margin-inline: auto; }
.pfx .mo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pfx .mo-wd, .pfx .mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pfx .mo-wd { margin-bottom: 10px; text-align: center; font-size: 12px; font-weight: 800; opacity: .55; }
.pfx .mo-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: clip; }
.pfx .mo-n { position: absolute; left: 6px; top: 4px; z-index: 1; font-size: 10px; font-style: normal; line-height: 1.3; pointer-events: none; }
.pfx .mo-post { position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: clip; }
/* по-силно от „.row .col img:not([srcset]) { width: auto }“ на Salient */
.pfx.mo .mo-cal .mo-post img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pfx .mo-post.is-video { background: #0B2530; }
.pfx .mo-post.is-video::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--mo-accent, #2AC4EA); }
.pfx .mo-post.is-text { padding: 6px; background: #fff; color: #0B2530; font-size: clamp(7px, .72vw, 11px); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.pfx .mo-badge { position: absolute; right: 3px; top: 3px; z-index: 1; padding: 1px 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 7px; font-weight: 700; line-height: 1.4; }

/* тъмна карта („Месечен абонамент“) */
.pfx .mo-cal.is-dark { padding: clamp(18px, 2vw, 28px); border-radius: 18px; background: #101317; color: #EDEFF1; box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--mo-accent, #2AC4EA) 40%, transparent), 0 0 0 1px rgba(237, 239, 241, .06); }
.pfx .mo-cal.is-dark .mo-head b { font-size: 18px; font-weight: 700; }
.pfx .mo-cal.is-dark .mo-head span { font-size: 13px; color: rgba(237, 239, 241, .55); }
.pfx .mo-cal.is-dark .mo-cell { background: rgba(237, 239, 241, .04); }
.pfx .mo-cal.is-dark .mo-n { color: rgba(237, 239, 241, .4); }

/* светла стъклена карта (Началото, върху циан) */
.pfx .mo-cal.is-glass { padding: clamp(20px, 2.4vw, 34px); border-radius: 24px; background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); color: #0B2530; box-shadow: 0 50px 110px -46px rgba(11, 37, 48, .6); }
.pfx .mo-cal.is-glass .mo-head { margin-bottom: 20px; }
.pfx .mo-cal.is-glass .mo-head b { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.pfx .mo-cal.is-glass .mo-head span { font-size: 13px; font-weight: 700; }
.pfx .mo-cal.is-glass .mo-wd, .pfx .mo-cal.is-glass .mo-grid { gap: 10px; }
.pfx .mo-cal.is-glass .mo-cell { aspect-ratio: 1 / 1.16; border-radius: 10px; background: rgba(11, 37, 48, .07); overflow: visible; }
.pfx .mo-cal.is-glass .mo-post { inset: 5px; padding: 6px; border-radius: 7px; background: #fff; }
.pfx .mo-cal.is-glass .mo-post.is-video { background: #0B2530; }
.pfx .mo-cal.is-glass .mo-n { color: rgba(11, 37, 48, .45); }

/* ---------- как се появяват постовете (само когато скриптът работи: [data-js] слага темата) ---------- */
/* „пълнят се при скрол“: всеки ден се показва, когато месецът (--m) стигне до него (--t) */
[data-js] .pfx.mo[data-motion='fill'] .mo-post { --p: clamp(0, calc((var(--m) - var(--t)) * 16), 1); opacity: var(--p); transform: scale(calc(1.3 - var(--p) * .3)); }
[data-js] .pfx.mo[data-motion='fill'] .mo-cal.is-glass .mo-post { transform: scale(calc(.6 + var(--p) * .4)); }
/* „изскачат един по един“, докато календарът се вижда (is-live), и всичко започва отначало */
[data-js] .pfx.mo[data-motion='pop'] .mo-post { opacity: 0; transform: scale(.6); }
[data-js] .pfx.mo[data-motion='pop'].is-live .mo-post { animation: mo-pop 12s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) infinite both; animation-delay: calc(var(--k, 0) * .36s); }
@keyframes mo-pop { 0% { opacity: 0; transform: scale(.6); } 5% { opacity: 1; transform: scale(1.08); } 8% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.9); } }

/* ---------- таблет и телефон: сцената не се закача, календарът се пълни, докато минава през екрана ---------- */
@media (max-width: 1000px) {
  .pfx.mo-scene { height: auto; }
  .pfx.mo-scene .mo-stage { position: relative; height: auto; padding-block: var(--space, clamp(96px, 13vh, 180px)); }
  .pfx.mo-scene .mo-in { grid-template-columns: minmax(0, 1fr); }
  .pfx.mo-scene .mo-weeks li { opacity: 1; }
}
@media (max-width: 600px) {
  .pfx.mo-scene .mo-weeks li { grid-template-columns: minmax(0, 1fr); }
  .pfx.mo-scene .mo-weeks span { grid-row: auto; }
  /* заглавието на календара на един ред, подзаглавието под него, ако не се събира */
  .pfx .mo-head { flex-wrap: wrap; row-gap: 2px; }
  .pfx .mo-head > :first-child { white-space: nowrap; }
  .pfx .mo-cal.is-glass { padding: 18px; }
  .pfx .mo-cal.is-glass .mo-wd, .pfx .mo-cal.is-glass .mo-grid { gap: 5px; }
  .pfx .mo-cal.is-glass .mo-post { padding: 4px; }
  .pfx .mo-post.is-text { font-size: 6.5px; padding: 4px; }
  .pfx .mo-n { left: 4px; top: 2px; font-size: 9px; }
}

/* ---------- „намалено движение“: всичко е на мястото си, нищо не се закача ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-js] .pfx.mo .mo-post { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pfx.mo-scene { height: auto; }
  .pfx.mo-scene .mo-stage { position: relative; height: auto; min-height: 100svh; }
  .pfx.mo-scene .mo-weeks li { opacity: 1; }
}