/* ============================================================
   HOME PAGE STYLES
   Used only by: index.html
   Global styles (nav, footer, buttons, colors) are in styles.css
   ============================================================ */

/* Homepage flow locks the section order: hero, essence, then Creative Universes. */
.home-flow {
  display: flex;
  flex-direction: column;
}

.home-section--hero { order: 1; }
.home-section--essence { order: 2; }
.home-section--universes { order: 3; }

/* Extends the global fade sequence so Creative Universes enters after Essence. */
.delay-6 { animation-delay: 1.2s; }

/* ============================================================
   HERO SECTION
   ─────────────────────────────────────────────────────────────
   Two-column grid: left text | right photo card.

   Key Figma measurements used here:
   - Hero height: 720px (fixed, not full viewport)
   - Left margin: 207px  (padding-left on .hero)
   - Right margin: 183px (padding-right on .hero)
   - Photo column: 477px wide (fixed)
   - Gap between columns: 14px
   - Photo card top offset: 53px (margin-top on .hero-photo)
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 477px; /* left column is flexible, photo col is fixed 477px */
  height: 720px;
  max-width: 1295px; /* ← same container width as the universe section */
  margin: 0 auto;    /* centers the hero grid on the page */
  padding: 0 100px;
  gap: 48px;
  overflow: hidden;
}

/* LEFT COLUMN: eyebrow, name, divider, pitch, buttons */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically centers the text stack in the 720px hero */
  padding: 0;              /* hero handles all horizontal margins */
}

/* NAME: "Leïca" + "Lucien" stacked */
.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* "Leïca" — upright, dark ink */
.name-first {
  display: block;
  font-size: 96px; /* Figma: text-[96px] */
  color: var(--ink);
  font-style: normal;
}

/* "Lucien" — italic, terracotta */
.name-last {
  display: block;
  font-size: 96px;
  color: var(--terra);
  font-style: italic;
}

/* Divider: short terracotta line + gold dot */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.divider-line {
  width: 40px;
  height: 2px; /* Figma: h-[2px] */
  background: var(--terra);
}

.divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* Pitch paragraph */
.hero-pitch {
  font-size: 15px;   /* Figma: text-[15px] */
  font-weight: 300;
  line-height: 1.82; /* Figma: leading-[1.82] */
  color: var(--warm-mid);
  max-width: 480px;  /* Figma: w-[480px] */
  margin-bottom: 44px;
}

/* CTA buttons row */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 24px; /* Figma: gap-[12px] */
}


/* ============================================================
   PHOTO CARD (right column)
   ─────────────────────────────────────────────────────────────
   This is a card, not a full-bleed image. It:
   - Starts 53px from the hero top (align-self: start + margin-top)
   - Has a beige (#EDE3D4) background visible at the bottom
   - Has a subtle drop shadow (from Figma)
   - Uses flexbox so the "Film · TV · Theatre" tag sits naturally
     at the bottom-right without needing absolute positioning
   ============================================================ */
.hero-photo {
  align-self: start;              /* card starts from top, not vertically centered */
  margin-top: 53px;               /* Figma: photo card starts 53px from hero top */

  background: var(--cream-deep);  /* beige strip visible below the photo */
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.25); /* Figma shadow */

  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* corner tag aligns to the right */
  gap: 11px;              /* gap between photo and corner tag */
  padding-bottom: 10px;   /* breathing room below the corner tag */
}

/* The image container — sits at the top of the card */
.photo-image {
  width: 100%;
  overflow: hidden; /* clips the photo to the card boundary */
}

.photo-image img {
  width: 100%;
  height: 600px;          /* approx Figma photo height (617px in design) */
  object-fit: cover;      /* fill without stretching */
  object-position: top;   /* keep the face in frame */
  display: block;         /* removes default inline gap below image */
}

/* "Film · TV · Theatre" label at the bottom-right of the card */
/* Not absolutely positioned — it's part of the flex flow */
.photo-corner-tag {
  background: var(--terra);
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 10px; /* Figma: py-[13px] px-[10px] */
  font-weight: 500;

  /* Round only the LEFT corners — makes the tag look attached to the right edge */
  /* border-radius order: top-left | top-right | bottom-right | bottom-left */
  border-radius: 2px 0 0 2px;
}


/* ============================================================
   ESSENCE BAR
   ─────────────────────────────────────────────────────────────
   Fixed height (64px), beige background, with the "Essence"
   label and a row of italic tag chips.

   Figma gap between label and chips: 38px (was 28px).
   Tags are fixed 36px tall.
   ============================================================ */
