/* hero.css
 * ------------------------------------------------------------
 * WCYD Hero + PSA hero strip + News Archive “hero header”
 *
 * GOAL:
 *  - Full-bleed hero background (100vw)
 *  - Headline aligns with the SAME responsive content column as body text
 *    as the viewport shrinks (no snapping to 16px).
 *
 * STRATEGY:
 *  - Center an inner “content container” inside the full-bleed hero:
 *      left: 50%; transform: translateX(-50%);
 *      width: min(content-max, 100%);
 *      padding-inline: responsive pad token
 *
 * NOTE:
 *  - This file CONSUMES wcyd-tokens.css variables (var(--wcyd-*)).
 *  - Keep wcyd-tokens.css loaded BEFORE this file.
 * ------------------------------------------------------------
 */

@charset "utf-8";

/* ========================= */
/* HERO LOCAL ALIASES        */
/* (avoid redefining tokens) */
/* ========================= */

:root {
  /* Map old hero.css “alignment” vars to canonical tokens */
  --wcyd-content-max: var(--wcyd-container-width);
  --wcyd-content-pad: var(--wcyd-container-pad-left);

  /*
   * Optional: if you want responsive gutters instead of fixed 90px,
   * uncomment the clamp line below and delete the fixed line above.
   * (Your previous clamp(90px, 4vw, 88px) was invalid: min > max.)
   */
  /* --wcyd-content-pad: clamp(24px, 4vw, var(--wcyd-container-pad-left)); */
}

/* ========================= */
/* HERO PAGE FULL-BLEED HERO */
/* ========================= */

/*
 * First one-column Layout Builder section on Hero Page AND PSA:
 * full-bleed strip, fixed height on desktop.
 */
.node--type-hero-page .layout.layout--onecol:first-of-type,
.node--type-psa .layout.layout--onecol:first-of-type {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: var(--wcyd-hero-height);
  overflow: hidden;
}

/* Inner region just fills the hero height; no extra padding */
.node--type-hero-page .layout.layout--onecol:first-of-type .layout__region--content,
.node--type-psa .layout.layout--onecol:first-of-type .layout__region--content {
  position: relative;
  height: 100%;
  padding: 0;
}

/* ======================================= */
/* HERO IMAGE – FULL BLEED BEHIND CONTENT  */
/* ======================================= */

.node--type-hero-page .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item,
.node--type-psa .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}

.node--type-hero-page .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item img,
.node--type-psa .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide the field labels for hero image + hero headline */
.node--type-hero-page .field--name-field-hero-image .field__label,
.node--type-hero-page .field--name-field-hero-headline .field__label,
.node--type-psa .field--name-field-hero-image .field__label,
.node--type-psa .field--name-field-hero-headline .field__label {
  display: none;
}

/* ------------------------------------------------------------
   HERO IMAGE ART DIRECTION
   Keep subject from being cropped off on the right by shifting
   the crop window left as the viewport narrows.
------------------------------------------------------------- */

/* Default: centered crop */
.node--type-hero-page .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item img,
.node--type-psa .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item img {
  object-position: 50% 50%; /* center */
}

/* Slightly smaller desktop: bias crop left */
@media (max-width: 1400px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img {
    object-position: 100% 50%;
  }
}

/* Smaller desktop/tablet: bias more left */
@media (max-width: 1200px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img {
    object-position: 25% 50%;
  }
}

/* Phone: strongest left bias (tune if needed) */
@media (max-width: 768px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img {
    object-position: 20% 50%;
  }
}

/* ======================================= */
/* HERO HEADLINE – TRACK BODY COLUMN       */
/* ======================================= */

.node--type-hero-page .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item,
.node--type-psa .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item {
  position: absolute;
  top: 0;
  bottom: 0;

  /*
   * Center a “content container” within the full-bleed hero
   * so its left edge matches the same responsive pull-in as body content.
   */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--wcyd-content-max), 100%);
  padding-inline: var(--wcyd-content-pad);

  /* Keep headline inside the content container */
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* Wrap control */
  max-width: none; /* width is controlled by the container */
  margin: 0;
  color: var(--wcyd-white);
  font-family: var(--wcyd-font-serif);
  font-size: 44px;
  font-weight: var(--wcyd-font-weight-medium);
  line-height: 1.3;
  text-align: left;
  text-shadow: var(--wcyd-text-shadow-dark);
  z-index: 2;
  hyphens: none;
}

/* ======================================= */
/* MOBILE / NARROW VIEWPORT TWEAKS         */
/* ======================================= */

