/* ============================================
   Rooted In Christ Florals — Home page layout
   Extends css/style.css. Does NOT redefine tokens.
   Garden scrollytelling: scripture pull-quote,
   editorial bento, parallax about image, layered CTA.
   Motion lives in style.css (reveal/bloom/parallax/petal).
   ============================================ */

/* ── Hero polish ─────────────────────────────
   The shared sheet already lays out .hero (grid),
   .petal-field, .hero-content, .hero-cross. We add a
   soft garden wash behind it so the cross reads with depth. */
.hero {
  background:
    radial-gradient(120% 90% at 78% 28%, var(--surface-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--light-gray) 100%);
}

/* ── Scripture pull-quote — large, line-revealed ── */
.scripture-pullquote {
  background: var(--sage);
  color: var(--charcoal);
  text-align: center;
  padding: var(--space-5) var(--space-4);
}
.scripture-pullquote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3.4rem);
  line-height: 1.2;
  max-width: 18ch;
  margin: 0 auto;
}
.scripture-pullquote-cite {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  margin-top: var(--space-3);
}

/* ── Featured Work — editorial bento ────────── */
.featured-head {
  max-width: 560px;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.featured-head h2 { margin: var(--space-1) 0 var(--space-2); }
.featured-head p { color: var(--gray); }

/* Editorial tile grid: a lead tile spans 2 cols + 2 rows for scale
   contrast; every other tile is a single cell. Row height is NOT a fixed
   px value + span tricks (that produced panoramic slivers + grid holes).
   Instead each tile owns its aspect-ratio, so the box can never sliver and
   never shifts on reveal. 6 photos tile a 3-col grid exactly (no holes):
   lead(2x2) cols1-2 rows1-2; two singles col3 rows1-2; three singles row3. */
.featured-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
}
.bento-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  grid-row: span 1;
  grid-column: span 1;
  aspect-ratio: 4 / 5; /* near the ~4:5 Instagram source; never a sliver */
}
.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}
.bento-item:hover img,
.bento-item:focus-within img { transform: scale(1.04); }

/* Lead tile: square (1:1) box that spans 2x2. Its own aspect-ratio governs
   height, so the two stacked single tiles beside it land flush. */
.bento-lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}
/* tall/wide no longer apply extreme spans — they read as normal portrait
   tiles, keeping every box between 3/4 and 3/2. */
.bento-tall,
.bento-wide { grid-column: span 1; grid-row: span 1; }

.featured-foot,
.services-foot {
  text-align: center;
  margin-top: var(--space-5);
}

/* ── About band + parallax frame ─────────────
   The shared .about-split already grids 1fr/1fr with the
   ::after frame motif on .about-image-wrap. We wrap the
   photo in an overflow-hidden frame taller than the image
   so the parallax translate has room and causes no shift. */
.about-band { background: var(--light-gray); }

/* The offset accent frame (.about-image-wrap::after, in style.css) is
   anchored to the wrap, while the photo translates inside .parallax-frame.
   Keep the ::after on the wrap: .parallax-frame has overflow:hidden, so a
   ::after offset there (bottom/right -16px) would be clipped away. Instead
   match the wrap's box exactly to the frame's box so the accent stays
   aligned with the visible photo — the wrap is a plain block, so we pin it
   to the frame's intrinsic size and strip inline-content height. */
.about-image-wrap {
  display: block;
  line-height: 0;
}
.about-image-wrap > .parallax-frame {
  width: 100%;
}

.parallax-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.parallax-frame img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.about-cta { margin-top: var(--space-2); }

/* ── Services — feature card carries more weight ── */
.services-section .services-grid {
  text-align: left;
  align-items: start;
}
.service-card-feature .service-card-img { aspect-ratio: 4 / 3; }
.service-card-feature .service-card-body h3 { font-size: var(--text-h2); }

/* On wide screens the first card claims two columns for scale contrast. */
@media (min-width: 901px) {
  .services-section .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-card-feature {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
  .service-card-feature .service-card-img { height: 100%; aspect-ratio: auto; }
  .service-card-feature .service-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4);
  }
}

/* ── CTA banner — layered, not a flat block ── */
.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 15% 0%, var(--surface-2) 0%, transparent 45%),
    var(--blush);
  padding: var(--space-section) var(--space-4);
  text-align: center;
}
/* Quiet cross-tint glow layer behind the copy (decorative). */
.cta-banner::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(122,70,174,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}
.cta-label { color: var(--sage-dark); }
.cta-banner h2 { margin: var(--space-1) 0 var(--space-2); }
.cta-copy {
  color: var(--gray);
  max-width: 480px;
  margin: 0 auto var(--space-4);
}
.cta-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────
   <=900px: 2 cols. 6 single 4/5 tiles tile exactly into 3 rows (no holes,
   no slivers); the lead drops to a normal tile so the span math can't leave
   a gap. <=560px: single column, all portrait 4/5. */
@media (max-width: 900px) {
  .featured-bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lead {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 560px) {
  /* Two across on phones — single column took too much space and scrolling.
     6 portrait tiles fill 2 cols x 3 rows exactly, no holes, no slivers. */
  .featured-bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bento-item,
  .bento-lead {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 5;
    max-width: none;
  }
}

/* ── Reduced motion: no hover/focus lift or zoom ── */
@media (prefers-reduced-motion: reduce) {
  .bento-item:hover img,
  .bento-item:focus-within img { transform: none !important; }
}