.essence-bar {
  height: 64px;
  border-top: 0.5px solid var(--border);
  background: var(--cream-deep);
  padding: 0;        /* no horizontal padding — inner wrapper handles centering */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 20px;  /* breathing room so hero photo card doesn't touch the bar */
}

/* Inner wrapper: same 1295px centering as .hero and .universe */
.essence-inner {
  max-width: 1295px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 38px;
}

.essence-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-muted);
  flex-shrink: 0;
  font-weight: 400;
}

.essence-tags {
  display: flex;
  gap: 6px; /* Figma: gap-[6px] between chips */
  flex-wrap: wrap;
}

/* Each tag chip: fixed 36px height, cream background, subtle border */
.tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  height: 36px;             /* Figma: h-[36px] */
  display: inline-flex;
  align-items: center;
  padding: 0 14px;          /* horizontal padding only — height is fixed */
  border: 0.5px solid var(--border-mid);
  border-radius: 2px;
  background: var(--cream);
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.tag:hover {
  border-color: var(--terra);
  color: var(--terra);
}


/* ============================================================
   CREATIVE UNIVERSES SECTION (REDESIGNED)
   ─────────────────────────────────────────────────────────────
   Full-width outer section with cream background (#F7F1E8).
   Inner container is 1295px wide — same as the hero above —
   so left edges line up perfectly.

   Layout: two columns side by side
     - Left:  320px fixed header block (text + Actor Lens card)
     - Right: flex-grow strip of scrollable film cards
   ============================================================ */

/* Outer: full-width warm cream background, generous vertical padding */
.universes-outer {
  background: #F7F1E8; /* Figma: section background */
  padding: 80px 0 60px;
}

/* Inner: same 1295px centered container as the hero and essence bar */
.universes-inner {
  max-width: 1295px;
  margin: 0 auto;
  display: flex;
  /*
    stretch (instead of flex-start) makes both columns the same height.
    The right column is taller (it holds the cards), so the left column
    will grow to match — giving the Actor Lens card room to fill it.
  */
  align-items: stretch;
  gap: 48px;               /* gap between header block and card strip */
}


/* ─── LEFT COLUMN: header block ─── */

/* Fixed 320px wide — matches Figma Header Block width exactly */
.universes-header {
  width: 320px;
  flex-shrink: 0; /* never compress — always stays 320px */
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma: gap-[16px] between header children */
}

/* "Worlds I'm drawn to" — Cormorant Garamond Light Italic, 42px */
/* line-height 1.2 matches Figma's 120% leading */
.universes-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
}

/* Divider: short terracotta line + gold dot (same pattern as hero) */
.universes-divider {
  display: flex;
  align-items: center;
  gap: 11px; /* gap between line and dot */
}

.univ-divider-line {
  width: 28px;
  height: 2px;
  background: var(--terra); /* terracotta #C4572A */
}

.univ-divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold); /* gold #B8852A */
}

/* Body copy: DM Sans Light 13px, warm muted, 1.75 leading */
.universes-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--warm-muted); /* rgb(160,140,116) */
}

/* Actor Lens Card: beige card at the bottom of the left column */
/* Padding from Figma: 16px top/bottom, 18px left/right */
.actor-lens-card {
  background: var(--cream-deep); /* #EDE3D4 */
  width: 300px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontally centers label and text within the card */
  justify-content: center; /* vertically centers the content block as the card grows */
  text-align: center;
  gap: 6px; /* gap between label and text */
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.07);
  /*
    flex: 1 makes this card grow to fill whatever vertical space is left
    in the column after the eyebrow, title, divider, and body copy.
    Because .universes-inner uses align-items: stretch, the left column
    is the same height as the right (card strip), so the Actor Lens card's
    bottom edge lands at the same level as the bottom of the story cards.
  */
  flex: 1;
}

/* "ACTOR LENS" — small terracotta uppercase label, DM Sans Regular */
.actor-lens-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra); /* terracotta */
}

/* Acting philosophy text — DM Sans Light 12px */
.actor-lens-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}


/* ─── RIGHT COLUMN: scrollable film strip ─── */

/* Wrapper clips the overflow so the strip doesn't break the page layout */
/* position: relative is needed so the .strip-fade gradient can be positioned inside it */
.universes-strip-wrapper {
  flex: 1;             /* takes all remaining space to the right of the header */
  overflow: hidden;    /* clips cards that extend past the container edge */
  min-width: 0;        /* prevents flex overflow bug in some browsers */
  position: relative;  /* needed so .strip-fade can sit over the right edge */
}

