/* ==========================================================================
   THORNWOOD — page-specific styles  (loaded only by clubs/thornwood.html)
   Reuses the global design tokens from styles.css (:root custom properties).
   All selectors are .tw-* and only appear on the Thornwood page, so nothing
   here affects any other page. No edits to the shared stylesheet were needed.

   Brand brief: the smallest, most intimate of the five clubs — a boutique
   "hidden gem." Warm, close, human, recovery-led. Photos do the talking.
   ========================================================================== */

/* ---------- 1. HERO — photo carousel inside the shared .hero--short -------
   The hero reuses the site's standard .hero.hero--short container and the
   .hero__content / .hero__headline / .hero__sub / .hero__ticker classes, so
   it is IDENTICAL in height, headline size, scrim and ticker to every other
   club hero on the site. Only the background is swapped from a <video> to
   this crossfade photo carousel, mounted inside the standard .hero__bg. --- */

.hero__bg[data-tw-carousel] { background: var(--ink-900); }

/* Keep the shared gradient + grain scrim ABOVE the slide images for text
   legibility — the same z-index technique the video hero uses via
   .hero__bg--video::before/::after. */
.hero__bg[data-tw-carousel]::before,
.hero__bg[data-tw-carousel]::after { z-index: 1; }

.tw-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.tw-hero__slide.is-active { opacity: 1; }

.tw-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* per-slide tuning via inline style */
  display: block;
  image-rendering: -webkit-optimize-contrast;
  /* slow perpetual Ken-Burns drift so the stills feel alive under the fade.
     The editorial colour grade is inherited from the shared .hero__bg filter
     (saturate .55 / contrast 1.05) — matching every other hero on the site. */
  animation: tw-kenburns 22s ease-in-out infinite alternate;
}

@keyframes tw-kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1.4%, 0); }
}

/* ---------- 2. THE GEM — one quiet text-forward beat (warm light) -------- */

.tw-gem {
  background: var(--paper-warm);
  padding: clamp(56px, 8vh, 96px) 0;
  text-align: center;
}
.tw-gem__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
.tw-gem__eyebrow {
  display: block;
  color: var(--grey-500);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.tw-gem__line {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink-900);
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
}
.tw-gem__line em { font-style: italic; font-weight: 300; color: var(--grey-500); }

/* ---------- 3. INSIDE — full-bleed editorial photo bands (dark) ---------- */

.tw-bands {
  background: var(--ink-900);
  padding: clamp(28px, 3vw, 52px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 52px);   /* black gutters of silence between photos */
}

.tw-band {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 50vh, 540px);
}

/* oversized media so the float drift never reveals an edge */
.tw-band__media { position: absolute; inset: -7%; }
.tw-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: contrast(1.04) saturate(0.95) brightness(0.95);
  image-rendering: -webkit-optimize-contrast;
}
.tw-band--float .tw-band__media {
  animation: tw-float 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes tw-float {
  from { transform: translate3d(-1.4%, -1.1%, 0) scale(1.05); }
  to   { transform: translate3d(1.4%, 1.5%, 0) scale(1.10); }
}

/* a two-up detail diptych for rhythm variety */
.tw-band--pair {
  height: auto;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 52px);
  background: var(--ink-900);
}
.tw-band--pair .tw-diptych {
  position: relative;
  overflow: hidden;
  height: clamp(260px, 40vh, 460px);
}
.tw-band--pair .tw-diptych img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.04) saturate(0.95) brightness(0.95);
  image-rendering: -webkit-optimize-contrast;
}

/* ---------- 4. RECOVERY — the signature climax (dark) -------------------- */