@media (max-width: 1315px) {
  /* On narrow widths, let the hero grow vertically if needed */
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    height: auto;
    min-height: var(--wcyd-hero-height);
  }

  /* Image still full-width; height follows container */
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item {
    height: 100%;
  }
}

/* HARD OVERRIDE: keep hero image a fixed height on desktop */
@media (min-width: 769px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    height: var(--wcyd-hero-height) !important;
    min-height: var(--wcyd-hero-height) !important;
  }

  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image,
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item,
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img {
    height: var(--wcyd-hero-height) !important;
    min-height: var(--wcyd-hero-height) !important;
  }
}

/* Force ONLY the hero image on hero + PSA pages to a fixed height */
.node--type-hero-page .field--name-field-hero-image img,
.node--type-psa .field--name-field-hero-image img {
  height: var(--wcyd-hero-height) !important;
  min-height: var(--wcyd-hero-height) !important;
  max-height: var(--wcyd-hero-height) !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

.hero-headline-shadow {
  color: var(--wcyd-text) !important;
  text-shadow: var(--wcyd-text-shadow-light) !important;
  -webkit-font-smoothing: antialiased;
}

/* ======================================= */
/* NEWS ARCHIVE — HERO HEADER (ROBUST)     */
/* ======================================= */

.view.view-news-archive .view-header {
  position: relative;

  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  height: var(--wcyd-hero-height);
  overflow: hidden;
  margin-bottom: 36px;
}

/* Use a wrapper so we can layer reliably */
.view.view-news-archive .view-header .wcyd-view-hero {
  position: absolute;
  inset: 0;
}

/* Background image */
.view.view-news-archive .view-header .wcyd-view-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
}

/* Overlay */
.view.view-news-archive .view-header .wcyd-view-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wcyd-overlay-black-35);
  z-index: 2;
}

/* Text layer aligned with the same responsive content column */
.view.view-news-archive .view-header .wcyd-view-hero__content {
  position: relative;
  z-index: 3;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Same container pattern as hero headline */
  margin-left: 50%;
  transform: translateX(-50%);
  width: min(var(--wcyd-content-max), 100%);
  padding-inline: var(--wcyd-content-pad);

  color: var(--wcyd-white);
  text-shadow: var(--wcyd-text-shadow-dark);
}

.view.view-news-archive .view-header .wcyd-view-hero__title {
  margin: 0;
  font-family: var(--wcyd-font-serif);
  font-size: 44px;
  font-weight: var(--wcyd-font-weight-medium);
  line-height: 1.3;
}

.view.view-news-archive .view-header .wcyd-view-hero__dek {
  margin: 10px 0 0 0;
  max-width: 44rem;
  font-family: var(--wcyd-font-sans);
  font-size: 18px;
  font-weight: var(--wcyd-font-weight-regular);
  line-height: 1.5;
  display: none;
}

@media (max-width: 1315px) {
  .view.view-news-archive .view-header {
    height: auto;
    min-height: var(--wcyd-hero-height);
  }

  .view.view-news-archive .view-header .wcyd-view-hero__title {
    font-size: 32px;
  }

  .view.view-news-archive .view-header .wcyd-view-hero__dek {
    font-size: 16px;
    max-width: none;
  }
}

@media (min-width: 769px) {
  .view.view-news-archive .view-header,
  .view.view-news-archive .view-header .wcyd-view-hero > img {
    height: var(--wcyd-hero-height) !important;
    min-height: var(--wcyd-hero-height) !important;
  }
}

/* ======================================= */
/* NODE 445 OVERRIDES                      */
/* ======================================= */

@media (min-width: 769px) {
  .node--type-hero-page.node--id-445 .layout:first-of-type,
  .node--type-hero-page.node--nid-445 .layout:first-of-type,
  .node--type-hero-page[data-history-node-id="445"] .layout:first-of-type {
    height: var(--wcyd-hero-height-tall) !important;
    min-height: 500px !important;
  }

  .node--type-hero-page.node--id-445 .field--name-field-hero-image.field__item,
  .node--type-hero-page.node--nid-445 .field--name-field-hero-image.field__item,
  .node--type-hero-page[data-history-node-id="445"] .field--name-field-hero-image.field__item,
  .node--type-hero-page.node--id-445 .field--name-field-hero-image.field__item img,
  .node--type-hero-page.node--nid-445 .field--name-field-hero-image.field__item img,
  .node--type-hero-page[data-history-node-id="445"] .field--name-field-hero-image.field__item img {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover;
  }

  .node--type-hero-page.node--id-445 .field--name-field-hero-image img,
  .node--type-hero-page.node--nid-445 .field--name-field-hero-image img,
  .node--type-hero-page[data-history-node-id="445"] .field--name-field-hero-image img {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }
}

