/* =========================================================
   Hero — styles for patterns/hero.php
   The block editor cannot express a full-bleed split with
   layered gradients, so the pattern only supplies class
   hooks and all of the composition happens here.
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
}
/* Every direct child is placed in the same single grid cell, so the
   photos, the copy and the cue stack on top of each other WITHOUT any
   of them needing position:absolute. The editor canvas wraps blocks
   differently from the front end, so anything that leans on absolute
   positioning to escape flow is fragile there — grid stacking is not. */
.hero > *{ grid-column:1; grid-row:1; min-width:0; }

/* Both portraits sit behind everything, side by side.
   No width/height of its own: grid already stretches this to fill the
   cell. A percentage height here would resolve against .hero's
   min-height (which is NOT a definite height), compute to auto, and
   drop the photos back to their natural aspect ratio. */
.hero-split{ display:flex; align-items:stretch; }
.hero-split .half{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; margin:0; }
.hero-split .half img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(0.68);
  transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;
}
.hero-split .half.left img{ object-position:70% center; }
.hero-split .half.right img{ object-position:30% center; }
@keyframes heroZoom{ to{ transform:scale(1); } }

/* Darkening wash, so the type stays legible over any photo. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.15) 35%, rgba(20,20,20,0.78) 100%);
}
/* Hairline seam between the two halves. */
.hero::after{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:1;
  background:rgba(255,255,255,0.25);
}

/* Child combinator, so this outranks the layout engine's
   `.is-layout-flow > *` margin rule. Centring is grid's job now. */
.hero > .hero-content{
  position:relative; z-index:2; margin:0; max-width:none;
  align-self:center; justify-self:center;
  text-align:center; color:var(--paper);
  padding:0 6vw;
}
.hero-content .eyebrow{ color:var(--bone); opacity:0; animation:riseIn .9s var(--ease) .3s forwards; }
.hero-content h1{
  line-height:1.06; margin:1rem 0 1.5rem; color:var(--paper);
  opacity:0; animation:riseIn 1s var(--ease) .5s forwards;
}
.hero-content h1 strong{ color:var(--bone); font-weight:700; }
.hero-content .hero-blurb{
  max-width:38ch; margin:0 auto 2.2rem;
  font-size:1.05rem; color:rgba(255,255,255,0.82); font-weight:300;
  opacity:0; animation:riseIn 1s var(--ease) .7s forwards;
}
.hero-actions{
  gap:1rem;
  opacity:0; animation:riseIn 1s var(--ease) .9s forwards;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

/* The shared outline button is dark-on-light; over the photo it flips. */
.hero-actions .is-style-unfold-outline .wp-block-button__link{
  background:transparent; color:var(--paper); border-color:rgba(255,255,255,0.5);
}
.hero-actions .is-style-unfold-outline .wp-block-button__link:hover{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
}

.scroll-cue{
  position:absolute; left:50%; bottom:2.2rem; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem; color:rgba(255,255,255,0.65);
}
.scroll-cue span{ font-size:0.65rem; letter-spacing:0.2em; font-weight:600; }
.scroll-cue .line{ width:1px; height:40px; background:rgba(255,255,255,0.35); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--bone); animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* Editor-only: the entrance animations start at opacity:0, which would
   leave the hero blank while somebody is editing it. */
.editor-styles-wrapper .hero-content > *,
.editor-styles-wrapper .hero-split .half img{ opacity:1; animation:none; transform:none; }

/* =========================================================
   Hooks for the unfold/hero block's controls.
   Appended after the rules above so the same-specificity
   overrides land, and defaulted so patterns/hero.php — which
   sets no custom property — renders exactly as it did.
   ========================================================= */

/* Scrim strength is a slider now. 0.78 was the old bottom stop;
   the other two keep their original ratio to it (0.35, 0.15). */
.hero{ --hero-scrim:0.78; }
.hero::before{
  background:linear-gradient(180deg,
    rgba(20,20,20,calc(var(--hero-scrim) * 0.45)) 0%,
    rgba(20,20,20,calc(var(--hero-scrim) * 0.19)) 35%,
    rgba(20,20,20,var(--hero-scrim)) 100%);
}

/* "Fill the screen" off — the next section peeks in below the fold. */
.hero.is-short{ min-height:72vh; }

/* Primary photo — tablet and phone are too narrow to split, so the
   other half drops out and the primary one takes the full width. The
   seam goes with it, and the off-centre crop that kept each half's
   subject clear of the seam goes back to centre (an inline focal point
   from inc/image-focal.php still wins). */
@media (max-width:900px){
  .hero.has-primary-left .hero-split .half.right,
  .hero.has-primary-right .hero-split .half.left{ display:none; }
  .hero[class*="has-primary-"]::after{ display:none; }
  .hero[class*="has-primary-"] .hero-split .half img{ object-position:center; }
}