/* The actual scrollable row — wider than its container, scrolls sideways */
.universes-strip {
  display: flex;
  gap: 14px;         /* Figma: gap-[14px] between cards */
  overflow-x: auto;  /* horizontal scroll on desktop and mobile */
  padding-bottom: 8px; /* space so scrollbar doesn't clip the cards */
  cursor: grab;      /* hint that this row is draggable */
}

/* Hide scrollbar visually — strip is still scrollable by touch/trackpad */
.universes-strip::-webkit-scrollbar { display: none; }
.universes-strip { scrollbar-width: none; }


/* ─── "STORY WORLDS" label + border above the strip ─── */

.strip-header {
  margin-bottom: 14px; /* breathing room between label and first row of cards */
}

/*
  Flex row that holds: label · dot · instruction hint
  align-items: center keeps the dot and text vertically centered
  gap: 8px gives even spacing between each piece
*/
.strip-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px; /* gap between this row and the thin border below */
}

/* "STORY WORLDS" — tiny uppercase label in muted taupe */
.strip-header-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-muted); /* muted taupe #A08C74 */
  font-weight: 400;
  /* no margin-bottom here — the parent .strip-header-row handles spacing */
}

/*
  Separator dot — a 3px filled circle between the label and hint.
  border-radius: 50% turns the square into a circle.
  opacity: 0.5 softens it to half-strength.
  flex-shrink: 0 prevents the dot from being squished if space is tight.
*/
.strip-header-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a08c74;
  opacity: 0.5;
  flex-shrink: 0;
}

/*
  Instruction hint — Cormorant Garamond Light Italic, 13px, #a08c74 at 75% opacity.
  This is the desktop version ("hover each card").
  The mobile version below overrides visibility using display: none / display: inline.
*/
.strip-header-hint {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 300;   /* Light weight */
  font-style: italic;
  color: rgba(160, 140, 116, 0.75); /* #a08c74 at 75% opacity */
}

/*
  Mobile-only version of the hint ("tap each card").
  Hidden by default — shown only inside the mobile media query below.
  The matching desktop hint is hidden at the same breakpoint.
*/
.strip-header-hint--mobile {
  display: none; /* hidden on desktop */
}

/* Thin 1px line separating the label row from the card strip */
.strip-header-border {
  height: 1px;
  background: var(--border); /* rgba(26,16,8,0.1) — subtle dark-ink line */
}


/* ─── Right-edge cream gradient fade ─── */

/* Sits on top of the strip, fading from transparent to cream on the right.
   Signals to the user that there are more cards to scroll to. */
.strip-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px; /* matches the padding-bottom on .universes-strip */
  width: 80px;
  /* gradient goes from fully transparent (left) to site background cream (right) */
  background: linear-gradient(to right, transparent, #F7F1E8);
  pointer-events: none; /* lets scroll and click events pass through to the strip */
}


/* ─── Individual film card ─── */
/* Each card is 160px wide × 350px tall (220px swatch + 6px perf + 130px info) */
.universe-card {
  width: 160px;     /* Figma: w-[160px] */
  flex-shrink: 0;   /* never compress — all cards stay exactly 160px */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.universe-card:hover {
  transform: translateY(-4px);                    /* card floats up 4px */
  box-shadow: 0 8px 24px rgba(26,16,8,0.15);     /* soft shadow appears below */
}

/* Color swatch: solid color block, 220px tall */
/* position: relative so the film-perf strip can be overlaid at the top */
.card-swatch {
  height: 220px;    /* Figma: h-[220px] */
  position: relative;
  flex-shrink: 0;
}

/* Film perforation strip: 6px black bar that sits on TOP of the swatch */
/* This mimics the look of actual film along the top edge of each card */
.card-perf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;     /* Figma: h-[6px] */
  background: #000;
}

/* Info area: beige (#EDE3D4) background, 130px tall */
/* Contains: gold dot → "STORY WORLD" label → show title → description */
.card-info {
  height: 130px;   /* Figma: h-[130px] */
  background: #EDE3D4;
  padding: 14px 14px 10px; /* breathing room inside info area */
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Small 5×5 gold dot at top of info area */
.card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* "STORY WORLD" — tiny uppercase label, DM Sans Regular, warm muted */
.card-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-muted);
}