/* Node 445: shrink-wrap headline + add dark backing */
/* Node 445: aligned left edge + 1/3 width black box */
.node--type-hero-page.node--id-445 .field--name-field-hero-headline.field__item,
.node--type-hero-page[data-history-node-id="445"] .field--name-field-hero-headline.field__item {
  position: absolute !important;

  /* vertically center within hero */
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  height: auto !important;

  /* anchor to the SAME left edge as the body column */
  left: calc(50% - (min(var(--wcyd-content-max), 100%) / 2) + var(--wcyd-content-pad)) !important;
  right: auto !important;

  /* box sizing: ~1/3 of the content width */
  width: calc(min(var(--wcyd-content-max), 100%) * 0.5) !important;
  max-width: 50rem !important;

  /* your box styling */
  display: block !important;
  background: var(--wcyd-overlay-black-60) !important;
  padding: 16px 24px !important;

  /* text styles (keep what you need) */
  color: var(--wcyd-white) !important;
  text-shadow: var(--wcyd-text-shadow-dark) !important;
}

@media (max-width: 1200px) {
  .node--type-hero-page[data-history-node-id="445"] .field--name-field-hero-headline.field__item {
    width: calc(min(var(--wcyd-content-max), 100%) * 0.50) !important;
  }
}

@media (max-width: 768px) {
  .node--type-hero-page[data-history-node-id="445"]
    .field--name-field-hero-headline.field__item {

    /* Keep it absolutely positioned, but pin it safely */
    top: 16px !important;
    bottom: auto !important;

    /* Keep the left edge aligned with the body column */
    left: calc(
      50% - (min(var(--wcyd-content-max), 100%) / 2) + var(--wcyd-content-pad)
    ) !important;

    /* No vertical centering transform on mobile */
    transform: none !important;

    /* Make it wider on mobile so it wraps nicely */
    width: calc(min(var(--wcyd-content-max), 100%) * 0.92) !important;
    max-width: none !important;

    /* Keep the box visible above the image */
    z-index: 2 !important;
  }
}




/* Node 445: full-bleed blue band behind BODY block */
.node--type-hero-page.node--id-445 .block-field-blocknodehero-pagebody,
.node--type-hero-page[data-history-node-id="445"] .block-field-blocknodehero-pagebody {
  position: relative;

  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--wcyd-band-subscribe-bg);
}

/* Node 445: centered body content */
.node--type-hero-page.node--id-445 .block-field-blocknodehero-pagebody > .block__content,
.node--type-hero-page[data-history-node-id="445"] .block-field-blocknodehero-pagebody > .block__content {
  max-width: var(--wcyd-container-width);
  margin: 0 auto;
  padding: 36px var(--wcyd-content-pad);
}

