/* ── ita_page_header ───────────────────────────────────────────────
   Reused from IDA's cinematic_page_header — same render.php DOM
   structure (.cph-bg / .cph-inner / .cph-label / .cph-title /
   .cph-intro), completely retheme'd:
     .cph--text — the About the Awards / Categories / About Us header:
                  light ground, no image, kicker + h1 + intro
     .cph--hero — the HOME hero only: NOT a full-bleed photo like IDA
                  (this brand has no photography at all) — instead a
                  two-column layout, copy left / brand-mark image
                  right in a contained box, with two large low-opacity
                  decorative shapes behind it (CSS pseudo-elements,
                  echoing the hero-sq/hero-ci/hero-tri treatment from
                  the approved mockup without needing new DOM nodes).
   Tokens only. */

/* padding:0 on purpose — this section's spacing is handled entirely by
   .cph-inner's own padding below, tuned per variant. Without this the
   outer <section> ALSO picked up the shared `section { padding:
   var(--space-section-y) 0 }` rhythm on top of .cph-inner's, doubling
   the real gap above/below the header (was invisibly 96px+56px top
   and 96px+84px bottom before this was caught). */
.block-ita_page_header {
  position: relative;
  color: var(--color-fg);
  overflow: hidden;
  padding: 0;
}

.block-ita_page_header .cph-inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: 56px var(--space-section-x) var(--space-section-y);
}
.block-ita_page_header.cph--align-center .cph-inner { text-align: center; }
.block-ita_page_header.cph--align-center .cph-title,
.block-ita_page_header.cph--align-center .cph-intro { margin-left: auto; margin-right: auto; }

.block-ita_page_header .cph-label {
  display: inline-flex; align-items: center; gap: 9px;
  /* flex containers default to min-width:auto on their content, which
     stops bare text from wrapping even with a max-width — without
     flex-wrap + max-width here, a long hero-tag date string (see the
     home hero) silently overflows past the viewport edge on mobile,
     clipped invisibly by the section's own overflow:hidden so it
     never shows up as a page-level scrollWidth overflow either.
     Caught by an actual mobile screenshot, not by the DOM-width
     check alone — worth remembering for any other pill-shaped label. */
  flex-wrap: wrap; max-width: 100%; box-sizing: border-box;
  margin-bottom: 16px;
  font-family: var(--font-eyebrow); font-weight: 700;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted);
}
.block-ita_page_header .cph-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px,4.2vw,52px); line-height: 1.08;
  letter-spacing: -0.01em; margin: 0;
  text-wrap: balance; max-width: 20ch; color: var(--color-fg);
}
.block-ita_page_header .cph-tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px,2vw,24px); color: var(--color-accent);
  margin-top: 18px;
}
.block-ita_page_header .cph-intro {
  margin: 20px 0 0;
  color: var(--color-fg-muted); max-width: 62ch;
  font-size: clamp(16px,1.5vw,19px); line-height: 1.6;
}
.block-ita_page_header .cph-intro p + p { margin-top: 14px; }

/* ── Text variant (About/Categories/About Us headers) ────────────── */
.block-ita_page_header.cph--text { background: transparent; }
.block-ita_page_header.cph--text .cph-image-slot { display: none; }
body.cms-edit .block-ita_page_header.cph--text .cph-image-slot {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 12px; right: 12px;
  padding: 8px 14px; z-index: 3; border-radius: 8px;
  background: rgba(2,30,62,0.06);
  border: 1px dashed var(--color-border);
  cursor: pointer;
  font-family: var(--font-eyebrow); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted);
}
/* Once an image is actually set, it becomes a real full-bleed
   background for the whole header — not the tiny empty-state "click
   to add" chip above (that chip's small dashed-box styling was never
   meant to hold a populated image; it just happened to inherit it
   because both states share the same .cph-image-slot element), and
   not a boxed side panel either (an earlier attempt at this — still
   read as "a decorative photo next to the text" rather than the
   header's actual background, which is literally what was asked for).
   A gradient scrim keeps the text legible, same idea as the hero
   variant's carousel treatment, just a single static image instead of
   a cycling stack. Absolutely positioned (not a grid column) so the
   outer <section> — which editor.css already forces to display:flex
   in edit mode via .cms-block-host — never has to fight a second
   layout mode. */
.block-ita_page_header.cph--text .cph-image-slot--filled,
body.cms-edit .block-ita_page_header.cph--text .cph-image-slot--filled {
  display: block; position: absolute; inset: 0;
  width: auto; height: auto; padding: 0; border-radius: 0; overflow: hidden;
  background: var(--color-dark-bg); border: none; z-index: 0;
  font-size: 0; letter-spacing: normal; text-transform: none; cursor: pointer;
}
.block-ita_page_header.cph--text .cph-image-slot--filled img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ::before, not ::after — editor.css already claims ::after on every
   div[data-field-image] for its own "Click to replace image" hover
   hint (higher specificity there too: body.cms-edit.cms-authed
   div[data-field-image]::after), so using the same pseudo-element
   here would silently lose that fight and the scrim just wouldn't
   render at all. Both this and the hover hint coexist as long as
   they're different pseudo-elements. */
