/* ============================================================
   TAGANKA-TODAY.CSS — Страница «Театр сегодня»
   Театр на Таганке

   Hero + навигация + заголовок — единый «первый экран».
   На десктопе .today__first-screen = min-height: 100dvh,
   hero забирает всё свободное пространство (flex: 1),
   навигация + заголовок прижаты к низу viewport.
   Brand-block и пропорции hero — по паттерну show-page.
   ============================================================ */


/* ══════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН
   Обёртка hero + nav + heading. На мобилке — просто
   контейнер. На десктопе — flex-column min-height: 100dvh,
   hero растягивается, заголовок прижат к низу.
   ══════════════════════════════════════════════════ */
.today__first-screen {
  /* flex-column только на десктопе (см. @media 1024) */
}


/* ══════════════════════════════════════════════════
   HERO
   Мобилка: 100dvh (полноэкранный).
   Десктоп: flex: 1 внутри first-screen
   (заполняет всё пространство до nav + heading).
   ══════════════════════════════════════════════════ */
.today-hero {
  position: relative;
  width: 100%;
  height: 83svh;
  overflow: hidden;
  background-color: var(--color-black-soft);
}

.today-hero__media {
  position: absolute;
  inset: 0;
}

.today-hero__image,
.today-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today-hero__video {
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
}

.today-hero__video.is-playing {
  opacity: 1;
}

.today-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

/* ── Play/Pause кнопка ── */
.today-hero__play-btn {
  position: absolute;
  left: var(--space-s);
  bottom: 24px;
  width: 56px;
  height: 56px;
  background: var(--color-black-soft);
  border: none;
  cursor: pointer;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.today-hero__play-icon {
  display: flex;
  gap: 5px;
}

.today-hero__play-icon::before,
.today-hero__play-icon::after {
  content: '';
  display: block;
  width: 5px;
  height: 20px;
  background: var(--color-bg-warm);
}

.today-hero__play-btn[aria-pressed="true"] .today-hero__play-icon {
  gap: 0;
}

.today-hero__play-btn[aria-pressed="true"] .today-hero__play-icon::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--color-bg-warm);
  background: none;
}

.today-hero__play-btn[aria-pressed="true"] .today-hero__play-icon::after {
  display: none;
}

/* ── Десктопное меню (show-page паттерн) ──
   Классы show__header-* переиспользуются из show-page.
   Стили дублированы здесь, т.к. show-page.css не подключён. */
.show__header-icons,
.show__header-menu-btn { display: none; }


/* ══════════════════════════════════════════════════
   КОНТЕНТ (main.today)
   ══════════════════════════════════════════════════ */
.today {
  background-color: var(--color-bg-warm);
}


/* ══════════════════════════════════════════════════
   НАВИГАЦИЯ «← О театре»
   ══════════════════════════════════════════════════ */
.today__nav {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-s);
  margin-bottom: -12px;
  background: var(--color-bg-warm);
}

.today__nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-black-soft);
}

.today__nav-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.today__nav-text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ЗАГОЛОВОК СТРАНИЦЫ
   ══════════════════════════════════════════════════ */
.today__heading {
  padding: 2px 6px;
  background: var(--color-bg-warm);
}

.today__title {
  font-family: var(--font-main);
  font-size: 68px;
  font-weight: var(--font-weight-book);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-black-soft);
  padding: 4px 2px 0;
}

.today__heading-divider {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft);
  margin-top: 8px;
}


/* ══════════════════════════════════════════════════
   ВВОДНАЯ ЦИТАТА
   ══════════════════════════════════════════════════ */
.today__quote {
  padding: 80px var(--space-s) 120px;
}

.today__quote-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.today__quote-mark {
  width: 28px;
  height: 21px;
  color: var(--color-black-soft);
  flex-shrink: 0;
}

.today__quote-text {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: var(--font-weight-book);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
}

.today__quote-text p + p {
  margin-top: 1em;
}

.today__quote-bar {
  width: 100%;
  height: 12px;
  background: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   СЕКЦИЯ «ФАКТЫ»
   ══════════════════════════════════════════════════ */
.today__facts {
  overflow: hidden;
  padding-bottom: 80px;
}

.today__facts-header {
  position: sticky;
  top: 0;
  z-index: var(--z-elevated);
  background: var(--color-bg-warm);
}

.today__facts-line {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft);
}

.today__facts-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 12px 18px;
}

.today__facts-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--color-black-soft);
  flex-shrink: 0;
}

.today__facts-title {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.02em;
  color: var(--color-black-soft);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.today__facts-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 60px;
}

.today__fact {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 10px;
}

.today__fact-image {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.today__fact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today__fact-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.today__fact-title {
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: var(--font-weight-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-black-soft);
}

.today__fact-text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-book);
  line-height: var(--line-height-base);
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   СЕКЦИЯ «ЕЩЁ»
   ══════════════════════════════════════════════════ */
.today__more {
  background: var(--color-bg-warm);
  overflow: hidden;
  padding-bottom: 80px;
}

.today__more-header {
  position: sticky;
  top: 0;
  z-index: var(--z-elevated);
  background: var(--color-bg-warm);
}

.today__more-line {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft);
}

.today__more-title-row {
  padding: 28px 12px 18px;
}

.today__more-title {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-brand);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.today__more-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px var(--space-s) 0;
  align-items: center;
}

.today__more-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  color: var(--color-black-soft);
  width: 100%;
}

.today__more-card-title {
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: var(--font-weight-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-black-soft);
}

