/* Resources: honest coming-soon page on the shared editorial components (5 October 2026).
   Same type scale, gutters and panel language as the audience guides. */
.nf-resources{--res-space:clamp(64px,7.5vw,112px);--res-inset:clamp(28px,4vw,64px);width:100%;max-width:none;padding:28px 0 56px;color:var(--ink)}
.nf-resources .nf-breadcrumb{margin-bottom:0}
.nf-resources .nf-res-section{margin:0 0 var(--res-space)}
.nf-resources .nf-res-section:last-child{margin-bottom:0}
.nf-resources :is(h2,h3,p,ol){font-family:var(--body)}
.nf-resources h2{font-size:clamp(34px,3.4vw,52px);line-height:1.1;letter-spacing:-.035em;font-weight:750;text-wrap:balance}
.nf-resources h3{font-size:clamp(22px,1.9vw,29px);line-height:1.2;letter-spacing:-.025em;font-weight:700}
.nf-resources p{font-size:clamp(18px,1.25vw,21px);line-height:1.6;margin:0 0 24px;max-width:62ch}
.nf-resources .nf-content-hero h1{max-width:11ch}
.nf-resources .nf-res-hero-lead{max-width:24ch;margin:28px 0 32px;font-size:clamp(22px,2vw,29px);line-height:1.45}
.nf-main .nf-resources .nf-content-hero__media img{object-position:58% center}
.nf-resources section[id]{scroll-margin-top:120px}
.nf-resources a:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.nf-resources :is(.nf-content-hero,.nf-res-week) a:focus-visible{outline-color:#fff}

/* Status: one honest "Coming soon" marker where a resource is promised. */
.nf-resources .nf-res-status{display:inline-flex;align-items:center;gap:8px;max-width:none;margin:0 0 20px;padding:7px 13px;border-radius:100px;font:700 13px/1.2 var(--body);letter-spacing:.01em;color:var(--red);background:color-mix(in srgb,var(--red) 8%,#fff)}
.nf-resources .nf-res-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.nf-resources .nf-res-status--light{color:#fff;background:rgb(255 255 255 / .14);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)}

/* Open editorial introduction. */
.nf-res-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,112px);align-items:start}
.nf-res-intro h2{max-width:15ch;margin:0}
.nf-resources .nf-res-lead{font-size:clamp(22px,1.9vw,30px);line-height:1.48;letter-spacing:-.02em;max-width:34ch}
.nf-res-prose{min-width:0;padding-top:4px}
.nf-res-prose p:last-child{margin:0}

/* Safety Week packs: campaign-red panel with the photograph bleeding in from the right. */
.nf-res-week{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;border-radius:var(--radius);background:linear-gradient(125deg,var(--red),var(--red-dark) 55%,#692433);color:#fff}
.nf-res-week-copy{position:relative;z-index:1;min-width:0;padding:var(--res-inset)}
.nf-res-week h2{max-width:16ch;margin:0 0 16px;color:#fff}
.nf-resources .nf-res-week-lead{margin:0 0 28px;color:rgb(255 255 255 / .9)}
.nf-resources .nf-res-days{margin:0 0 36px;padding:0;list-style:none;max-width:640px}
.nf-res-days li{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:20px;row-gap:2px;margin:0;padding:15px 0;border-top:1px solid rgb(255 255 255 / .22)}
.nf-res-days .nf-res-day{grid-row:1 / span 2;padding-top:2px;font-size:15px;font-weight:600;line-height:1.5;color:rgb(255 255 255 / .78)}
.nf-res-days strong{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.nf-res-days li>span:last-child{font-size:16px;line-height:1.5;color:rgb(255 255 255 / .85)}
.nf-res-week .nf-btn .wp-block-button__link{background:#fff;color:var(--ink)}
.nf-res-week .nf-btn .wp-block-button__link:hover{background:var(--soft)}
.nf-res-week-photo{position:relative;margin:0;min-width:0;min-height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 14%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 14%,#000 42%)}
.nf-res-week-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% center}
/* The photo fades to transparent (mask) instead of painting one fade colour, so it meets the
   diagonal panel gradient without a seam at any height. Only the caption scrim is painted. */
.nf-res-week-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(36,39,43,.4),transparent 28%)}
.nf-resources .nf-res-week-photo figcaption{position:absolute;z-index:1;right:20px;bottom:16px;margin:0;padding:5px 8px;border-radius:4px;background:#172330e8;color:#fff;font:400 12px/1.5 var(--body)}

/* Also in preparation: one warm-grey surface, two columns, no card grid. */
.nf-res-more>h2{max-width:20ch;margin:0 0 32px}
.nf-res-more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding:var(--res-inset);border-radius:var(--radius);background:var(--soft,#f6f5f3)}
.nf-res-more-list>.nf-res-item{margin:0;min-width:0}
.nf-res-item h3{margin:0 0 14px;color:var(--red)}
.nf-resources .nf-res-item p{font-size:18px;margin:0;max-width:48ch}
.nf-resources .nf-res-item .nf-res-note{margin-top:16px;font-size:16px;font-weight:700;color:var(--ink)}

/* Closing: quiet outlined panel with the existing resources enquiry route. */
.nf-res-closing{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,3.5vw,48px) var(--res-inset);border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.nf-res-closing-copy{min-width:0}
.nf-res-closing h2{font-size:clamp(30px,2.6vw,40px);margin:0 0 10px}
.nf-resources .nf-res-closing p{margin:0}
.nf-res-closing .wp-block-buttons{flex:none}

@media(max-width:1000px){
  .nf-res-intro{grid-template-columns:1fr;gap:24px}
  .nf-res-intro h2{max-width:20ch}
  .nf-res-week{grid-template-columns:1fr}
  .nf-res-week-photo{grid-row:1;height:300px;min-height:0}
  .nf-res-week-photo{-webkit-mask-image:linear-gradient(180deg,#000 55%,rgb(0 0 0 / .35) 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgb(0 0 0 / .35) 82%,transparent 100%)}
  .nf-res-week-photo::after{background:none}
  .nf-resources .nf-res-week-photo figcaption{top:16px;bottom:auto}
  .nf-res-closing{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(max-width:700px){
  .nf-resources{--res-space:56px;--res-inset:28px;padding-top:20px;padding-bottom:24px}
  .nf-resources h2{font-size:34px}
  .nf-resources p{font-size:18px}
  .nf-resources .nf-res-lead{font-size:22px}
  .nf-resources .nf-res-hero-lead{font-size:22px;max-width:22ch;margin-top:24px}
  .nf-res-week-photo{height:240px}
  .nf-res-days li{grid-template-columns:1fr;row-gap:2px}
  .nf-res-days .nf-res-day{grid-row:auto;padding-top:0;font-size:14px}
  .nf-res-more-list{grid-template-columns:1fr;gap:28px}
  .nf-res-closing h2{font-size:30px}
  .nf-resources .wp-block-button{max-width:100%}
  .nf-resources .nf-btn .wp-block-button__link{max-width:100%;padding-inline:20px;gap:16px;font-size:13px}
}