/* =========================================================
   NPW PARTICIPATION BACKGROUND HERO
   Selected public participation pages use their routed hero photograph as a
   full-bleed background while preserving the existing interior hero markup.
   This is intentionally isolated so the standard interior hero can be restored
   simply by removing the route projection/import.
   ========================================================= */

.participation-bg-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:stretch;
  min-height:clamp(410px,34vw,470px);
  padding:0;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.16);
  background:#0b3d2c;
}

.participation-bg-hero > .container{
  display:flex;
  align-items:stretch;
}

.participation-bg-hero .interior-hero-layout{
  display:flex;
  width:100%;
  min-height:inherit;
  align-items:center;
}

.participation-bg-hero .interior-hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  max-width:none;
  height:100%;
  min-height:100%;
  margin:0;
  overflow:hidden;
  border:0;
  box-shadow:none;
  background:#0b3d2c;
}

.participation-bg-hero .interior-hero-media::after{
  display:none;
}

.participation-bg-hero .interior-hero-media img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:var(--hero-image-position,center center);
  filter:saturate(.96) contrast(1.02);
}

/* A restrained full-frame wash keeps highlights from defeating the text. */
.participation-bg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,34,24,.18),rgba(4,34,24,.34));
}

/*
 * Directional scrims follow the original left/right editorial rhythm:
 * copy-left pages shade from left to right; copy-right pages reverse it.
 */
.participation-bg-hero--copy-left::after,
.participation-bg-hero--copy-right::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.participation-bg-hero--copy-left::after{
  background:linear-gradient(90deg,
    rgba(5,38,27,.94) 0%,
    rgba(5,38,27,.88) 30%,
    rgba(5,38,27,.64) 49%,
    rgba(5,38,27,.24) 68%,
    rgba(5,38,27,.04) 86%);
}

.participation-bg-hero--copy-right::after{
  background:linear-gradient(270deg,
    rgba(5,38,27,.94) 0%,
    rgba(5,38,27,.88) 30%,
    rgba(5,38,27,.64) 49%,
    rgba(5,38,27,.24) 68%,
    rgba(5,38,27,.04) 86%);
}

.participation-bg-hero .interior-hero-copy{
  position:relative;
  z-index:2;
  width:min(690px,62%);
  max-width:690px;
  padding:52px 0 54px;
  text-align:left;
}

.participation-bg-hero--copy-left .interior-hero-copy{
  margin-right:auto;
}

.participation-bg-hero--copy-right .interior-hero-copy{
  margin-left:auto;
}

.participation-bg-hero .type-eyebrow,
.participation-bg-hero .eyebrow-interior{
  color:#e7ca71;
  text-shadow:0 1px 12px rgba(0,0,0,.18);
}

.participation-bg-hero h1,
.participation-bg-hero h1 span{
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.20);
}

.participation-bg-hero h1{
  max-width:780px;
  font-size:clamp(2.55rem,3.65vw,3.9rem);
}

.participation-bg-hero .interior-hero-lead,
.participation-bg-hero .interior-hero-meta{
  color:rgba(255,255,255,.90);
  text-shadow:0 1px 14px rgba(0,0,0,.18);
}

.participation-bg-hero .interior-hero-lead{
  max-width:650px;
  margin-top:18px;
  font-size:clamp(.98rem,1.08vw,1.08rem);
  line-height:1.58;
}

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

.participation-bg-hero .btn-primary{
  border-color:#15803d;
  background:#15803d;
  color:#ffffff;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

.participation-bg-hero .btn-primary:hover{
  background:#166534;
  border-color:#166534;
  color:#ffffff;
}

.participation-bg-hero .btn-outline{
  border-color:rgba(255,255,255,.78);
  background:rgba(5,38,27,.18);
  color:#fff;
}

.participation-bg-hero .btn-outline:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}

@media (max-width:980px){
  .participation-bg-hero{
    min-height:420px;
  }

  .participation-bg-hero .interior-hero-copy{
    width:min(720px,72%);
    max-width:720px;
    padding-block:46px 48px;
  }

  .participation-bg-hero--copy-left::after{
    background:linear-gradient(90deg,rgba(5,38,27,.95) 0%,rgba(5,38,27,.86) 38%,rgba(5,38,27,.58) 62%,rgba(5,38,27,.12) 88%);
  }

  .participation-bg-hero--copy-right::after{
    background:linear-gradient(270deg,rgba(5,38,27,.95) 0%,rgba(5,38,27,.86) 38%,rgba(5,38,27,.58) 62%,rgba(5,38,27,.12) 88%);
  }
}

