/**
 * Design System — Event Hero Editorial
 * Asymmetric editorial spread: 42% poster | 6% spine | 52% info (desktop).
 * Includes signature monospace date-mark, vertical category spine,
 * lede paragraph, CTA cluster, and full-width countdown band.
 *
 * Tokens: design-system/tokens.css
 *
 * Promoted from inked/assets/css/afisha-v2/event-page.css on 2026-05-01
 * per docs/design-system-v2/CONTEXT-RULES.md (extract reusable patterns).
 *
 * Used by:
 *   - Event detail V3 (template.afisha.v2.detail.tpl + .ep-hero--v3 / .ep-countdown--v3)
 *   - any future editorial detail spread (article featured, model spotlight, etc)
 *
 * Activation: parent element MUST have .ep-hero--v3 (hero) or .ep-countdown--v3 (band).
 * .ep-hero.ep-hero--v3 layout reset stays page-local because it overrides legacy
 * .ep-hero (catalog hero). Only the V3 grid + children live here.
 *
 * FIXME: many declarations use --bg-primary / --text-primary / --border-default
 * fallback chains. When tokens.css adopts the canonical names, fallbacks can drop.
 */

/* ----- Hero grid: 42 / 6 / 52 columns at >=1024px ----- */
.ep-hero--v3 .ep-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .ep-hero--v3 .ep-hero__grid {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__grid {
    grid-template-columns: minmax(0, 42fr) minmax(0, 6fr) minmax(0, 52fr);
    gap: 0;
  }
}

/* ----- Poster column ----- */
.ep-hero--v3 .ep-hero__poster {
  position: relative;
  padding: var(--space-lg) var(--space-lg) 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .ep-hero--v3 .ep-hero__poster {
    padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__poster {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

.ep-hero--v3 .ep-hero__poster-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 3 / 4;
  max-height: 72vh;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
  border-radius: 0;
  min-height: auto;
  display: block;
}

.ep-hero--v3 .ep-hero__poster-frame[data-orientation="landscape"] {
  aspect-ratio: 3 / 2;
  max-width: 720px;
}

.ep-hero--v3 .ep-hero__poster-frame[data-orientation="square"] {
  aspect-ratio: 1 / 1;
  max-width: 600px;
}

.ep-hero--v3 .ep-hero__poster-frame .ep-hero__img,
.ep-hero--v3 .ep-hero__poster-frame img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

/* Status badge */
.ep-hero--v3 .ep-hero__status {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--color-brand-accent, #e8c547);
  color: #000;
  z-index: 2;
}

.ep-hero--v3 .ep-hero__status--ended,
.ep-hero--v3 .ep-hero__status--canceled {
  background: transparent;
  color: var(--color-brand-accent, #e8c547);
  border: 1px solid var(--color-brand-accent, #e8c547);
}

/* Editorial caption under poster (desktop only) */
.ep-hero--v3 .ep-hero__poster-caption {
  display: none;
}

@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__poster-caption {
    display: block;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    max-width: 560px;
    width: 100%;
    text-align: left;
    border-top: 1px solid var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
    padding-top: var(--space-xs);
    margin: 0;
  }
  .ep-hero--v3 .ep-hero__poster-caption b {
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
  }
}

/* ----- Spine: vertical category ribbon (desktop only) ----- */
.ep-hero--v3 .ep-hero__spine {
  display: none;
}

@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__spine {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-xl) 0;
  }
  .ep-hero--v3 .ep-hero__spine::before,
  .ep-hero--v3 .ep-hero__spine::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
  }
  .ep-hero--v3 .ep-hero__spine::before { top: 0; height: 14%; }
  .ep-hero--v3 .ep-hero__spine::after { bottom: 0; height: 14%; }
  .ep-hero--v3 .ep-hero__spine-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .ep-hero--v3 .ep-hero__spine-label b {
    color: var(--color-brand-accent, #e8c547);
    font-weight: var(--font-weight-bold);
  }
}

/* ----- Info column ----- */
.ep-hero--v3 .ep-hero__info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-md);
  background: var(--bg-primary);
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .ep-hero--v3 .ep-hero__info {
    padding: var(--space-xl);
    justify-content: center;
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__info {
    padding: var(--space-2xl, var(--space-xl)) var(--space-xl) var(--space-2xl, var(--space-xl)) var(--space-md);
  }
}

