/* page-hero.css (A2, 7.11.2026): the sky opening shared by about.html, reviews.html, contact.html (S, 7.11)
   and 404.html. One source for the sky (final design review 11): the gradient is the --sky-page token
   (tokens.css), and status / pay-bit can move to these classes too.
   Same language as contact.html (docs/design/mockups/mockup-contact.webp): sky gradient, the statue
   and NYC on the left and the flag on the right fading toward the middle, a navy pill tag, a huge navy
   title with a short red swoosh under it, one lead line. Loaded after tokens/base/components.
   Markup:
     <main class="sky-page">
       <div class="sky-deco sky-deco--left" aria-hidden="true"></div>
       <div class="sky-deco sky-deco--right" aria-hidden="true"></div>
       <section class="page-hero"> <div class="container page-hero__inner">
         <p class="page-hero__tag"><svg>…</svg>תגית</p>
         <h1 class="page-hero__title"><span class="page-hero__word">כותרת<svg class="page-hero__swoosh">…</svg></span></h1>
         <p class="page-hero__lead">…</p>
       </div></section>
       …
     </main> */

.sky-page {
  position: relative;
  overflow: clip;
  background: var(--sky-page);
  background-color: var(--sky-page-end);
  padding-bottom: var(--space-6);
}
/* the sky runs into the footer wave (as F2 did on contact / status / pay-bit): the body takes the last
   colour of the sky and the footer sits right under main, so there is no white band above the wave */
body:has(> .sky-page) { background: var(--sky-page-end); }
body:has(> .sky-page) .site-footer { margin-top: 0; }

/* ---------- Side decorations (the same two images as contact.html) ---------- */
.sky-deco {
  position: absolute;
  top: 0;
  z-index: 0;
  width: min(44vw, 520px);
  aspect-ratio: 440 / 274;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.sky-deco--left {
  left: 0;
  background-image: url("../assets/home/contact-left.webp");
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(90deg, #000 38%, transparent 96%), linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 38%, transparent 96%), linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}
.sky-deco--right {
  right: 0;
  background-image: url("../assets/home/contact-right.webp");
  background-position: right top;
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 96%), linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, #000 40%, transparent 96%), linear-gradient(180deg, #000 60%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- Opening ---------- */
.page-hero {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6) var(--space-6);
  text-align: center;
}
.page-hero__inner { display: grid; justify-items: center; }
.page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--navy-grad);
  color: var(--white);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  box-shadow: 0 6px 16px rgba(11, 42, 91, .22);
  margin-bottom: var(--space-3);
}
.page-hero__tag svg { width: 22px; height: 22px; flex: none; }
.page-hero__title {
  font-size: clamp(3rem, 2.2rem + 4vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy-900);
  margin-bottom: calc(var(--space-4) + .1em);
}
.page-hero__word { position: relative; display: inline-block; white-space: nowrap; }
/* the red swoosh: shorter than the word, under its middle, as in the mockups */
.page-hero__swoosh {
  position: absolute;
  left: 18%;
  bottom: -.2em;
  width: 64%;
  max-width: none;
  height: .16em;
  color: var(--red-500);
  pointer-events: none;
}
.page-hero__lead {
  max-width: 36rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #22324D;
  text-wrap: balance;
}

/* buttons under the lead (404.html): side by side, full width on phones */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.page-hero__actions .btn { min-width: 220px; }
.page-hero__help { margin-top: var(--space-5); color: #3E4E6A; }
@media (max-width: 479.98px) {
  .page-hero__actions { flex-direction: column; justify-self: stretch; }
  .page-hero__actions .btn { width: 100%; min-width: 0; }
}

/* the main content sits above the decorations */
.sky-page > .container, .sky-page > section { position: relative; z-index: 1; }

/* shared section heading inside these pages: navy, centred, short swoosh (components.css .title-swoosh) */
.sky-h2 {
  text-align: center;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  color: var(--navy-900);
}
.sky-h2.title-swoosh::after { width: 96px; height: 10px; margin-top: 8px; }
.sky-sub { text-align: center; color: #3E4E6A; max-width: 38rem; margin: var(--space-3) auto 0; text-wrap: balance; }

/* ---------- Phones: smaller decorations, the title stays readable over them ---------- */
@media (max-width: 899.98px) {
  .sky-deco { width: 52vw; opacity: .75; }
}
@media (max-width: 640px) {
  .page-hero__tag { margin-bottom: var(--space-5); }   /* F2 (7.11): air between the tag and the big title */
}
@media (max-width: 479.98px) {
  .sky-deco { width: 56vw; opacity: .6; }
  .page-hero { padding-block: var(--space-6) var(--space-5); }
  .page-hero__lead { font-size: 1.04rem; }
}