/* Show title — Cormorant Garamond SemiBold Italic, 16px, ink */
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 2px; /* small extra gap between label and title */
}

/* Short description — DM Sans Light 10.5px, warm muted, wraps to 2 lines */
.card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--warm-muted);
  margin-top: auto; /* pushes description to the bottom of the info area */
}


/* ─── Hover overlay (inside .card-swatch) ─── */

/* Dark ink overlay that covers the entire color swatch.
   Hidden by default (opacity: 0), fades in when the card is hovered. */
.card-hover-overlay {
  position: absolute;
  inset: 0;                        /* covers full width and height of .card-swatch */
  background: rgba(26,16,8,0.82);  /* dark ink, 82% opaque */
  opacity: 0;                      /* invisible until hovered */
  transition: opacity 200ms ease;  /* smooth 200ms fade */
  pointer-events: none;            /* allows scroll and clicks to pass through */
}

/* Show the overlay when the card is hovered */
.universe-card:hover .card-hover-overlay { opacity: 1; }

/* Short gold horizontal line at the top of the overlay — like a decorative rule */
.hover-gold-line {
  position: absolute;
  top: 22px;    /* 22px from the top of the swatch */
  left: 14px;
  width: 28px;
  height: 1px;
  background: var(--gold); /* gold #B8852A */
}

/* "WHY THIS WORLD" — tiny uppercase label in gold, below the line */
.hover-label {
  position: absolute;
  top: 34px;    /* 34px from the top of the swatch */
  left: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold); /* gold */
}

/* Italic quote — cream text, Cormorant Garamond, below the label */
.hover-quote {
  position: absolute;
  top: 56px;    /* 56px from the top of the swatch */
  left: 14px;
  right: 14px;  /* 14px padding on both sides */
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; /* 13px base + 6px increase per design request */
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #F7F1E8; /* site cream — readable on the dark overlay */
}


/* ============================================================
   RESPONSIVE — tablet (991px and below)
   ============================================================ */
@media (max-width: 991px) {
  /* Stack the hero vertically: photo on top, text below */
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  /* Photo goes first (above text) on mobile */
  .hero-photo {
    order: -1;
    margin-top: 0;
    align-self: auto;
    height: 400px; /* fixed height on mobile */
    padding-bottom: 0;
    gap: 0;
  }

  .photo-image {
    flex: 1;
    height: 100%;
  }

  .photo-image img {
    height: 100%;
  }

  /* Corner tag stays at bottom-right on mobile */
  .photo-corner-tag {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  /* Make hero-photo a positioning context on mobile */
  .hero-photo { position: relative; }

  .hero-left {
    padding: 48px 24px;
    justify-content: flex-start;
  }

  /* Scale the name down on smaller screens */
  .name-first,
  .name-last {
    font-size: clamp(56px, 10vw, 96px);
  }

  .hero-name {
    line-height: 1;
    white-space: nowrap;
  }

  .name-first,
  .name-last {
    display: inline;
  }

  .name-first::after {
    content: " ";
  }

  /* Essence bar wraps on mobile */
  .essence-bar { height: auto; }
  .essence-inner {
    padding: 14px 24px;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Creative Universes: stack header above strip on tablet */
  .universes-outer { padding: 48px 24px 40px; }
  .universes-inner {
    flex-direction: column; /* header stacks above the strip */
    gap: 32px;
  }
  .universes-header {
    width: 100%; /* full width when stacked */
  }
  .universes-title br {
    display: none;
  }
  .universes-title {
    white-space: nowrap;
    font-size: clamp(32px, 6vw, 42px);
  }
  .actor-lens-card { width: 100%; }
  .universes-strip-wrapper { width: 100%; }
}

/* ============================================================
   RESPONSIVE — mobile (479px and below)
   ============================================================ */
@media (max-width: 479px) {
  .hero-left { padding: 36px 20px; }
  .name-first, .name-last { font-size: clamp(42px, 13vw, 56px); }
  .essence-bar { padding: 14px 20px; }
  .universes-outer { padding: 36px 20px 32px; }
  .universes-title { font-size: clamp(29px, 8.5vw, 36px); }

  /*
    On mobile, swap the hint text:
    - hide "hover each card" (desktop version)
    - show "tap each card"  (mobile version)
    Both share the same .strip-header-hint styles; only visibility changes.
  */
  .strip-header-hint:not(.strip-header-hint--mobile) { display: none; }
  .strip-header-hint--mobile { display: inline; }
}