/* ==========================================================================
   GAK CONSTRUCTION — INNER PAGE HERO  (Midnight Ocean & Rustic Ivory)
   File: public/css/page-hero.css

   Drop-in replacement: every original class name is preserved.
   Works with or without an uploaded banner image (--page-hero-image).

   PALETTE
   Midnight Navy #071A3A · Ocean Blue #234B78 · Steel Blue #669BC5
   Ice Blue #B7D9EF · Denim #6593BC · Ivory #E5E0D7 · Sand #CFC7B8
   Stone #8C8A80 · Ink #0A1526

   SECTIONS
   01. Tokens
   02. Hero shell & layered background
   03. Content, eyebrow, title, subtitle
   04. Actions & buttons
   05. Bottom meta strip
   06. Simple (no image) variant
   07. Optional decorative layers
   08. Motion & entrance
   09. Responsive
   10. Accessibility & print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  --ph-navy:     #071A3A;
  --ph-navy-2:   #04101F;
  --ph-navy-3:   #102E5C;
  --ph-ocean:    #234B78;
  --ph-steel:    #669BC5;
  --ph-denim:    #6593BC;
  --ph-ice:      #B7D9EF;
  --ph-ice-50:   #DCEBF7;
  --ph-ivory:    #E5E0D7;
  --ph-stone:    #8C8A80;

  --ph-grad-navy: linear-gradient(150deg, #04101F 0%, #071A3A 34%, #234B78 82%, #2F5C8A 100%);
  --ph-grad-sheen:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.6) 46%, transparent 64%);

  --ph-ease: cubic-bezier(.16, 1, .3, 1);
  --ph-t: .4s var(--ph-ease);

  --ph-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");

  --ph-grid: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M64 0H0v64' fill='none' stroke='%23B7D9EF' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E");

  --ph-twill: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 6 6-2M2 10 10 2' stroke='%23B7D9EF' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02. HERO SHELL & LAYERED BACKGROUND
   ========================================================================== */
.gak-page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 52vh, 560px);
  padding: clamp(78px, 9vw, 118px) 8% clamp(96px, 11vw, 130px);
  overflow: hidden;
  color: #fff;
  background-color: var(--ph-navy);

  /* Uploaded banner (unchanged variable name) plus the atmospheric wash.
     Both live on the ELEMENT background, not on ::before — a negative
     z-index pseudo paints ABOVE the element background, so an opaque
     wash on ::before would hide the banner completely. */
  background-image:
    var(--page-hero-image, none),
    radial-gradient(72% 92% at 14% 6%, rgba(102, 155, 197, .52), transparent 62%),
    radial-gradient(58% 80% at 88% 18%, rgba(183, 217, 239, .3), transparent 60%),
    radial-gradient(125% 125% at 50% 128%, #2F5C8A 0%, var(--ph-ocean) 34%, var(--ph-navy) 70%, #04101F 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Layer 1 — atmospheric light. Translucent on purpose: it brightens both the
   uploaded banner and the no-image wash underneath it. */
.gak-page-hero::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: -3;
  background:
    radial-gradient(72% 92% at 14% 6%, rgba(102, 155, 197, .42), transparent 62%),
    radial-gradient(58% 80% at 88% 18%, rgba(183, 217, 239, .26), transparent 60%);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
  animation: phBreathe 28s var(--ph-ease) infinite alternate;
}

/* Layer 2 — denim twill + film grain + blueprint grid */
.gak-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--ph-grain), var(--ph-grid);
  background-size: 180px 180px, 64px 64px;
  opacity: .15;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 82%);
}

/* Readability scrim — replaces the old flat green gradient */
.gak-page-hero__overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      94deg,
      rgba(4, 16, 31, .90) 0%,
      rgba(7, 26, 58, .70) 40%,
      rgba(10, 34, 66, .24) 72%,
      rgba(10, 34, 66, .04) 100%
    ),
    linear-gradient(0deg, rgba(4, 16, 31, .5), transparent 52%);
  pointer-events: none;
}


/* ==========================================================================
   03. CONTENT
   ========================================================================== */
.gak-page-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
}

/* Eyebrow — dim line + ice text, no gold */
.gak-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--ph-ice);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(4, 16, 31, .6);
}

.gak-page-hero__eyebrow-line {
  display: inline-block;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, var(--ph-ice), rgba(183, 217, 239, .1));
  transform-origin: left;
}

