/* =========================================================
   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:72px 0 68px;
  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-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--functional{
  padding-block:54px;
}

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

  .interior-hero{
    padding:52px 0 50px;
  }

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

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

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

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

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