/* =============================================================================
   TOURBIRTH — DISCOVERY BLUEPRINT PAGE STYLES
   css/pages/discovery-blueprint.css
   Page-specific styles for discovery-blueprint.html.
   Sections: Hero · Vision Statement · Four Sequential Stages ·
             Teaser Form · Film Series (all 10 cards)

   Component styles (editorial-card, arch-list, btn-outline) live in
   components.css and layout.css. This file handles page-specific layout only.
   ============================================================================= */

/* HERO cinematic carousel veil + text-shadow now live in css/travel.css
   (shared, via .hero--cinematic). */

/* ---------------------------------------------------------------------------
   BESPOKE 3-IMAGE GALLERY — tall portrait frames with overlay captions.
   Captions sit over a gradient on the image, so they stay legible in BOTH
   themes regardless of the section's flipped background.
--------------------------------------------------------------------------- */
.db-gallery3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(0.75rem, 1.5vw, 1.25rem);
}
.db-gallery3__item {
  position:      relative;
  margin:        0;
  overflow:      hidden;
  aspect-ratio:  3 / 4;
  border:        1px solid rgba(198, 169, 107, 0.22);
}
.db-gallery3__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 1.3s var(--ease-cinematic, ease);
}
.db-gallery3__item:hover img { transform: scale(1.06); }
.db-gallery3__cap {
  position:       absolute;
  inset:          auto 0 0 0;
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  padding:        clamp(1rem, 2vw, 1.7rem);
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.85), rgba(11, 29, 42, 0));
}
.db-gallery3__cap-k {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--gold);
}
.db-gallery3__cap-v {
  font-family: var(--font-display);
  font-size:   clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 300;
  line-height: 1.2;
  color:       var(--offwhite);
}
@media (max-width: 760px) {
  .db-gallery3 { grid-template-columns: 1fr; }
  .db-gallery3__item { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------------
   Blueprint Stage — container for each of the four sequential stages
   Each stage uses .section with its own background modifier.
--------------------------------------------------------------------------- */

.blueprint-stage {
  /* Section padding already applied by .section — no extra needed */
}

/* Large decorative Roman numeral — editorial, visible gold tone */
.blueprint-stage__numeral {
  display:        block;
  font-family:    var(--font-display);
  font-size:      clamp(5rem, 14vw, 11rem);
  font-weight:    300;
  color:          var(--gold);
  opacity:        0.5;
  line-height:    1;
  letter-spacing: 0.04em;
  user-select:    none;
  pointer-events: none;
  margin-bottom:  var(--space-sm);
}

/* On dark sections, numeral appears slightly more prominent */
.section--dark .blueprint-stage__numeral,
.section--deep .blueprint-stage__numeral {
  opacity: 0.45;
}

/* Sub-grid — auto-fit responsive, used for editorial cards within stages */
.blueprint-stage__sub-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   var(--space-lg);
  margin-top:            var(--space-xl);
}

/* Stage II has 5 cards — tighter minimum so they fit on one or two rows */
.blueprint-stage__sub-grid--5 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ---------------------------------------------------------------------------
   Vision Statement — centered italic quote between hero and stages
--------------------------------------------------------------------------- */

.blueprint-vision__quote {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead);
  letter-spacing: var(--ls-heading);
  color:          var(--offwhite);
  text-align:     center;
  max-width:      var(--content-width);
  margin-inline:  auto;
}

/* ---------------------------------------------------------------------------
   Tightened top padding when this section directly follows a hero
--------------------------------------------------------------------------- */

.section--manifesto {
  padding-top: calc(var(--nav-height) + var(--space-sm));
}

/* ---------------------------------------------------------------------------
   Form / film section subtle helper text (Montserrat 300, sage, max width)
--------------------------------------------------------------------------- */

.blueprint-helper-text {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--sage);
  max-width:      620px;
}

.blueprint-helper-text--center {
  text-align: center;
}

/* Inline "visit the Request Invitation page" link variant of link-underline:
   keeps original case and inherits surrounding font sizing. */
.link-underline--inline {
  font-size:      inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Teaser Form — Discovery Blueprint inquiry, between Stage IV and Film Series
--------------------------------------------------------------------------- */

.blueprint-teaser-form {
  max-width:     680px;
  margin-inline: auto;
}

.blueprint-teaser-form .invitation-form {
  /* Inherits all .invitation-form rules from components.css */
}

/* On light background, input text is charcoal/deep-neutral (already handled
   by components.css .form-field input rule with var(--deep-neutral)) */

/* ---------------------------------------------------------------------------
   Film Series — full 10-card grid
   Two responsive rows, auto-fills available columns
--------------------------------------------------------------------------- */

.films-grid-full {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-lg);
  margin-top:            var(--space-xl);
}

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

/* Mid breakpoint — keep cards in 2-up grids on tablet before collapsing to 1-up */
@media (max-width: 1024px) {
  .blueprint-stage__sub-grid,
  .blueprint-stage__sub-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blueprint-stage__numeral {
    font-size: clamp(4rem, 16vw, 6rem);
  }

  .blueprint-stage__sub-grid,
  .blueprint-stage__sub-grid--5 {
    grid-template-columns: 1fr;
  }

  .films-grid-full {
    grid-template-columns: 1fr;
  }
}