/* EVH Season Moment — live availability display
 * -------------------------------------------------------------------------
 * DESIGN: echoes the hero's "BOOK YOUR EPIC STAY" card, which is the site's own
 * pattern for presenting the two homes — a dark panel with one bordered row per
 * home, each carrying that home's accent, and the action on the right in the
 * same accent. This band is that card, widened.
 *
 * TYPOGRAPHY: Montserrat, inherited from the theme. Never name a family here.
 * EVH headings use NORMAL letter-spacing; only the small uppercase labels get
 * tracking.
 *
 * COLOUR IS DECLARED, NOT INHERITED. The theme sets a body colour of #394553 on
 * spans inside sections, and it beat this component's inherited white — the
 * lead home name rendered dark grey on black. Every text element here states
 * its own colour.
 *
 * WIDTH: the band is full-bleed but its CONTENT is capped and centred. Without
 * that cap it stretched 2380px on a wide display, which read as a spreadsheet
 * rather than a moment.
 *
 * MOTION: locked EVH standard — build in, don't appear. Kicker first, then rows,
 * house overshoot easing, entrance only. Nothing loops (a looping attention
 * getter fails WCAG 2.2.2 and reads as discount travel).
 *
 * CONTRAST: #FF2D2D is 5.34:1 on #000 at full strength but 3.29:1 and 2.60:1
 * dimmed, so weaker tiers use white rather than a faded accent. The tier label
 * is the element that exists so tier is not colour-only (WCAG 1.4.1).
 */

.evh-sm {
  --evh-ground: #000;
  --evh-ink: #ffffff;
  --evh-ink-dim: rgba(255, 255, 255, 0.72);
  --evh-hair: rgba(255, 255, 255, 0.13);
  --evh-accent: #FF2D2D;

  box-sizing: border-box;
  font-family: inherit;
  color: var(--evh-ink);
  background: var(--evh-ground);
  -webkit-font-smoothing: antialiased;
}

.evh-sm *,
.evh-sm *::before,
.evh-sm *::after { box-sizing: inherit; font-family: inherit; }

.evh-sm__sronly {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.evh-sm__rows { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- *
 * Shared row anatomy                                                *
 * ---------------------------------------------------------------- */
.evh-sm__row {
  display: flex;
  align-items: center;
  gap: 0.85em;
  flex-wrap: wrap;
  position: relative;
}

.evh-sm__line {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  flex-wrap: wrap;
  min-width: 0;
}

.evh-sm__home {
  color: var(--evh-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
}

.evh-sm__sep { color: rgba(255, 255, 255, 0.3); font-weight: 400; }

.evh-sm__window {
  color: var(--evh-ink);
  font-weight: 300;
  letter-spacing: normal;
}

/* Tier is set as TEXT, not a badge. A pill is dashboard furniture; at this
   price point the claim should read like a line in a rate card. */
.evh-sm__status {
  color: var(--evh-accent);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

/* Weak tiers step to white. Dimming the accent drops the one label that must
   stay readable to 2.60:1. */
.evh-sm__row--ink .evh-sm__status { color: rgba(255, 255, 255, 0.78); font-weight: 500; }

/* Sentence case, underlined with an offset. Uppercase + wide tracking on a
   link is the generic-UI-kit tell; a real underline reads as editorial. */
.evh-sm__cta {
  margin-left: auto;
  color: var(--evh-ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  /* 0.32 measured ~1.6:1 on pure black. The underline is the ONLY thing marking
     this as a link -- the text is the same white as the meta line above it --
     so on a phone in daylight the band's primary action did not read as
     clickable at all. 0.58 stays restrained and stops the guessing. */
  text-decoration-color: rgba(255, 255, 255, 0.58);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  white-space: nowrap;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.evh-sm__cta:hover { color: var(--evh-accent); text-decoration-color: var(--evh-accent); }
.evh-sm__cta:focus-visible { outline: 2px solid var(--evh-accent); outline-offset: 4px; }
.evh-sm__row--ink .evh-sm__cta { color: var(--evh-ink); }
.evh-sm__row--ink .evh-sm__cta:hover { text-decoration-color: var(--evh-ink); }

/* ---------------------------------------------------------------- *
 * Moment — the feature band                                         *
 * ---------------------------------------------------------------- */
.evh-sm--moment {
  position: relative;
  padding: clamp(36px, 4.5vw, 64px) clamp(18px, 4vw, 40px);
  overflow: hidden;
}

/* Content is capped and centred; the black itself stays full-bleed. */
.evh-sm--moment > * {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.evh-sm--moment::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 95%);
  height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--evh-glow, rgba(255,45,45,.16)) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
}
.evh-sm--moment.is-in::after { opacity: 1; }
.evh-sm--moment:not([data-tier="critical"]):not([data-tier="limited"])::after { opacity: 0 !important; }

.evh-sm__kicker {
  margin: 0 auto 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--evh-accent);
}

/* Lead — one dominant line, everything else clearly subordinate.
   The previous version put a 34px bold caps name, a 25px light window name and
   an 11px badge on the SAME baseline: three sizes competing, no hierarchy. The
   window is the news, so it becomes the display line; the home and the claim
   sit under it as one quiet meta line. */
.evh-sm__rows--lead .evh-sm__row {
  display: block;
  padding: 0 0 0 clamp(16px, 1.8vw, 26px);
  border-left: 3px solid var(--evh-accent);
}
.evh-sm__rows--lead .evh-sm__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45em;
}
/* Window takes the whole first line at display size. */
.evh-sm__rows--lead .evh-sm__window {
  order: 1;
  flex: 0 0 100%;
  font-size: clamp(31px, 4.1vw, 56px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.012em;   /* large bold caps need tightening, not tracking */
  line-height: 0.96;
  margin-bottom: 14px;
  color: var(--evh-ink);
}
.evh-sm__rows--lead .evh-sm__home {
  order: 2;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.62);
}
.evh-sm__rows--lead .evh-sm__sep { order: 3; color: rgba(255,255,255,0.28); }
.evh-sm__rows--lead .evh-sm__status { order: 4; font-size: 16px; }
.evh-sm__rows--lead .evh-sm__cta { margin: 16px 0 0; display: inline-block; }

/* Sub rows — one size, hairline separated. Reads as a list, not as cards. */
.evh-sm__rows--sub { margin-top: 30px; display: grid; gap: 0; }
.evh-sm__rows--sub .evh-sm__row {
  padding: 15px 0;
  border-top: 1px solid var(--evh-hair);
  background: none;
  border-left: 0;
  border-radius: 0;
}
.evh-sm__rows--sub .evh-sm__home {
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--evh-ink);
}
.evh-sm__rows--sub .evh-sm__window { font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.62); }
.evh-sm__rows--sub .evh-sm__status { font-size: 15px; }
.evh-sm__rows--sub .evh-sm__cta { font-size: 14px; }

