/* KWCS page hero — the interior-page counterpart to the homepage .hero band. */

.page-hero {
  position: relative;
  /* Sits above the section that follows so the photo card can hang over it. */
  z-index: 2;
  /* The band keeps real padding on both sides so it grows with the copy; the
     card's negative bottom margin is what pulls it out past the bottom edge. */
  padding: 70px 80px;
}

.page-hero--centered { padding: 96px 80px; }

/* The photo overhangs the band, so the section below has to start clear of it
   rather than running underneath the card. Core's flow layout zeroes block
   margins on top-level blocks, hence the doubled class. */
.wp-block-kwcs-page-hero.page-hero--media { margin-block-end: 80px; }

/* The gold band, faces and doodles live in their own clipped layer so the
   photo card is free to overhang the bottom edge without being cut off. */
.page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-bg .faces-pattern { opacity: 0.45; }

.page-hero-doodle {
  position: absolute;
  pointer-events: none;
}

.page-hero-doodle--loop {
  top: -16px;
  right: -20px;
  width: 910px;
  height: 593px;
}

.page-hero-doodle--stars {
  top: 5%;
  right: 3%;
  width: 78px;
}

.page-hero-doodle--burst {
  bottom: 5%;
  right: 5.5%;
  width: 72px;
  transform: rotate(90deg);
}

.page-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.page-hero--media .page-hero-inner {
  display: grid;
  /* The card is a fixed 465x600 frame, so the text column takes the slack. */
  grid-template-columns: 1fr 465px;
  gap: 60px;
  align-items: center;
}

.page-hero-text { text-align: center; }

.page-hero--centered .page-hero-text {
  max-width: 860px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}

.page-hero-title {
  font-size: clamp(46px, 5vw, 76px);
  line-height: 1;
  color: var(--navy-deep);
  margin: 0;
}

.page-hero-body {
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--navy-deep);
  max-width: 620px;
  margin: 24px auto 0;
}

.page-hero-body p { margin: 0 0 16px; }

.page-hero-body p:last-child { margin-bottom: 0; }

/* ─── Photo card ─── */
.page-hero-visual {
  position: relative;
  /* Hung from the bottom of the band rather than centred, so the overhang stays
     exactly 65px however tall the copy beside it grows. The margin cancels the
     band's bottom padding and then some — 70 + 65. */
  align-self: end;
  margin-bottom: -135px;
}

.page-hero-card {
  position: relative;
  background: white;
  border-radius: 38px;
  padding: 12px;
  /* The mockup's photo sits slightly off-square, the way a print would. */
  transform: rotate(1.5deg);
  box-shadow: 0 22px 50px rgba(30, 75, 143, 0.25);
  /* A fixed portrait frame regardless of what gets uploaded — a wide photo
     centre-fills rather than changing the shape of the hero. */
  width: 465px;
  height: 550px;
}

.page-hero-slide {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  border-radius: 30px;
  opacity: 0;
  transition: opacity 900ms ease;
}

.page-hero-slide.is-active { opacity: 1; }

/* No script, no toggling: without JS the first slide stands on its own. */
.page-hero-card:not([data-kwcs-slideshow]) .page-hero-slide:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-hero-slide { transition: none; }
}

@media (max-width: 1100px) {
  .page-hero { padding: 64px 40px; }
  .page-hero--centered { padding: 72px 40px; }
  .wp-block-kwcs-page-hero.page-hero--media { margin-block-end: 64px; }

  .page-hero--media .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
  }

  .page-hero-visual {
    width: min(100%, 465px);
    margin-bottom: -129px;
  }

  /* Stacked there is no room for a fixed frame, so the card scales and the
     aspect ratio holds the shape. */
  .page-hero-card {
    width: 100%;
    height: auto;
    aspect-ratio: 465 / 550;
  }

  /* The doodles are positioned around a card that is no longer beside the
     text, so the two that would land on top of it step aside. */
  .page-hero-doodle--loop { display: none; }
}

@media (max-width: 768px) {
  .page-hero { padding: 48px 20px; }
  .page-hero--centered { padding: 56px 20px; }
  .wp-block-kwcs-page-hero.page-hero--media { margin-block-end: 48px; }
  .page-hero-body { font-size: 16.5px; }
  .page-hero-visual { margin-bottom: -98px; }
  /* Stacked, the band is short enough that the stars land on the headline. */
  .page-hero-doodle--stars { display: none; }
  .page-hero-doodle--burst { width: 60px; bottom: 8%; }
}

/* ── Centred variant accents ──────────────────────────────────────────────
   No photo to frame, so the doodles sit either side of the headline. */

.page-hero--centered .page-hero-doodle--heart {
  top: 26px;
  left: 9%;
  width: 96px;
}

.page-hero--centered .page-hero-doodle--stars {
  top: 22px;
  right: 9%;
  left: auto;
  width: 84px;
}

.page-hero--centered .page-hero-doodle--curl {
  top: 42%;
  right: 2%;
  width: 190px;
}

@media (max-width: 1024px) {
  .page-hero--centered .page-hero-doodle--curl { display: none; }
  .page-hero--centered .page-hero-doodle--heart { width: 68px; left: 4%; }
  .page-hero--centered .page-hero-doodle--stars { width: 60px; right: 4%; }
}

@media (max-width: 600px) {
  .page-hero--centered .page-hero-doodle--heart,
  .page-hero--centered .page-hero-doodle--stars { display: none; }
}