.block-ita_page_header.cph--text .cph-image-slot--filled::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(2,30,62,.88) 0%, rgba(2,30,62,.6) 45%, rgba(2,30,62,.15) 75%);
}
.block-ita_page_header.cph--text:has(.cph-image-slot--filled) .cph-label { color: rgba(255,255,255,.75); }
.block-ita_page_header.cph--text:has(.cph-image-slot--filled) .cph-title { color: #fff; }
.block-ita_page_header.cph--text:has(.cph-image-slot--filled) .cph-intro { color: rgba(255,255,255,.75); }
.block-ita_page_header.cph--text:has(.cph-image-slot--filled) .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.block-ita_page_header.cph--text:has(.cph-image-slot--filled) .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* ── Hero variant (HOME only) ─────────────────────────────────────
   v2 design system: full-bleed, cross-fading photo carousel behind
   the copy, dark navy gradient scrim for legibility, white text.
   Replaces the v1 two-column brand-mark layout — see render.php's
   doc comment and design-system-v2 §4. */
.block-ita_page_header.cph--hero {
  min-height: 92svh; display: flex; align-items: flex-end;
  color: var(--color-on-dark); padding: 0;
}
.block-ita_page_header.cph--hero .cph-bg-stack { position: absolute; inset: 0; z-index: 0; }
/* editor/editor.css sets position:relative on every div[data-field-image]
   (so its own "Click to replace image" hover overlay has something to
   anchor inset:0 to) — that stomps the carousel's required
   position:absolute full-bleed layering, collapsing every slide to a
   zero-height in-flow box. Needs higher specificity to win it back;
   position:absolute is still a valid anchor for that same overlay, so
   nothing about the hover hint breaks. */
body.cms-edit .block-ita_page_header.cph--hero .cph-bg-slide { position: absolute; }
.block-ita_page_header.cph--hero .cph-bg-slide {
  position: absolute; inset: 0; background-size: cover; background-position: 50% 38%;
  transform: scale(1.08);
  opacity: 0; transition: opacity 1.8s ease;
}
/* Gradient scrim lives on ::after, not baked into background-image
   alongside the photo — inline style="background-image:url(...)"
   attributes resolve relative to the DOCUMENT, but a gradient added
   via a stylesheet rule referencing a custom property resolves
   relative to the STYLESHEET, which 404s on every relative image path.
   Keeping the photo and the gradient as two separate layers sidesteps
   that entirely. */
.block-ita_page_header.cph--hero .cph-bg-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,10,22,.32) 0%, rgba(2,10,22,.18) 32%, rgba(2,10,22,.72) 88%, rgba(2,10,22,.92) 100%);
}
.block-ita_page_header.cph--hero .cph-bg-slide.active { opacity: 1; }
.block-ita_page_header.cph--hero .cph-bg-slide--empty {
  background: var(--color-dark-bg);
  display: flex; align-items: center; justify-content: center;
}
.block-ita_page_header.cph--hero .cph-bg-slide--empty .cph-image-hint { color: rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce) {
  .block-ita_page_header.cph--hero .cph-bg-slide { transition: none; }
}
/* ── Editor-only thumbnail strip — the actual photo-management surface
   (see render.php's doc comment for why the big slides themselves
   aren't clickable). Normal document flow — a child of .cph-inner,
   right after the CTA row — not absolutely positioned against the
   92svh-tall hero's own bottom edge, which always landed it right at
   (or past) the viewport fold and made the + button unreliable to
   click regardless of screen size. Hidden on the public site. ── */
.block-ita_page_header.cph--hero .cph-thumb-bar {
  display: none;
  gap: 10px; padding: 14px; margin-top: 24px; overflow-x: auto;
  border-radius: var(--radius);
  background: rgba(2,30,62,.55); backdrop-filter: blur(6px);
}
body.cms-edit .block-ita_page_header.cph--hero .cph-thumb-bar { display: flex; }

.block-ita_page_header.cph--hero .cph-thumb {
  flex: none; width: 72px; height: 72px; border-radius: 6px;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.25);
  cursor: pointer; transition: border-color .15s;
}
.block-ita_page_header.cph--hero .cph-thumb:hover { border-color: var(--color-accent-2); }
.block-ita_page_header.cph--hero .cph-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; color: rgba(255,255,255,.65);
  font-size: 22px; font-weight: 300;
}
/* Reorder isn't useful for a background carousel — only expose remove
   (×), which the generic data-list-item wiring already sizes fine for
   a 72px thumbnail; hide the move ▲▼ buttons this list doesn't need. */
.block-ita_page_header.cph--hero .cph-thumb-bar .cms-list-item-move { display: none; }

.block-ita_page_header.cph--hero .cph-thumb-add {
  flex: none; width: 72px; height: 72px; min-height: 0;
  padding: 0; font-size: 26px; font-weight: 300;
}
.block-ita_page_header.cph--hero .cph-thumb-add::before { content: none; }

.block-ita_page_header.cph--hero .cph-inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: var(--space-section-x) var(--space-section-x) clamp(48px,7vw,88px);
}
.block-ita_page_header.cph--hero .cph-label {
  color: var(--color-fg);
  background: var(--color-accent-2);
  padding: 7px 16px;
  border-radius: 999px;
}
.block-ita_page_header.cph--hero .cph-title {
  color: #fff; font-size: clamp(42px,7.4vw,96px); font-weight: 700;
  line-height: .98; letter-spacing: -0.015em; max-width: 16ch;
  text-transform: none;
}
.block-ita_page_header.cph--hero .cph-tagline {
  color: var(--color-accent-2); font-style: italic; font-weight: 500;
  font-size: clamp(19px,2.2vw,26px);
}
.block-ita_page_header.cph--hero .cph-intro {
  color: rgba(255,255,255,.72); max-width: 460px;
  padding-top: 28px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.22);
}
.block-ita_page_header.cph--hero .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.block-ita_page_header.cph--hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 700px) {
  .block-ita_page_header .cph-inner { padding: 40px 24px 56px; }
  .block-ita_page_header .cph-title { font-size: clamp(30px, 8vw, 44px); }
}