/* =========================================================
   NPW INTERIOR / EDITORIAL COMPONENTS — STEP 15
   Reusable breadcrumb and interior hero patterns.
   ========================================================= */

.interior-breadcrumb{
  border-bottom:1px solid var(--border-default,var(--line));
  background:var(--surface-default,var(--white));
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:54px;
  color:var(--text-secondary,var(--muted));
  font-family:var(--font-ui,var(--font));
  font-size:.78rem;
  line-height:1.4;
}

.breadcrumb a{
  color:inherit;
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--action-primary-hover,var(--green-700));
  text-decoration:underline;
  text-underline-offset:.2em;
}

.breadcrumb a:focus-visible{
  outline:3px solid var(--focus-ring,var(--green-700));
  outline-offset:4px;
  border-radius:4px;
}

.breadcrumb-separator{
  color:var(--border-strong,#C5D6CD);
  user-select:none;
}

.breadcrumb [aria-current="page"]{
  color:var(--text-primary,var(--ink));
  font-weight:700;
}

.interior-hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 60px;
  border-bottom:1px solid var(--border-default,var(--line));
  background:linear-gradient(180deg,var(--surface-default,var(--white)),var(--surface-soft,var(--green-50)));
}

/*
 * Interior heroes deliberately keep photography subordinate to the message.
 * Default composition is copy left / media right at roughly 65 / 35.
 * Selected semantic hero assets reverse the visual composition to create a
 * restrained alternating editorial rhythm across adjacent interior routes.
 */
.interior-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr);
  gap:clamp(28px,4vw,52px);
  align-items:center;
}

.interior-hero-copy{
  max-width:var(--content-measure-wide,840px);
}

.interior-hero .type-eyebrow,
.interior-hero .eyebrow-interior{
  margin-bottom:14px;
}

.interior-hero h1{
  max-width:920px;
  margin:0;
  color:var(--text-heading,var(--green-950));
  font-family:var(--font-display,var(--display));
  font-size:clamp(2.5rem,4vw,4rem);
  line-height:1.04;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.interior-hero-lead{
  max-width:var(--content-measure,720px);
  margin:22px 0 0;
  color:var(--text-secondary,var(--muted));
  font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.65;
}

.interior-hero-meta{
  margin:20px 0 0;
  color:var(--text-secondary,var(--muted));
  font-size:.82rem;
  font-weight:600;
  line-height:1.5;
}

.interior-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.interior-hero-media{
  position:relative;
  width:100%;
  max-width:380px;
  height:clamp(210px,20vw,280px);
  min-height:0;
  margin:0;
  justify-self:end;
  overflow:hidden;
  background:var(--surface-soft,var(--green-50));
  border-left:3px solid var(--green-700);
  box-shadow:0 16px 38px rgba(8,61,44,.10);
}

.interior-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 66%,rgba(8,61,44,.10));
}

.interior-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:var(--hero-image-position,center center);
}

/*
 * Media-left routes. The image remains second in DOM order, so reading and
 * focus order stay text-first; only the visual grid position changes.
 */
.interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]),
.interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]){
  grid-template-columns:minmax(240px,.85fr) minmax(0,1.55fr);
}

.interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]) > .interior-hero-copy,
.interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]) > .interior-hero-copy{
  grid-column:2;
  grid-row:1;
}

.interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]) > .interior-hero-media,
.interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]) > .interior-hero-media{
  grid-column:1;
  grid-row:1;
  justify-self:start;
}

.interior-hero--functional{
  padding-block:50px;
}

.interior-hero--functional .interior-hero-media{
  height:clamp(200px,18vw,250px);
}

.interior-hero--functional .interior-hero-media img{
  min-height:0;
}

@media (max-width:980px){
  .interior-hero-layout{
    grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr);
    gap:28px;
  }

  .interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]){
    grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr);
  }

  .interior-hero-media{
    max-width:340px;
    height:clamp(205px,22vw,245px);
  }
}

@media (max-width:720px){
  .breadcrumb{
    min-height:48px;
    gap:6px;
    font-size:.74rem;
  }

  .interior-hero{
    padding:48px 0 46px;
  }

  .interior-hero-layout,
  .interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]),
  .interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]){
    grid-template-columns:1fr;
    gap:24px;
  }

  .interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]) > .interior-hero-copy,
  .interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]) > .interior-hero-copy{
    grid-column:1;
    grid-row:1;
  }

  .interior-hero-layout:has(.interior-hero-media img[src$="/attend.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/stakeholder.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/youth.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/quiz.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/speakers.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/senior-citizens.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/about.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/live.jpeg"]) > .interior-hero-media,
  .interior-hero-layout:has(.interior-hero-media img[src$="/press-room.jpeg"]) > .interior-hero-media{
    grid-column:1;
    grid-row:2;
  }

  .interior-hero--functional{
    padding-block:42px;
  }

  .interior-hero-lead{
    margin-top:18px;
  }

  .interior-hero-actions{
    margin-top:24px;
  }

  .interior-hero-media,
  .interior-hero--functional .interior-hero-media{
    width:100%;
    max-width:520px;
    height:clamp(190px,52vw,250px);
    min-height:0;
    justify-self:start;
  }

  .interior-hero-media img,
  .interior-hero--functional .interior-hero-media img{
    min-height:0;
  }
}

@media (max-width:430px){
  .breadcrumb{
    font-size:.7rem;
  }

  .interior-hero{
    padding-block:40px;
  }

  .interior-hero-media,
  .interior-hero--functional .interior-hero-media{
    height:clamp(180px,55vw,220px);
  }
}