/* Node 445: body typography */
article[data-history-node-id="445"] .block-field-blocknodehero-pagebody .field--name-body p {
  color: var(--wcyd-text);
  font-family: var(--wcyd-font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-regular);
  line-height: 30.6px;
  margin: 0 0 27px 0;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Node 445: remove Olivero layout bottom spacing */
article[data-history-node-id="445"] .layout {
  margin-block-end: 0;
}
@media (min-width: 43.75rem) {
  article[data-history-node-id="445"] .layout {
    margin-block-end: 0;
  }
}
@media (min-width: 62.5rem) {
  article[data-history-node-id="445"] .layout {
    margin-block-end: 0;
  }
}

/* Node 445: remove Olivero bottom padding on node__content */
article[data-history-node-id="445"] .node__content {
  padding-block-end: 0;
}
@media (min-width: 62.5rem) {
  article[data-history-node-id="445"] .node__content {
    padding-block-end: 0;
  }
}

/* Hide Hero Page "Headline Style" control field from frontend */
.node--type-hero-page .field--name-field-headline-style {
  display: none;
}

/* ======================================= */
/* NODE 446 — SOLID BLUE HERO (NO IMAGE)   */
/* ======================================= */

/* Node 446: solid blue hero background */
.node--type-hero-page.node--id-446 .layout.layout--onecol:first-of-type,
.node--type-hero-page.node--nid-446 .layout.layout--onecol:first-of-type,
.node--type-hero-page[data-history-node-id="446"] .layout.layout--onecol:first-of-type {
  background: rgb(19, 115, 186);
}

/* Node 446: hide hero image completely */
.node--type-hero-page.node--id-446 .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item,
.node--type-hero-page.node--nid-446 .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item,
.node--type-hero-page[data-history-node-id="446"] .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item {
  display: none !important;
}

/* Node 446: ensure headline sits above the blue band */
.node--type-hero-page.node--id-446
  .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item,
.node--type-hero-page[data-history-node-id="446"]
  .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item {
  z-index: 2;
}

/* Hide Hero Image Height control field from frontend */
.node--type-hero-page .field--name-field-hero-image-height,
.node--type-psa .field--name-field-hero-image-height {
  display: none;
}

/* ======================================= */
/* NODE 447 — SOLID BLUE HERO (NO IMAGE)   */
/* ======================================= */

/* Node 447: solid blue hero background */
.node--type-hero-page.node--id-447 .layout.layout--onecol:first-of-type,
.node--type-hero-page.node--nid-447 .layout.layout--onecol:first-of-type,
.node--type-hero-page[data-history-node-id="447"] .layout.layout--onecol:first-of-type {
  background: rgb(19, 115, 186);
}

/* Node 447: hide hero image completely */
.node--type-hero-page.node--id-447 .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item,
.node--type-hero-page.node--nid-447 .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item,
.node--type-hero-page[data-history-node-id="447"] .layout.layout--onecol:first-of-type
  .field--name-field-hero-image.field__item {
  display: none !important;
}

/* Node 447: ensure headline sits above the blue band */
.node--type-hero-page.node--id-447
  .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item,
.node--type-hero-page[data-history-node-id="447"]
  .layout.layout--onecol:first-of-type
  .field--name-field-hero-headline.field__item {
  z-index: 2;
}

/* Hide PSA "Show in PSA Gallery" control block on frontend */
.node--type-psa
  .block-field-blocknodepsafield-show-in-psa-gallery {
  display: none !important;
}

/* Hide PSA "Headline Style" control block on frontend */
.node--type-psa
  .block-field-blocknodepsafield-headline-style-psa {
  display: none !important;
}

/* Hide PSA "Mega Menu Links" control block on frontend */
.node--type-psa
  .block-field-blocknodepsafield-mega-menu-links {
  display: none !important;
}

@media (max-width: 768px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    height: var(--wcyd-hero-height-mobile) !important;
    min-height: var(--wcyd-hero-height-mobile) !important;
  }
}

.field--name-field-hero-headline .wcyd-hero-italic {
  font-style: italic;
  font-weight: inherit;
  font-family: inherit;
}

.field--name-field-hero-headline.field__item {
  display: flex;
  align-items: center;
}

.field--name-field-hero-headline .wcyd-hero-italic {
  display: contents;
  font-style: italic;
}

@supports not (display: contents) {
  .field--name-field-hero-headline .wcyd-hero-italic {
    display: inline;
    font-style: italic;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
}

/* ============================================================
   MOBILE HERO OVERLAY FIX: prevent clipping AND keep text over image
   (Overrides desktop-forced image height rules)
   ============================================================ */
@media (max-width: 768px) {

  /* Let hero be at least mobile height, but grow a bit if headline wraps */
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    height: auto !important;
    min-height: var(--wcyd-hero-height-mobile) !important;
    overflow: hidden; /* keep overlay clean */
  }

  /* Image layer stays full-bleed behind */
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* CRITICAL: undo the global "height: var(--wcyd-hero-height) !important" on mobile */
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-image.field__item img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover;
  }

  /* Headline remains an OVERLAY centered vertically */
  .node--type-hero-page .layout.layout--onecol:first-of-type
    .field--name-field-hero-headline.field__item,
  .node--type-psa .layout.layout--onecol:first-of-type
    .field--name-field-hero-headline.field__item {

    position: absolute;
    inset: 0;

    left: 50%;
    transform: translateX(-50%);
    width: min(var(--wcyd-content-max), 100%);
    padding-inline: var(--wcyd-content-pad);

    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* mobile readability */
    font-size: clamp(26px, 6.2vw, 34px);
    line-height: 1.15;
    padding-block: 18px;

    z-index: 2;
  }

  /* If long headlines still feel tight, increase the minimum hero height a bit */
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    min-height: clamp(var(--wcyd-hero-height-mobile), 55vh, 520px) !important;
  }
}

@media (max-width: 768px) {
  .node--type-hero-page .layout.layout--onecol:first-of-type,
  .node--type-psa .layout.layout--onecol:first-of-type {
    /* KEEP */
    height: auto !important;
    min-height: var(--wcyd-hero-height-mobile) !important;

    /* REMOVE/DO NOT USE (this causes the big jump): */
    /* min-height: clamp(var(--wcyd-hero-height-mobile), 55vh, 520px) !important; */
  }
}