/* Date-mark — signature moment */
.ep-hero--v3 .ep-hero__datemark {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
}
.ep-hero--v3 .ep-hero__datemark-day {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-weight: 900;
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--text-primary);
}
.ep-hero--v3 .ep-hero__datemark-day--accent {
  color: var(--color-brand-accent, #e8c547);
}
/* Month known, days not announced — drop the empty day slots, keep month/year. */
.ep-hero--v3 .ep-hero__datemark--tbd .ep-hero__datemark-day,
.ep-hero--v3 .ep-hero__datemark--tbd .ep-hero__datemark-arrow {
  display: none;
}
.ep-hero--v3 .ep-hero__datemark-arrow {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--border-default, var(--color-border, rgba(255,255,255,0.18)));
  align-self: center;
  padding-bottom: 0.15em;
}
.ep-hero--v3 .ep-hero__datemark-meta {
  align-self: end;
  padding-bottom: var(--space-xs);
  display: flex; flex-direction: column; gap: 2px;
  grid-column: 1 / -1;
}
.ep-hero--v3 .ep-hero__datemark-month {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.ep-hero--v3 .ep-hero__datemark-year {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Mobile category tags (hide on desktop where spine takes over) */
.ep-hero--v3 .ep-hero__tags {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
@media (min-width: 1024px) {
  .ep-hero--v3 .ep-hero__tags { display: none; }
}
.ep-hero--v3 .ep-hero__tag {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
  border-radius: 3px;
  color: var(--text-muted);
}

/* Editorial title */
.ep-hero--v3 .ep-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6.5vw, 5.25rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.02;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.ep-hero--v3 .ep-hero__title--ended {
  color: var(--text-secondary);
}

.ep-hero--v3 .ep-hero__location {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}
.ep-hero--v3 .ep-hero__location svg {
  color: var(--color-brand-accent, #e8c547);
  flex-shrink: 0;
}

/* Lede — first sentence editorial paragraph */
.ep-hero--v3 .ep-hero__lede {
  font-family: var(--font-editorial, var(--font-display, Georgia, serif));
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  font-style: italic;
  margin: 0;
}

/* CTA cluster — primary CTA on row 1 (full width), soft cluster (.ep-soft) on row 2 */
.ep-hero--v3 .ep-hero__cta {
  display: flex; flex-direction: column; gap: var(--space-sm);
  max-width: 480px;
}
.ep-hero--v3 .ep-hero__cta .ep-btn-primary,
.ep-hero--v3 .ep-hero__cta .ep-btn-secondary {
  width: 100%;
  justify-content: center;
}
/* Row 2: Сохранить + В маршрут side-by-side (Going hidden ) */
.ep-hero--v3 .ep-hero__cta .ep-soft {
  display: flex;
  gap: var(--space-sm);
  margin-top: 0;
}
.ep-hero--v3 .ep-hero__cta .ep-soft .ep-soft__btn {
  flex: 1 1 0;
  justify-content: center;
}
.ep-hero--v3 .ep-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  background: var(--color-brand-accent, #e8c547);
  color: #000;
  font-family: var(--font-ui, inherit);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius, 6px);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease);
  text-decoration: none;
  width: 100%;
  letter-spacing: 0.01em;
}
.ep-hero--v3 .ep-btn-primary:hover {
  background: var(--color-brand-accent-hover, #f0d564);
  color: #000;
  transform: translateY(-1px);
}
.ep-hero--v3 .ep-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-ui, inherit);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-md) var(--space-md);
  border-radius: var(--border-radius, 6px);
  border: 1px solid var(--border-strong, var(--border-default, var(--color-border, rgba(255,255,255,0.18))));
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease);
  text-decoration: none;
  width: 100%;
}
.ep-hero--v3 .ep-btn-secondary:hover {
  border-color: var(--color-brand-accent, #e8c547);
  background: var(--bg-hover, rgba(255,255,255,0.04));
  color: var(--text-primary);
}

/* Ended note inside info column */
.ep-hero--v3 .ep-hero__ended-note {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--border-radius, 6px);
  border: 1px solid var(--border-default, var(--color-border, rgba(255,255,255,0.08)));
  width: 100%;
}
.ep-hero--v3 .ep-hero__ended-note-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--text-muted);
}
.ep-hero--v3 .ep-hero__ended-note-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Sepia for ended */
.ep--ended .ep-hero--v3 .ep-hero__poster-frame img {
  filter: sepia(0.4) brightness(0.85);
}

/* ==========================================================================
   Countdown Band (V3) — full-width, brand-accent left border
   ========================================================================== */
.ep-countdown--v3 {
  background: var(--bg-secondary, var(--color-bg-elevated, #1a1a1a));
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-left: 4px solid var(--color-brand-accent, #e8c547);
  padding: var(--space-lg) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: 0;
}
.ep-countdown--v3 .ep-countdown__label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps, 0.08em);
  color: var(--text-muted);
  white-space: nowrap;
  margin: 0;
}
.ep-countdown--v3 .ep-countdown__units {
  display: flex;
  /* Single row, no wrap. Mobile gets fluid font + gap below so 4 units always fit. */
  gap: clamp(0.5rem, 2vw, var(--space-md));
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}
.ep-countdown--v3 .ep-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
}
.ep-countdown--v3 .ep-countdown__num {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  /* Fluid: scales from 1.75rem on narrowest mobile up to 6.5rem on desktop. */
  font-size: clamp(1.75rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}
.ep-countdown--v3 .ep-countdown__num--accent {
  color: var(--color-brand-accent, #e8c547);
}
.ep-countdown--v3 .ep-countdown__unit-label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps, 0.08em);
  color: var(--text-muted);
}
.ep-countdown--v3 .ep-countdown__separator {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: clamp(1.25rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--border-color, rgba(255,255,255,0.2));
  align-self: flex-start;
  padding-top: 4px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Mobile: countdown band keeps the single-row layout, just tighter padding. */
@media (max-width: 639px) {
  .ep-countdown--v3 {
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .ep-countdown--v3 .ep-countdown__unit-label {
    font-size: 0.625rem;
  }
}