@media (max-width:720px){
  .participation-bg-hero,
  .participation-bg-hero.interior-hero--functional{
    min-height:430px;
    padding:0;
  }

  .participation-bg-hero .interior-hero-layout{
    display:flex;
    min-height:430px;
    align-items:flex-end;
  }

  .participation-bg-hero .interior-hero-copy,
  .participation-bg-hero--copy-left .interior-hero-copy,
  .participation-bg-hero--copy-right .interior-hero-copy{
    width:100%;
    max-width:100%;
    margin:0;
    padding:96px 0 38px;
  }

  .participation-bg-hero--copy-left::after,
  .participation-bg-hero--copy-right::after{
    background:
      linear-gradient(0deg,rgba(5,38,27,.96) 0%,rgba(5,38,27,.88) 38%,rgba(5,38,27,.56) 67%,rgba(5,38,27,.14) 100%),
      linear-gradient(90deg,rgba(5,38,27,.16),rgba(5,38,27,.05));
  }

  .participation-bg-hero h1{
    font-size:clamp(2.25rem,9vw,3.1rem);
    line-height:1.03;
  }

  .participation-bg-hero .interior-hero-lead{
    max-width:620px;
    margin-top:16px;
    font-size:.98rem;
    line-height:1.52;
  }

  .participation-bg-hero .interior-hero-media,
  .participation-bg-hero.interior-hero--functional .interior-hero-media{
    width:100%;
    max-width:none;
    height:100%;
    min-height:100%;
  }
}

@media (max-width:430px){
  .participation-bg-hero,
  .participation-bg-hero.interior-hero--functional,
  .participation-bg-hero .interior-hero-layout{
    min-height:420px;
  }

  .participation-bg-hero .interior-hero-copy{
    padding:88px 0 32px;
  }
}


/* =========================================================
   NPW VISUAL BUILD — PARTICIPATION HERO COLOUR PERSONALITIES
   ========================================================= */
.take-part-visual-build .participation-bg-hero,
.online-visual-build .participation-bg-hero,
.stakeholder-visual-build .participation-bg-hero{background:#071F38}
.attend-visual-build .participation-bg-hero,
.youth-visual-build .participation-bg-hero{background:#0E4F36}
.sme-visual-build .participation-bg-hero{background:#4B432A}

.take-part-visual-build .participation-bg-hero--copy-left::after,
.online-visual-build .participation-bg-hero--copy-left::after,
.stakeholder-visual-build .participation-bg-hero--copy-left::after{
  background:linear-gradient(90deg,rgba(7,31,56,.97) 0%,rgba(11,60,111,.91) 31%,rgba(11,60,111,.70) 49%,rgba(11,60,111,.28) 68%,rgba(7,31,56,.04) 88%);
}
.take-part-visual-build .participation-bg-hero--copy-right::after,
.online-visual-build .participation-bg-hero--copy-right::after,
.stakeholder-visual-build .participation-bg-hero--copy-right::after{
  background:linear-gradient(270deg,rgba(7,31,56,.97) 0%,rgba(11,60,111,.91) 31%,rgba(11,60,111,.70) 49%,rgba(11,60,111,.28) 68%,rgba(7,31,56,.04) 88%);
}
.youth-visual-build .participation-bg-hero--copy-right::after,
.attend-visual-build .participation-bg-hero--copy-right::after{
  background:linear-gradient(270deg,rgba(5,50,36,.96) 0%,rgba(14,79,54,.90) 32%,rgba(46,139,87,.65) 50%,rgba(46,139,87,.24) 68%,rgba(5,50,36,.04) 88%);
}
.youth-visual-build .participation-bg-hero--copy-left::after,
.attend-visual-build .participation-bg-hero--copy-left::after{
  background:linear-gradient(90deg,rgba(5,50,36,.96) 0%,rgba(14,79,54,.90) 32%,rgba(46,139,87,.65) 50%,rgba(46,139,87,.24) 68%,rgba(5,50,36,.04) 88%);
}
.sme-visual-build .participation-bg-hero--copy-left::after{
  background:linear-gradient(90deg,rgba(43,40,24,.95) 0%,rgba(64,59,32,.88) 31%,rgba(91,76,39,.61) 50%,rgba(212,175,55,.16) 69%,rgba(43,40,24,.03) 88%);
}
.sme-visual-build .participation-bg-hero--copy-right::after{
  background:linear-gradient(270deg,rgba(43,40,24,.95) 0%,rgba(64,59,32,.88) 31%,rgba(91,76,39,.61) 50%,rgba(212,175,55,.16) 69%,rgba(43,40,24,.03) 88%);
}
.participation-visual-build .participation-bg-hero{min-height:clamp(440px,37vw,520px)}
.participation-visual-build .participation-bg-hero .interior-hero-copy{padding-top:58px;padding-bottom:60px}
.participation-visual-build .participation-bg-hero h1{font-size:clamp(2.8rem,4.2vw,4.5rem)}
.participation-visual-build .participation-bg-hero .type-eyebrow{color:#F1D77C}
@media(max-width:720px){
  .participation-visual-build .participation-bg-hero,
  .participation-visual-build .participation-bg-hero.interior-hero--functional,
  .participation-visual-build .participation-bg-hero .interior-hero-layout{min-height:440px}
}

/* Leave the youth photograph's right side clear of desktop hero copy. */
@media (min-width:981px){
  .youth-visual-build .participation-bg-hero--copy-left .interior-hero-copy{
    width:min(560px,48%);
    max-width:560px;
    margin-left:0;
    margin-right:auto;
  }
}