.gak-page-hero__title {
  max-width: 920px;
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(40px, 6.4vw, 80px);
  font-weight: 840;
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

/* accent words inside the title: <em> or <span class="ice"> */
.gak-page-hero__title em,
.gak-page-hero__title .ph-ice {
  font-style: normal;
  background: linear-gradient(100deg, var(--ph-ice) 0%, #FFFFFF 42%, var(--ph-steel) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gak-page-hero__subtitle {
  max-width: 640px;
  margin: 22px 0 0;
  color: rgba(228, 239, 248, .86);
  font-size: clamp(.96rem, 1.2vw, 1.06rem);
  font-weight: 400;
  line-height: 1.8;
}


/* ==========================================================================
   04. ACTIONS & BUTTONS
   ========================================================================== */
.gak-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

/* Primary — ice gradient with a lacquered 3D edge (replaces flat gold) */
.gak-page-hero__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  min-height: 54px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, #E5F2FB 0%, var(--ph-ice) 48%, var(--ph-steel) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -2px 0 rgba(7, 26, 58, .2),
    0 16px 30px -16px rgba(183, 217, 239, .9);
  color: var(--ph-navy);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .25s var(--ph-ease), box-shadow .25s var(--ph-ease),
              background .25s var(--ph-ease), color .25s var(--ph-ease),
              border-color .25s var(--ph-ease);
}

/* shine sweep */
.gak-page-hero__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ph-grad-sheen);
  transform: translateX(-130%);
  transition: transform .85s var(--ph-ease);
}

.gak-page-hero__button:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #F2F9FE 0%, #D6EAF8 48%, #7FADD4 100%);
  color: var(--ph-navy);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 22px 38px -18px rgba(183, 217, 239, 1);
}
.gak-page-hero__button:hover::after { transform: translateX(130%); }
.gak-page-hero__button:active { transform: translateY(1px); }

.gak-page-hero__button span {
  position: relative;
  font-size: 18px;
  line-height: 1;
  transition: transform .35s var(--ph-ease);
}
.gak-page-hero__button:hover span { transform: translateX(4px); }

/* Secondary (add .gak-page-hero__button--ghost in markup if you want a pair) */
.gak-page-hero__button--ghost,
.gak-page-hero__actions .btn-glass {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(12px);
}
.gak-page-hero__button--ghost:hover,
.gak-page-hero__actions .btn-glass:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}


/* ==========================================================================
   05. BOTTOM META STRIP
   ========================================================================== */
.gak-page-hero__bottom {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: 28px;
  left: 8%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(183, 217, 239, .26);
  color: rgba(228, 239, 248, .82);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  backdrop-filter: blur(0);
}

/* the separating dot becomes a small pulsing ice pip */
.gak-page-hero__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ph-ice);
  box-shadow: 0 0 0 3px rgba(183, 217, 239, .16);
  animation: phPulse 3s var(--ph-ease) infinite;
}


/* ==========================================================================
   06. SIMPLE VARIANT (no uploaded banner)
   ========================================================================== */
.gak-page-hero--simple {
  min-height: clamp(340px, 40vh, 420px);
  background-image: none;
  background-color: var(--ph-navy);
}
.gak-page-hero--simple::before {
  background:
    radial-gradient(70% 95% at 82% 10%, rgba(102, 155, 197, .45), transparent 55%),
    radial-gradient(60% 80% at 12% 90%, rgba(183, 217, 239, .2), transparent 60%),
    var(--ph-grad-navy);
}
.gak-page-hero--simple .gak-page-hero__title { max-width: 950px; }
.gak-page-hero--simple .gak-page-hero__overlay { display: none; }


/* ==========================================================================
   07. OPTIONAL DECORATIVE LAYERS
   Drop any of these into the markup for extra depth.
   ========================================================================== */

/* (a) floating glass stat card, bottom-right of the content block */
.ph-badge {
  position: absolute;
  right: 8%;
  bottom: 96px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 22px;
  border: 1px solid rgba(183, 217, 239, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .25);
  backdrop-filter: blur(16px);
  animation: phFloat 7s var(--ph-ease) infinite alternate;
}
.ph-badge strong {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.ph-badge span {
  color: var(--ph-ice);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* (b) thin contour SVG ring, purely decorative */
.ph-orbit {
  position: absolute;
  right: -6%;
  top: 50%;
  z-index: -1;
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  translate: 0 -50%;
  opacity: .5;
  pointer-events: none;
  animation: phSpin 46s linear infinite;
}
.ph-orbit circle,
.ph-orbit path {
  fill: none;
  stroke: rgba(183, 217, 239, .3);
  stroke-width: 1;
}

/* (c) scrolling hint */
.ph-scroll-cue {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 84px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(228, 239, 248, .6);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ph-scroll-cue::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--ph-ice), transparent);
}