.tw-recovery {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  min-height: clamp(440px, 64vh, 700px);
  display: flex;
  align-items: flex-end;
}
.tw-recovery__media { position: absolute; inset: -7%; z-index: 0; }
.tw-recovery__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
  display: block;
  filter: contrast(1.06) saturate(1.0) brightness(0.82);
}
.tw-recovery--float .tw-recovery__media {
  animation: tw-float 34s ease-in-out infinite alternate;
  will-change: transform;
}
.tw-recovery__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg,
      rgba(10, 14, 26, 0.88) 0%,
      rgba(10, 14, 26, 0.62) 36%,
      rgba(10, 14, 26, 0.10) 72%,
      rgba(10, 14, 26, 0.0) 100%);
}
.tw-recovery__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 9vh, 110px) clamp(20px, 4vw, 32px);
}
.tw-recovery__inner { max-width: 540px; }
.tw-recovery__eyebrow {
  display: block;
  color: var(--light-blue);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.tw-recovery__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--paper);
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.tw-recovery__headline em { font-style: italic; font-weight: 300; color: var(--light-blue); }
.tw-recovery__lede {
  color: rgba(251, 250, 247, 0.82);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  margin: 0 0 36px;
  max-width: 34ch;
}
.tw-recovery__lede em { font-style: italic; color: var(--paper); }

/* quiet typographic stat list — the one place specs are allowed */
.tw-recovery__stats { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.tw-recovery__stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(154, 180, 212, 0.22);
}
.tw-recovery__stats li:last-child { border-bottom: 1px solid rgba(154, 180, 212, 0.22); }
.tw-recovery__stats .k {
  color: rgba(251, 250, 247, 0.86);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.tw-recovery__stats .v {
  color: var(--light-blue);
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
}

/* ---------- 5. VISIT — warm, low-pressure close ------------------------- */

.tw-visit {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}
.tw-visit__bg { position: absolute; inset: -6%; z-index: 0; opacity: 0.10; }
.tw-visit__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  display: block;
  filter: grayscale(0.2) contrast(1.02);
}
.tw-visit__bg.tw-visit--float { animation: tw-float 38s ease-in-out infinite alternate; }
.tw-visit__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: clamp(88px, 15vh, 168px) clamp(20px, 4vw, 32px);
  text-align: center;
}
.tw-visit__eyebrow {
  display: block;
  color: var(--grey-500);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.tw-visit__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink-900);
  font-size: clamp(38px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.tw-visit__headline em { font-style: italic; font-weight: 300; color: var(--grey-500); }
.tw-visit__sub {
  color: var(--grey-600);
  font-size: clamp(16px, 1.8vw, 20px);
  margin: 0 0 40px;
}
.tw-visit__sub em { font-style: italic; color: var(--ink-900); }

.tw-visit__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 0 0 40px;
  color: var(--grey-600);
  font-size: 14px;
  line-height: 1.7;
}
.tw-visit__meta b {
  display: block;
  color: var(--grey-500);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tw-visit__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
/* a calm, muted location map — present but never the headline */
.tw-map { background: var(--paper-warm); border-top: 1px solid var(--grey-300); }
.tw-map iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 38vh, 360px);
  border: 0;
  filter: grayscale(0.35) contrast(0.98) opacity(0.92);
  transition: filter 0.6s var(--ease);
}
.tw-map:hover iframe { filter: grayscale(0) contrast(1) opacity(1); }

/* ---------- Scroll reveal (paired with site.js .reveal if present) ------- */
/* lightweight self-contained reveal so the page works even before site.js */
.tw-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.tw-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  .tw-band--pair { grid-template-columns: 1fr; }
  .tw-band--pair .tw-diptych { height: clamp(260px, 42vh, 440px); }
  .tw-recovery__scrim {
    background: linear-gradient(to top,
      rgba(10,14,26,0.92) 0%, rgba(10,14,26,0.66) 44%, rgba(10,14,26,0.18) 100%);
  }
  .tw-recovery { align-items: flex-end; }
  .tw-recovery__inner { max-width: none; }
}

@media (max-width: 560px) {
  .tw-band { height: clamp(300px, 50vh, 460px); }
}

/* ---------- Motion safety ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tw-hero__slide img,
  .tw-band--float .tw-band__media,
  .tw-recovery--float .tw-recovery__media,
  .tw-visit__bg.tw-visit--float {
    animation: none !important;
    transform: none !important;
  }
  .tw-hero__slide { transition: opacity 0.4s linear; }
  .tw-band__media,
  .tw-recovery__media { inset: 0; }
  .tw-reveal { opacity: 1; transform: none; transition: none; }
}


/* italic serif accents → Libre Caslon Text (Display has no true italic) */
.tw-gem__line em,
.tw-recovery__headline em,
.tw-visit__headline em,
.tw-recovery__stats .v {
  font-family: 'Libre Caslon Text', Georgia, serif;
}