
/* NSSF homepage Hills Run Hero — V9.
   The image is never translated, covered, or moved under the navigation.
   This CSS is preloaded in <head> on all frontend pages by NssfHillsRunAssetLoader,
   so HTMX swaps and history restores cannot leave the banner unstyled.
*/
.nssf-home-run {
  --nssf-run-blue:#245de8;
  --nssf-run-navy:#063467;
  --nssf-run-yellow:#ffeb00;
  --nssf-run-green:#8cc63f;
  width:100vw;
  max-width:none;
  position:relative;
  left:50%;
  margin-left:-50vw;
  color:#092f55;
  background:#fff;
  isolation:isolate;
  font-family:inherit;
  margin-top:0; /* Do not drag the image underneath site navigation. */
  padding-top:0;
  border-top:0;
  transform:none;
}
.nssf-home-run *, .nssf-home-run *::before, .nssf-home-run *::after {box-sizing:border-box;}
.nssf-home-run__banner {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  background:var(--nssf-run-blue);
  isolation:isolate;
  padding-top:0; /* The image begins in normal flow, below the navigation. */
  overflow:visible;
}
.nssf-home-run__media {position:relative;grid-column:1;grid-row:1;padding:0;margin:0;line-height:0;z-index:0;width:100%;min-width:0;max-width:100%;overflow:visible;}
.nssf-home-run__media img {display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:center top!important;position:static!important;transform:none!important;clip-path:none!important;overflow:visible!important;}
.nssf-home-run__shade {
  grid-column:1;grid-row:1;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,79,220,.97) 0%,rgba(31,79,220,.93) 21%,rgba(31,79,220,.72) 35%,rgba(31,79,220,.36) 52%,rgba(31,79,220,0) 78%);
}
.nssf-home-run__inner {
  grid-column:1;grid-row:1;z-index:2;align-self:stretch;
  width:min(1280px,calc(100% - 64px));margin:0 auto;
  min-height:460px;
  display:flex;align-items:center;
}
.nssf-home-run__copy {width:min(610px,49%);padding:78px 0 52px;}
.nssf-home-run__eyebrow {display:block;margin-bottom:18px;color:#fff;font-weight:800;font-size:12px;letter-spacing:.21em;text-transform:uppercase;}
.nssf-home-run__strap {
  display:table;max-width:100%;margin:0 0 23px;padding:10px 16px;
  background:var(--nssf-run-yellow);color:#143aa4;
  border-radius:10px 19px 10px 19px;
  font:400 clamp(16px,1.35vw,23px)/1.05 Anton,Impact,'Arial Narrow',sans-serif;
  text-transform:uppercase;transform:rotate(-2deg);box-shadow:5px 6px 0 #11399d;
}
.nssf-home-run__title {display:flex;flex-direction:column;gap:7px;margin:0 0 24px;color:var(--nssf-run-yellow);font-family:Anton,Impact,'Arial Narrow',sans-serif;font-size:clamp(47px,4.65vw,86px);font-weight:400;line-height:1.02;letter-spacing:0;text-transform:uppercase;text-shadow:5px 6px 0 #123997;}
.nssf-home-run__title span {display:block;overflow-wrap:normal;word-break:normal;}
.nssf-home-run__description {max-width:500px;margin:0 0 24px;color:#fff;font-size:clamp(14px,1.1vw,17px);line-height:1.5;}
.nssf-home-run__actions {display:flex;flex-wrap:wrap;gap:16px;}
.nssf-home-run__button {
  display:inline-flex;justify-content:space-between;align-items:center;gap:25px;
  min-width:205px;min-height:60px;padding:0 22px;border-radius:16px;
  text-decoration:none!important;
  text-transform:uppercase;font:400 18px/1.1 Anton,Impact,'Arial Narrow',sans-serif;
  box-shadow:5px 7px 0 #123997;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.nssf-home-run__button span:last-child {font:normal 24px/1 Arial,sans-serif;transition:transform .2s ease;}
.nssf-home-run__button:hover,.nssf-home-run__button:focus-visible {transform:translateY(-4px);box-shadow:5px 11px 0 #123997;}
.nssf-home-run__button:hover span:last-child {transform:translateX(5px);}
.nssf-home-run__button--main {background:var(--nssf-run-yellow);color:#143aa4!important;border:3px solid var(--nssf-run-yellow);}
.nssf-home-run__button--outline {background:rgba(8,54,156,.35);color:var(--nssf-run-yellow)!important;border:3px solid var(--nssf-run-yellow);}
.nssf-home-run__details {
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(1120px,calc(100% - 44px));margin:-34px auto 0;
  background:#fff;overflow:hidden;border-radius:24px;
  box-shadow:0 18px 45px rgba(0,41,91,.13);border:1px solid #e3edf7;
}
.nssf-home-run__detail {display:flex;align-items:center;gap:16px;min-height:105px;padding:19px 24px;border-right:1px solid #deebf6;}
.nssf-home-run__detail:last-child {border-right:0;}
.nssf-home-run__icon {width:53px;height:53px;flex:0 0 53px;border-radius:15px;background:#f1f8ff;color:#0066b8;display:grid;place-items:center;border:1px solid #d7e8f7;}
.nssf-home-run__icon svg {width:26px;height:26px;}
.nssf-home-run__detail-text {display:flex;flex-direction:column;gap:5px;min-width:0;}
.nssf-home-run__detail small {color:#0061af;letter-spacing:.11em;text-transform:uppercase;font-size:10px;font-weight:800;line-height:1.15;}
.nssf-home-run__detail strong {font-size:17px;font-weight:800;color:#073566;line-height:1.2;}
.nssf-home-run__detail em {font-size:12px;font-style:normal;color:#627a8e;line-height:1.2;}
@media(max-width:1100px) {
  .nssf-home-run {margin-top:0;}
  .nssf-home-run__copy {width:52%;padding:64px 0 44px;}
  .nssf-home-run__title {font-size:clamp(42px,4.65vw,65px);}
  .nssf-home-run__button {min-width:175px;min-height:52px;font-size:16px;}
  .nssf-home-run__inner {min-height:370px;}
  .nssf-home-run__banner {padding-top:0;}
  .nssf-home-run__media img {transform:none;}
  .nssf-home-run__detail {padding:16px;gap:12px;}
  .nssf-home-run__detail strong {font-size:15px;}
}
/* Mobile: campaign lettering overlays the lower third of the photograph.
   Everything remains live HTML, driven by the existing ProcessWire fields. */
@media (max-width:767px) {
  .nssf-home-run { margin-top:0; }
  .nssf-home-run__banner {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    overflow:hidden;
    background:var(--nssf-run-blue);
    padding-top:0;
  }
  .nssf-home-run__media {
    grid-column:1;grid-row:1;
    width:100%;min-width:0;
    padding:0;margin:0;
    line-height:0;
  }
  .nssf-home-run__media img {
    display:block;width:100%;max-width:100%;height:auto;
    object-fit:contain;object-position:center top;
    transform:none;
  }
  .nssf-home-run.has-mobile-art .nssf-home-run__shade {
    display:block;grid-column:1;grid-row:1;z-index:1;
    background:linear-gradient(to bottom,
      rgba(27,72,207,0) 34%,
      rgba(23,66,195,.16) 46%,
      rgba(22,65,192,.62) 65%,
      rgba(22,63,183,.96) 85%,
      var(--nssf-run-blue) 100%);
  }
  /* No portrait upload: show the text below the image, not over faces. */
  .nssf-home-run:not(.has-mobile-art) .nssf-home-run__shade {display:none;}
  .nssf-home-run__inner,
  .nssf-home-run.has-mobile-art .nssf-home-run__inner {
    position:relative;z-index:2;
    grid-column:1;grid-row:2;
    display:block;align-self:auto;
    width:100%;min-width:0;min-height:0;
    margin:0 auto;background:transparent;
  }
  .nssf-home-run.has-mobile-art .nssf-home-run__inner {
    margin-top:calc(-1 * clamp(108px,37vw,205px));
  }
  .nssf-home-run__copy,
  .nssf-home-run.has-mobile-art .nssf-home-run__copy {
    width:100%;max-width:620px;
    margin:0 auto;
    padding:0 clamp(16px,5vw,28px) 28px;
    text-align:center;
  }
  .nssf-home-run:not(.has-mobile-art) .nssf-home-run__copy {padding-top:22px;}
  .nssf-home-run__eyebrow,
  .nssf-home-run.has-mobile-art .nssf-home-run__eyebrow {
    display:block;margin:0 0 10px;
    color:#fff;font-size:clamp(10px,2.7vw,12px);
    line-height:1.35;letter-spacing:.16em;
  }
  .nssf-home-run__strap,
  .nssf-home-run.has-mobile-art .nssf-home-run__strap {
    display:table;max-width:100%;
    margin:0 auto 14px;padding:8px 12px;
    border-radius:12px 19px 11px 18px;
    color:#123a9a;background:var(--nssf-run-yellow);
    font-size:clamp(13px,3.65vw,20px);line-height:1.13;
    white-space:normal;text-align:center;
    box-shadow:4px 5px 0 #123997;
    transform:rotate(-1.3deg);
  }
  .nssf-home-run__title,
  .nssf-home-run.has-mobile-art .nssf-home-run__title {
    display:flex;flex-direction:column;align-items:center;
    gap:1px;width:100%;max-width:100%;
    margin:0 0 18px;
    color:var(--nssf-run-yellow);
    font-size:clamp(29px,9.1vw,53px);
    line-height:1.055;letter-spacing:0;
    text-align:center;
    text-shadow:3px 4px 0 #123997;
  }
  .nssf-home-run__title span {
    display:block;max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;word-break:normal;
    text-wrap:balance;
  }
  .nssf-home-run__description,
  .nssf-home-run.has-mobile-art .nssf-home-run__description {
    display:block;max-width:410px;
    margin:0 auto 16px;
    font-size:clamp(12px,3.35vw,15px);
    line-height:1.4;color:#fff;
  }
  .nssf-home-run__actions {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(9px,2.5vw,14px);
    width:100%;max-width:540px;
    margin:0 auto;
  }
  .nssf-home-run__button {
    display:inline-flex;justify-content:space-between;align-items:center;
    width:100%;min-width:0;min-height:55px;
    gap:5px;padding:0 clamp(9px,2.7vw,17px);
    border-radius:14px;
    font-size:clamp(13px,3.9vw,18px);
    line-height:1.12;
    box-shadow:4px 5px 0 #123997;
    white-space:nowrap;
  }
  .nssf-home-run__button span:last-child {font-size:clamp(18px,5vw,24px);}
  .nssf-home-run__details {
    grid-template-columns:1fr;
    width:calc(100% - 28px);
    margin:12px auto 0;
    border-radius:18px;
  }
  .nssf-home-run__detail {
    min-height:77px;padding:13px 17px;
    border-right:0;border-bottom:1px solid #deebf6;
  }
  .nssf-home-run__detail:last-child {border-bottom:0;}
}
@media (max-width:359px) {
  .nssf-home-run__title,
  .nssf-home-run.has-mobile-art .nssf-home-run__title {
    font-size:clamp(27px,8.9vw,32px);
  }
  .nssf-home-run__button {min-height:51px;}
}
@media(prefers-reduced-motion:reduce) {
  .nssf-home-run__button,.nssf-home-run__button span:last-child {transition:none!important;}
}

/* No supplied artwork: keep the campaign text visible rather than a blank hero. */
.nssf-home-run:not(.has-desktop-art) .nssf-home-run__media {display:none;}
.nssf-home-run:not(.has-desktop-art) .nssf-home-run__shade {display:none;}
.nssf-home-run:not(.has-desktop-art) .nssf-home-run__copy {width:min(720px,100%);}
@media(max-width:767px) {
  .nssf-home-run:not(.has-desktop-art) .nssf-home-run__inner {grid-row:1;min-height:300px;}
}