/* Prefill note — injected into MPHB's own form, so it inherits that area's
   colour rather than assuming the band's black. Says plainly that the dates
   are a starting point, which is what stops a later "sold out" from reading
   as the mask slipping on a scarcity claim. */
.evh-sm-prefill-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: inherit;
  opacity: .78;
  border-left: 2px solid var(--evh-accent, #FF2D2D);
  padding-left: 10px;
}
.evh-sm-prefill-note.is-flash { animation: evh-sm-note-in .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes evh-sm-note-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: .78; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .evh-sm-prefill-note.is-flash { animation: none; opacity: .78; }
}

/* ---------------------------------------------------------------- *
 * Strip — header chrome                                             *
 * ---------------------------------------------------------------- */
.evh-sm--strip {
  padding: 11px 20px;
  border-bottom: 1px solid var(--evh-hair);
  font-size: 14px;
  line-height: 1.45;
}
.evh-sm--strip .evh-sm__rows { max-width: 1240px; margin: 0 auto; }
.evh-sm--strip .evh-sm__row { justify-content: center; gap: 0.8em; }
.evh-sm--strip .evh-sm__home { font-size: 13px; }
.evh-sm--strip .evh-sm__window { font-size: 14px; }
.evh-sm--strip .evh-sm__status { font-size: 10px; }
.evh-sm--strip .evh-sm__cta { margin-left: 0; font-size: 12px; }

/* ---------------------------------------------------------------- *
 * Note — quiet, sits inside a card or above a form                  *
 * ---------------------------------------------------------------- */
.evh-sm--note {
  color: inherit;
  background: transparent;
  padding: 14px 16px;
  font-size: 15px;
  border: 1px solid currentColor;
  border-left: 3px solid var(--evh-accent);
  border-radius: 8px;
}
.evh-sm--note .evh-sm__home,
.evh-sm--note .evh-sm__window { color: inherit; }
.evh-sm--note .evh-sm__window { font-weight: 400; }
.evh-sm--note .evh-sm__cta { color: var(--evh-accent); font-size: 12px; }
.evh-sm--note .evh-sm__row--ink .evh-sm__status { color: inherit; }

/* ---------------------------------------------------------------- *
 * Motion — EVH return cascade. Entrance only, never a loop.         *
 * ---------------------------------------------------------------- */
.evh-sm.is-in .evh-sm__kicker {
  animation: evh-sm-rise .34s cubic-bezier(.22, 1, .36, 1) both;
}
.evh-sm.is-in .evh-sm__row {
  animation: evh-sm-countin .46s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 70ms);
}
.evh-sm.is-in .evh-sm__rows--lead .evh-sm__row { animation-duration: .5s; }

@keyframes evh-sm-countin {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.006); }
  100% { opacity: 1; transform: none; }
}
@keyframes evh-sm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.evh-sm.is-armed .evh-sm__row,
.evh-sm.is-armed .evh-sm__kicker { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .evh-sm.is-in .evh-sm__row,
  .evh-sm.is-in .evh-sm__kicker { animation: none; }
  .evh-sm.is-armed .evh-sm__row,
  .evh-sm.is-armed .evh-sm__kicker { opacity: 1; }
  .evh-sm--moment::after { transition: none; }
  .evh-sm__cta { transition: none; }
}

/* ---------------------------------------------------------------- *
 * Small screens                                                     *
 * ---------------------------------------------------------------- */
@media (max-width: 880px) {
  .evh-sm--moment { padding: 30px 16px; }
  .evh-sm__rows--lead .evh-sm__row,
  .evh-sm__rows--sub .evh-sm__row { align-items: flex-start; row-gap: .6em; }
  /* .evh-sm__cta is nowrap and .evh-sm--moment is overflow:hidden, so a label
     wider than the content box was silently CLIPPED -- no wrap, no ellipsis,
     the arrow just gone. In the strip, which has no overflow:hidden, the same
     thing pushed the whole page sideways instead. */
  .evh-sm__cta { margin-left: 0; white-space: normal; }
  /* A block-level primary action ~21px tall is a fiddly tap. padding-block on
     an inline-block leaves the underline exactly where it sits, so this costs
     nothing visually. */
  .evh-sm__rows--lead .evh-sm__cta { padding-block: 12px; }
  .evh-sm--strip .evh-sm__row { gap: .5em; row-gap: .3em; }
  .evh-sm__kicker { letter-spacing: 0.15em; }
}