/* ══════════════════════════════════════════
   SCOOP OOH — SPLASH
   Landing hero: Pearl Island photo background,
   darkened to a neutral tint, text-only content
══════════════════════════════════════════ */

.splash-hero {
  position: relative;
  /* #app-content (this section's scroll container) is itself only
     "100vh - 64px" tall — it sits below the fixed 64px nav — so sizing to
     a full 100vh here made the section taller than what's actually visible,
     pushing the vertically-centered content further down than it looked
     like it should sit, and left an extra 64px to scroll past at the
     bottom. Matching that real visible height keeps the hero properly
     centered within what's actually on screen. */
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
  box-sizing: border-box;
}


.splash-bg {
  position: absolute;
  inset: 0;
  background: url('../../../images/thepearlisland.jpg') center/cover no-repeat;
  z-index: 0;
}

/* Neutral dark tint over the photo — keeps hero text legible without
   tinting the image red; matches the near-black --bg-base surface color */
.splash-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,14,0.58) 0%, rgba(11,12,14,0.72) 45%, rgba(11,12,14,0.9) 100%);
  z-index: 1;
}

/* ── Hero text wrapper (no card/glass — text sits directly on the photo) ── */
.splash-glass {
  /* True dead-center in the hero still leaves as much open photo below the
     CTAs as above them, which reads as "sitting too low" — rest a bit above
     center instead of exactly on it. Referenced by the animation below so
     the entrance slide-up lands on this offset rather than translateY(0). */
  --hero-shift: -8vh;
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  padding: 48px 44px;
  text-align: center;
  animation: splashIn 0.7s ease both;
}
@media (max-height: 700px) {
  /* Less headroom to spare on short viewports — nudge up less. */
  .splash-glass { --hero-shift: -4vh; }
}

@keyframes splashIn {
  from { opacity: 0; transform: translateY(calc(var(--hero-shift) + 18px)); }
  to   { opacity: 1; transform: translateY(var(--hero-shift)); }
}

/* ── Hero content (eyebrow / headline / sub / CTAs) ───── */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28);
  font-size: 12px; font-weight: 600; font-family: var(--font-body);
  color: #fff; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 2rem; animation: fadeInUp 0.6s ease both;
  position: relative; z-index: 1;
  white-space: nowrap; /* pill badge — meant to always read as one line, never wrap */
}
.hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

.hero-headline {
  font-family: var(--font-display); font-size: clamp(36px,3.8vw,60px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 1.5rem; animation: fadeInUp 0.6s 0.1s ease both;
  position: relative; z-index: 1;
}
/* No forced white-space:nowrap here — it let this line render wider than
   the 720px-capped .splash-glass at some viewport/font sizes and overflow
   past the container, breaking its centering relative to the lines above
   and below it (which wrap normally and stayed centered). */
.hero-headline .grad  { background: linear-gradient(135deg,#F3B6BF,#E5697F,#C83A50); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-headline .grad2 { background: linear-gradient(135deg,#C83A50,#F3B6BF);         -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mobile-break { display: none; }

.hero-sub {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.85); max-width: 560px;
  margin: 0 auto 2.5rem; font-weight: 400; animation: fadeInUp 0.6s 0.2s ease both;
  position: relative; z-index: 1;
}

.hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  animation: fadeInUp 0.6s 0.3s ease both;
  position: relative; z-index: 1;
}
.btn-cta-primary {
  padding: 16px 36px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: white; font-family: var(--font-body); font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35); transition: all 0.25s;
  display: flex; align-items: center; gap: 8px;
}
.btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.btn-cta-secondary {
  padding: 16px 36px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 15px;
  transition: all 0.25s; display: flex; align-items: center; gap: 8px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-cta-secondary:hover { border-color: #fff; transform: translateY(-3px); background: rgba(255,255,255,0.18); }
.btn-arrow {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform 0.2s;
}
.btn-cta-primary:hover .btn-arrow, .btn-cta-secondary:hover .btn-arrow { transform: translateX(4px); }

/* ── Responsive ───────────────────────── */
@media(max-width: 900px) {
  .splash-glass { padding: 40px 30px; }
  .hero-headline { font-size: clamp(22px,5vw,34px); }
}
@media(max-width: 480px) {
  .splash-hero { padding: 24px 14px; }
  .splash-glass { padding: 32px 22px; }
  /* "SCOOP Media and Communications Co." at the desktop 12px size + 0.1em
     letter-spacing + 8px/18px padding no longer fits this panel's narrower
     content width in one line — shrink font/padding/letter-spacing (rather
     than dropping the nowrap above and letting it wrap) so the pill still
     reads as a single line, just a smaller one. */
  .hero-eyebrow { font-size: 9.5px; padding: 6px 12px; gap: 6px; letter-spacing: 0.06em; }
  /* "Inventory, Campaigns and Schedules" no longer fits a proper hero size
     on one line at this width — split it into two shorter lines instead
     of shrinking the font down to body-text size. */
  .hero-headline { font-size: clamp(18px,6.5vw,24px); }
  .mobile-break { display: inline; }
  .btn-cta-primary, .btn-cta-secondary { padding: 13px 26px; font-size: 13px; width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; }
  .btn-arrow { width: 18px; height: 18px; font-size: 11px; }
}