.today__more-card-media {
  width: 100%;
  aspect-ratio: var(--card-aspect-poster);
  overflow: hidden;
  border-radius: var(--card-radius);
}

.today__more-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today__more-card-desc {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: var(--font-weight-book);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  color: var(--color-black-soft);
}

.today__more-card-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
}

.today__more-card-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.today__more-divider {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px)
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .today__nav {
    padding: 0 var(--space-m);
  }

  .today__heading {
    padding: 2px 16px;
  }

  .today__quote {
    padding: 80px var(--space-m) 120px;
  }

  .today__quote-text {
    font-size: 28px;
  }
  .today__fact {
    padding: 0 16px;
  }

  .today__fact-image {
    height: 400px;
  }

  .today__more-list {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП (≥1024px)

   Первый экран: min-height: 100dvh.
   Hero: flex: 1 — заполняет всё пространство от верха
   до навигации + заголовка. Навигация и заголовок
   прижаты к низу viewport.
   Brand-block: clamp(128px, 10.714vw, 180px).
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Первый экран ── */
  .today__first-screen {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  /* ── Hero заполняет оставшееся место ── */
  .today-hero {
    height: auto;
    flex: 1 1 0%;
    min-height: 300px;
  }

  /* Brand-block — fluid, как на show-page / actor-page */
  .today-hero .header__brand-block {
    width:  clamp(128px, 10.714vw, 180px);
    height: clamp(128px, 10.714vw, 180px);
  }

  /* Десктопное меню — show-page паттерн */
  .show__header-icons {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .show__header-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) ease;
    text-decoration: none;
  }
  .show__header-icon-btn img {
    filter: brightness(0) invert(1);
  }
  .show__header-icon-btn:hover { opacity: 0.65; }
  .show__header-icon-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }

  .show__header-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 22px;
    background: var(--color-black-ui);
    color: var(--color-white);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    transition: opacity var(--duration-fast) ease;
  }
  .show__header-menu-btn:hover { opacity: 0.85; }
  .show__header-menu-btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
  }
  .show__header-menu-btn img {
    width: 56px;
    height: 56px;
    display: block;
  }

  .today-hero__play-btn {
    left: var(--space-m);
    bottom: 36px;
  }

  /* ── Навигация ── */
  .today__nav {
    padding: 0 var(--inner-pad-x);
    flex-shrink: 0;
  }

  .today__nav-text {
    font-size: 20px;
  }

  /* ── Заголовок ── */
  .today__heading {
    padding: 2px var(--inner-pad-x);
    flex-shrink: 0;
  }

  .today__title {
    font-size: clamp(76px, 7vw, 120px);
    padding: 0px 0px 0;
  }

  .today__heading-divider {
    margin-left: 0;
    margin-top: 8px;

  }

  /* ── Факты ── */
  .today__facts {
    padding-bottom: 120px;
  }

  .today__facts-title-row {
    padding-left: var(--inner-pad-x);
    padding-right: var(--inner-pad-x);
  }

  .today__facts-list {
    gap: 100px;
    padding-top: 80px;
  }

  .today__fact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--inner-col-gap);
    padding: 0 var(--inner-pad-x);
    align-items: start;
  }

  .today__fact-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .today__fact-body {
    gap: 24px;
    padding-top: 8px;
  }

  .today__fact-title {
    font-size: 36px;
  }

  .today__fact-text {
    font-size: 20px;
  }

  .today__fact:nth-child(even) .today__fact-image {
    order: 2;
  }

  .today__fact:nth-child(even) .today__fact-body {
    order: 1;
  }

  /* ── Ещё ── */
  .today__more {
    padding-bottom: 120px;
  }

  .today__more-title-row {
    padding-left: var(--inner-pad-x);
    padding-right: var(--inner-pad-x);
  }

  .today__more-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inner-col-gap);
    align-items: start;
    padding: 60px var(--inner-pad-x) 0;
  }

  .today__more-divider {
    display: none;
  }

  .today__more-card-title {
    font-size: 28px;
  }

  .today__more-card-desc {
    font-size: 20px;
  }

  .today__more-card-link {
    font-size: 20px;
  }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП — ЦИТАТА (≥1024px)
   Отдельный блок для ручной правки.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .today__quote {
    padding: 64px var(--inner-pad-x) 140px;
  }

  .today__quote-inner {
    max-width: calc((100vw - 2 * var(--inner-pad-x) - var(--inner-col-gap)) / 2);
    gap: 25px;
  }

  .today__quote-mark {
    width: 40px;
    height: 31px;
  }

  .today__quote-text {
    font-size: clamp(24px, 2.679vw, 36px);today__title
    line-height: 1.1;
  }

  .today__quote-bar {
    max-width: calc((100vw - 2 * var(--inner-pad-x) - var(--inner-col-gap)) / 2);
    height: 12px;
  }
}


/* ══════════════════════════════════════════════════
   ПРОМЕЖУТОЧНЫЙ ДЕСКТОП (≥1280px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .today-hero__play-btn {
    left: var(--inner-pad-x);
  }

  .today__fact-title {
    font-size: 38px;
  }

  .today__fact-text {
    font-size: 21px;
  }

  .today__more-card-title {
    font-size: 30px;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .today__title {
    font-size: 120px;
  }

  .today__fact-title {
    font-size: 40px;
  }

  .today__fact-text {
    font-size: 22px;
  }

  .today__more-card-title {
    font-size: 32px;
  }

  .today__more-card-desc {
    font-size: 22px;
  }
}