/* ══ Mobile 390 (Figma: дошка «📱 Mobile 390») ══════════════ */
.l-mobile-header{display:none}
.l-drawer{display:none}
.has-drawer{overflow:hidden}

/* ══ Планшет 768–1199 ═══════════════════════════════════════
   Окремої дошки під планшет у Figma немає. Тут той самий
   десктопний контент 1160, але без бічної панелі: її замінює
   мобільна шапка з шухлядою, а масштаб рахується від 1160. */
@media (max-width:1199px){

  /* Каркас: бічне меню ховається, зверху — Layout / Header (mobile) 390×62 */
  .l-sidebar{display:none}
  .l-topbar{display:none}
  .l-shell{display:block}
  .l-main{max-width:none}
  .l-mobile-header{display:flex;align-items:center;gap:1.4rem;height:6.2rem;padding:0 1.8rem;
    background:var(--c-bg-sidebar);position:sticky;top:0;z-index:30}
  .l-mobile-header__burger{width:2.4rem;height:2.4rem;color:var(--c-text-primary);display:grid;place-items:center;flex:0 0 auto}
  .l-mobile-header__burger svg{width:2.4rem;height:2.4rem}
  .l-mobile-header__logo{flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .l-mobile-header__logo img{width:23.6rem;height:4.4rem;object-fit:contain}
  .l-mobile-header__search{width:2.2rem;height:2.2rem;color:var(--c-text-primary);display:grid;place-items:center;flex:0 0 auto}
  .l-mobile-header__search svg{width:2.2rem;height:2.2rem}

  /* ── Шухляда меню 390×861 (Figma: «Меню (drawer) — Mobile 390») ── */
  .l-drawer{display:block;position:fixed;inset:0;z-index:40}
  .l-drawer[hidden]{display:none}
  .l-drawer__scrim{position:absolute;inset:0;background:rgba(14,31,46,.38)}
  /* На планшеті шухляда — бічна панель, на телефоні — на всю ширину. */
  .l-drawer__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:48rem;height:100%;
    background:var(--c-bg-sidebar)}
  .l-drawer__head{flex:0 0 auto;display:flex;align-items:center;gap:1.4rem;height:6.2rem;padding:0 1.8rem;
    border-bottom:1px solid var(--c-border-subtle)}
  .l-drawer__close{width:2.4rem;height:2.4rem;flex:0 0 auto;display:grid;place-items:center;color:var(--c-text-primary)}
  .l-drawer__close svg{width:2.4rem;height:2.4rem}
  .l-drawer__logo{flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .l-drawer__logo img{width:23.6rem;height:4.4rem;object-fit:contain}
  .l-drawer__spacer{width:2.4rem;height:2.4rem;flex:0 0 auto}
  .l-drawer__body{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;
    padding:2rem 1.8rem 2.8rem}
  /* Вміст прокручується, тому блоки не мають стискатись по висоті. */
  .l-drawer__body > *{flex:0 0 auto}
  .l-drawer .l-nav{width:auto}
  /* Між групами 10 px, між двома розділами поспіль 6 — так у макеті. */
  .l-drawer .l-nav__li--section{margin-top:1rem}
  .l-drawer .l-nav__li--section:first-child{margin-top:0}
  .l-drawer .l-nav__li--section + .l-nav__li--section{margin-top:0.6rem}
  /* Після розгорнутого розділу відступ більший — так у макеті. */
  .l-drawer .l-nav__li--section:has(> .l-nav__sub:not([hidden])) + .l-nav__li--section{margin-top:1rem}
  .l-drawer .l-nav__li--section + .l-nav__li--link{margin-top:1rem}
  .l-drawer__divider{margin:2.6rem 0 0;border:0;border-top:1px solid var(--c-border-subtle)}
  .l-drawer .l-side-group__title{margin-top:2.6rem;font:500 1.3rem/1.7rem var(--f-body)}
  .l-drawer .l-socials{margin-top:1.6rem;gap:1rem}
  .l-drawer .l-socials__link{width:3.8rem;height:3.8rem}
  .l-drawer .l-contacts__mail{margin-top:1rem;line-height:2rem}
  .l-drawer__cta{margin-top:1.8rem;height:4.8rem}

}

@media (max-width:767px){
  .l-drawer__panel{max-width:none}
  /* Контент 390: g52, p20/0/56/0 — бічні відступи задають самі секції */
  .l-content{gap:5.2rem;padding:2rem 0 5.6rem}

  /* ── Hero 390×474 ─────────────────────────────────────── */
  .s-hero{height:47.4rem;margin:0 2rem;border-radius:2.2rem;box-shadow:none}
  .s-hero picture{display:contents}
  .s-hero__scrim{background:linear-gradient(180deg, rgba(14,31,46,0) 0%, rgba(14,31,46,.35) 42%, rgba(14,31,46,.86) 100%)}
  .s-hero__text{left:2.4rem;top:17.6rem;width:30.2rem}
  .s-hero__overline{font:600 1rem/1.3rem var(--f-body);letter-spacing:0.04rem}
  .s-hero__title{margin-top:1.2rem;font:700 3.2rem/4rem var(--f-head);letter-spacing:-0.016rem}
  .s-hero__sub{margin-top:1.2rem;font:400 1.5rem/2.4rem var(--f-body)}
  .s-hero__actions{margin-top:1.2rem}
  .s-hero__actions .c-btn--secondary{display:none}
  .s-hero__arrow--prev{display:none}
  .s-hero__arrow--next{left:28.8rem;top:41.8rem;width:3.8rem;height:3.8rem}
  .s-hero .s-hero__dots.swiper-pagination-bullets{left:2.4rem;top:43.6rem}

  /* ── Заголовки секцій ─────────────────────────────────── */
  .s-cats__head{gap:1rem;padding:0 2rem}
  .s-title-center{gap:1rem}
  .s-title-center__h{font:700 2.6rem/3.4rem var(--f-head);letter-spacing:-0.0078rem}
  .s-title-center__flourish,.s-title-center__flourish svg{width:8.8rem;height:1.2rem}
  .s-cats__sub{font:400 1.5rem/2.4rem var(--f-body)}
  .s-title-row{height:2.8rem;gap:1rem;padding:0 2rem}
  .s-title-row__icon,.s-title-row__icon svg{width:2rem;height:2rem}
  .s-title-row__h{font:600 2rem/2.8rem var(--f-head)}
  .s-title-row__link{font:600 1.2rem/1.7rem var(--f-body)}

  /* ── Каруселі (свайп): ряд 248-карток із кроком 14 ───── */
  .s-cats{gap:2.2rem}
  .s-latest,.s-books{gap:2rem}
  /* scroll-snap вирівнює картку по краю скролпорта й ігнорує padding —
     тому додаємо scroll-padding, інакше перша картка «з'їжджає» під край. */
  .s-cats__grid,.s-latest__grid,.s-books__grid{gap:1.4rem;padding:0 2rem;scroll-padding-left:2rem;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s-cats__grid::-webkit-scrollbar,.s-latest__grid::-webkit-scrollbar,.s-books__grid::-webkit-scrollbar{display:none}
  /* Фіксована ширина — лише для каруселей головної, щоб не ламати
     сітку каталогу, де картки по дві в ряд. */
  .s-cats__grid > *,.s-latest__grid > *,.s-books__grid > *{flex:0 0 24.8rem;width:24.8rem;scroll-snap-align:start}

  /* ── Слухати 390×539 ──────────────────────────────────── */
  .s-listen{gap:1.8rem}
  .s-listen__row{flex-direction:column;gap:1.2rem;padding:0 2rem}
  .c-player{flex:0 0 auto;gap:2rem;padding:2.4rem 2.4rem 2.2rem}
  .c-playlist{flex:0 0 auto;display:contents}
  .c-playlist__head{display:none}

  .c-playlist__more{align-self:stretch;text-align:center;font:600 1.2rem/1.7rem var(--f-body)}

  /* ── Цитата 390×299 ───────────────────────────────────── */
  .s-quote{flex-direction:column;align-items:center;gap:0.6rem;margin:0 2rem;padding:2.2rem 2rem 2.6rem;border-radius:2rem}
  .s-quote__feather{width:15rem;height:13.1rem}
  .s-quote__text{text-align:center;font:400 2.4rem/3.8rem var(--f-script)}
  .s-quote__spacer,.s-quote__heart{display:none}

  /* ── Про автора 390×473 ───────────────────────────────── */
  .s-about{flex-direction:column;margin:0 2rem;border-radius:2rem}
  .s-about__img{width:100%;height:19rem}
  .s-about__text{height:auto;padding:2.2rem 2.2rem 2rem;gap:1rem;justify-content:flex-start}
  .s-about__overline{font:600 1rem/1.3rem var(--f-body);letter-spacing:0.04rem}
  .s-about__title{font:600 2rem/2.8rem var(--f-head);letter-spacing:0}
  .s-about__desc{font:400 1.5rem/2.4rem var(--f-body)}
  .s-about__stats{gap:2.4rem;padding:0.6rem 0 0}
  .s-about__cta{height:3.8rem;font:600 1.3rem/1.8rem var(--f-body);gap:0.7rem}

  /* ── Зворотний зв'язок 390×876 ────────────────────────── */
  .s-contact{flex-direction:column;gap:1.4rem;padding:0 2rem}
  .s-contact__img{width:100%;height:20rem;border-radius:2rem}
  .s-form{gap:1.2rem;padding:2.2rem 2rem;border-radius:2rem}
  .s-form__overline{font:600 1rem/1.3rem var(--f-body);letter-spacing:0.04rem}
  .s-form__title{font:600 2rem/2.8rem var(--f-head)}
  .s-form__desc{font:400 1.5rem/2.4rem var(--f-body)}
  .s-form__space{display:none}
  .s-form__row{flex-direction:column;gap:1.2rem}
  .c-field--grow{flex:0 0 auto}
  .s-form__agree{height:auto;align-items:flex-start}
  .s-form__agree label{font:400 1.3rem/2rem var(--f-body)}
  .s-form__note{font:500 1.2rem/1.7rem var(--f-body)}

  /* ── Підвал 390×748 ───────────────────────────────────── */
  .l-footer{gap:2.2rem;padding:3.6rem 2rem 2.6rem}
  .l-footer__cols{display:contents}
  .l-footer__brand{display:contents}
  .l-footer__logo{width:16.8rem;height:12.5rem}
  .l-footer__slogan{font:400 1.3rem/2rem var(--f-body)}
  .l-footer__socials{padding-top:0}
  .l-footer__col{gap:0.9rem}
  .l-footer__col--sections{flex:1 1 0;width:auto}
  .l-footer__col--works{flex:1 1 0;width:auto}
  .l-footer__col--contacts{gap:0.8rem}
  .l-footer__title{font:600 1rem/1.3rem var(--f-body);letter-spacing:0.04rem}
  .l-footer__space{height:0.3rem}
  .l-footer__link{font:400 1.3rem/2rem var(--f-body)}
  .l-footer__bottom{display:contents}
  .l-footer__copy{font:500 1.2rem/1.7rem var(--f-body)}
  .l-footer__sign{font:400 2rem/2.8rem var(--f-script)}
  /* дві колонки посилань стоять поруч — обгортаємо їх рядком */
  .l-footer__colrow{display:flex;gap:2rem;align-items:flex-start}
  .l-footer__col--contacts .l-footer__space{display:none}
}

/* ── Утиліти видимості ─────────────────────────────────────
   Лежать у кінці останнього файлу: правила компонентів
   (.c-row{display:flex} тощо) мають ту саму специфічність,
   тож вирішує порядок у каскаді. */
.u-mobile-only{display:none}
@media (max-width:767px){
  .u-desktop-only{display:none}
  .u-mobile-only{display:revert}
  span.u-mobile-only,a.u-mobile-only{display:inline}
  br.u-mobile-only{display:inline}
}

/* Мова в мобільному меню (у макеті її немає). */
.l-drawer__langs{display:flex;gap:0.8rem;margin-top:1.6rem}
.l-drawer__lang{display:inline-flex;align-items:center;justify-content:center;min-width:4.4rem;height:3.6rem;padding:0 1.2rem;border-radius:var(--r-full);
  box-shadow:inset 0 0 0 0.1rem var(--c-border-strong);font:600 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary);text-decoration:none}
.l-drawer__lang.is-current{background:var(--c-brand-primary);box-shadow:none;color:var(--c-text-inverse)}