/* ==========================================================================
   08. MOTION & ENTRANCE
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .gak-page-hero__eyebrow,
  .gak-page-hero__title,
  .gak-page-hero__subtitle,
  .gak-page-hero__actions,
  .gak-page-hero__bottom,
  .ph-badge {
    animation: phRise 1s var(--ph-ease) both;
    animation-delay: calc(var(--i, 0) * 110ms + 80ms);
  }

  .gak-page-hero__eyebrow { --i: 0; }
  .gak-page-hero__title { --i: 1; }
  .gak-page-hero__subtitle { --i: 2; }
  .gak-page-hero__actions { --i: 3; }
  .gak-page-hero__bottom { --i: 4; }
  .ph-badge { --i: 3; }

  /* the eyebrow rule draws itself in */
  .gak-page-hero__eyebrow-line {
    animation: phDraw .9s var(--ph-ease) both .25s;
  }
}

@keyframes phRise {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes phDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes phBreathe {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.5%, 1%, 0); }
}

@keyframes phFloat {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

@keyframes phSpin { to { transform: rotate(360deg); } }

@keyframes phPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(183, 217, 239, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(183, 217, 239, .06); }
}


/* ==========================================================================
   09. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .ph-badge { right: 6%; }
}

@media (max-width: 768px) {
  .gak-page-hero {
    min-height: 420px;
    padding: 82px 6% 118px;
    background-position: center;
  }

  .gak-page-hero__title {
    font-size: clamp(34px, 9.6vw, 56px);
    letter-spacing: -.04em;
    line-height: 1.05;
  }

  .gak-page-hero__subtitle {
    margin-top: 16px;
    font-size: .92rem;
    line-height: 1.72;
  }

  .gak-page-hero__eyebrow {
    font-size: .66rem;
    letter-spacing: .14em;
    margin-bottom: 16px;
  }
  .gak-page-hero__eyebrow-line { width: 26px; }

  .gak-page-hero__bottom {
    right: 6%;
    bottom: 18px;
    left: 6%;
    gap: 8px;
    padding-top: 16px;
    font-size: .56rem;
    letter-spacing: .12em;
  }

  /* the overlay gets stronger so text always wins on small screens */
  .gak-page-hero__overlay {
    background:
      linear-gradient(180deg, rgba(4, 16, 31, .84) 0%, rgba(7, 26, 58, .7) 52%, rgba(4, 16, 31, .92) 100%),
      linear-gradient(0deg, rgba(4, 16, 31, .5), transparent);
  }

  .ph-badge { display: none; }
  .ph-orbit { width: 70vw; height: 70vw; right: -18%; opacity: .35; }
  .ph-scroll-cue { display: none; }
}

@media (max-width: 420px) {
  .gak-page-hero {
    min-height: 380px;
    padding-top: 68px;
  }

  .gak-page-hero__title { font-size: clamp(30px, 9.2vw, 40px); }

  .gak-page-hero__subtitle { font-size: .88rem; }

  .gak-page-hero__eyebrow {
    font-size: .6rem;
    letter-spacing: .12em;
    gap: 9px;
  }

  .gak-page-hero__button {
    width: 100%;
    justify-content: space-between;
  }

  .gak-page-hero__bottom {
    gap: 6px;
    font-size: .52rem;
    letter-spacing: .1em;
  }
  .gak-page-hero__dot { width: 4px; height: 4px; }
}


/* ==========================================================================
   10. ACCESSIBILITY & PRINT
   ========================================================================== */
.gak-page-hero__button:focus-visible {
  outline: 2px solid var(--ph-ice);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gak-page-hero::before,
  .ph-badge,
  .ph-orbit,
  .gak-page-hero__dot,
  .gak-page-hero__eyebrow-line { animation: none; }

  .gak-page-hero__eyebrow,
  .gak-page-hero__title,
  .gak-page-hero__subtitle,
  .gak-page-hero__actions,
  .gak-page-hero__bottom {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }

  .gak-page-hero__button,
  .gak-page-hero__button::after,
  .gak-page-hero__button span { transition: none !important; }
}

@media (prefers-contrast: more) {
  .gak-page-hero__overlay {
    background: linear-gradient(94deg, rgba(4, 16, 31, .96) 0%, rgba(7, 26, 58, .86) 60%, rgba(10, 34, 66, .6) 100%);
  }
  .gak-page-hero__subtitle { color: #fff; }
  .gak-page-hero__bottom { color: rgba(255, 255, 255, .95); }
}

@media print {
  .gak-page-hero {
    min-height: auto;
    padding: 10mm 0;
    color: #000;
    background: #fff !important;
  }
  .gak-page-hero::before,
  .gak-page-hero::after,
  .gak-page-hero__overlay,
  .gak-page-hero__bottom,
  .ph-badge,
  .ph-orbit,
  .ph-scroll-cue { display: none !important; }

  .gak-page-hero__title { color: #000; text-shadow: none; font-size: 26pt; }
  .gak-page-hero__title em,
  .gak-page-hero__title .ph-ice { -webkit-text-fill-color: #000; color: #000; }
  .gak-page-hero__subtitle { color: #333; }
  .gak-page-hero__eyebrow { color: #555; }
}