/**
 * BH Coastal — Page Patterns (v1 ship)
 * --------------------------------------
 * Page-specific composition patterns for the v1 launch. Built on the
 * existing tokens/layout/typography system — no new colors, type, or
 * spacing values introduced here.
 *
 * Signature element: the overlapping caption card on the hero and
 * feature moments. Chosen deliberately instead of the generic
 * left-copy/right-image split (flagged in prior review as exactly
 * the templated pattern the Brand Bible warns against) — the caption
 * card breaks the image's rectangle asymmetrically, reads as an
 * editorial print layout (a magazine cover treatment) rather than a
 * SaaS marketing hero.
 */

/* ---------- Hero triptych (Home only) ---------- */
/* Fills the space either side of a portrait "full shot" center image
   with two supporting side images, rather than leaving it empty.
   Mobile: side images hidden, center shot shown alone. */

.hero-triptych {
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 26rem;
  max-height: 44rem;
}

.hero-triptych-grid {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
}

.hero-triptych-side {
  display: none;
  background: var(--color-bg);
}

.hero-triptych-side img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-triptych-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.hero-triptych-center picture,
.hero-triptych-center img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .hero-triptych {
    height: 88vh;
    min-height: 32rem;
    max-height: 54rem;
  }

  .hero-triptych-grid {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .hero-triptych-side {
    display: block;
  }
}

/* ---------- Hero (single-image pages, e.g. product page) ---------- */

.hero-figure {
  position: relative;
  overflow: hidden;
}

.hero-figure picture,
.hero-figure img {
  display: block;
  width: 100%;
  height: 88vh;
  min-height: 32rem;
  max-height: 54rem;
  object-fit: cover;
  object-position: top center;
}

.hero-card {
  position: relative;
  margin-top: -6rem;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  background: var(--color-bg);
  padding: var(--space-5) var(--space-4);
  max-width: 30rem;
  border-top: 1px solid var(--color-border);
}

.hero-card .kicker {
  display: block;
  margin-bottom: var(--space-2);
}

.hero-card h1 {
  margin-bottom: var(--space-3);
}

.hero-card p {
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .hero-card {
    margin-top: -9rem;
    margin-left: var(--gutter-md);
    padding: var(--space-6) var(--space-5);
  }
}

@media (min-width: 1024px) {
  .hero-card {
    margin-left: var(--gutter-lg);
    max-width: 34rem;
  }
}

/* ---------- Feature moment (Product Feature / Editorial Split reuse) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
    align-items: end;
  }

  .feature--reverse {
    direction: rtl;
  }

  .feature--reverse > * {
    direction: ltr;
  }
}

.feature-figure {
  position: relative;
}

.feature-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-copy {
  padding-block: var(--space-2);
}

/* ---------- Pillar list (Our Philosophy) ---------- */

.pillar {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.pillar:first-of-type {
  border-top: 0;
}

.pillar-index {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-sandstone);
  letter-spacing: var(--ls-nav);
}

/* ---------- Empty state (Journal placeholder) ---------- */

.empty-state {
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  text-align: center;
}

/* ---------- Gallery (shorts-detail / multi-model) ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-grid figure {
  margin: 0;
}

.gallery-grid figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

/* ---------- Contact ---------- */
.contact-method {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
}