/* Corporate Family Day extensions.
   Order: Bootstrap 4.6.1 → supplied style.css (unchanged) → this file.
   Grid, spacing, buttons, menu, footer and text utilities reuse those libraries. */

/* Fixed Academy shell: only integration rules missing from the base sheets. */

.fd-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 1200; }
.fd-topbar { min-height: 100px; gap: 20px; }
.fd-backdrop { inset: 0; background: #000b; z-index: 1040; }
.fd-menu { max-width: 100vw; }
.fd-menu.fd-open { margin-left: 0; }
.fd-contact a { overflow-wrap: anywhere; }
.fd-socials img { max-width: none; }

/* Campaign typography and the existing family-photo composition. */
.fd-eyebrow { font-size: .75rem; letter-spacing: .08em; }
.fd-heading { font-size: clamp(2rem, 3.6vw, 3.7rem); line-height: 1.1; letter-spacing: -.04em; text-transform: none; }
.fd-title { font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.06; letter-spacing: -.055em; text-transform: none; }
.fd-title span, #program-title span { color: #6b87be; }
.fd-product { font: 700 2rem/1.1 juventus_fansbold, sans-serif; }
.fd-number { font: 700 1.9rem/1.1 juventus_fansbold, sans-serif; }
.fd-lead { font-size: 1.0625rem; line-height: 1.65; max-width: 520px; }
.fd-hero-copy { z-index: 1; }
.fd-hero-art { height: 790px; }
.fd-hero-pattern { top: 55px; right: 0; width: 87%; height: 620px; object-fit: cover; }
.fd-hero-photo { top: 85px; left: 2%; width: 88%; height: 545px; object-fit: cover; border: 12px solid #fff; }
.fd-stamp { left: -3%; bottom: 100px; width: 158px; height: 158px; background: #e1cd00; font: 700 3rem/.9 juventus_fansbold, sans-serif; transform: rotate(-8deg); }
.fd-hero-caption { right: 10%; top: 650px; font-size: .75rem; }

/* Existing editorial images, activity accent and mascot invitation. */
.fd-play-photo { height: 580px; }
.fd-cover { object-fit: cover; object-position: 45% center; }
.fd-caption { bottom: 0; left: 0; font-size: .75rem; }
.fd-play-accent { font: 700 clamp(4rem, 8vw, 7rem)/.9 juventus_fansbold, sans-serif; transform: rotate(-7deg); }
.fd-play-accent span { display: table; background: #e1cd00; padding: 8px 15px; }
.fd-play-accent span + span { margin-left: 40px; background: #000; color: #fff; }
.fd-moment { background: var(--fd-blue); }
.fd-moment-photo { height: 600px; }
.fd-closing { min-height: 620px; padding-top: 100px; }
.fd-closing-copy { z-index: 1; }
.fd-closing-pattern { right: 0; bottom: 0; width: 42%; height: 60%; object-fit: cover; }
.fd-closing-zebra { right: 3%; bottom: 0; width: 410px; height: 600px; object-fit: contain; object-position: bottom; }

@media (max-width: 1199px) {
  .fd-hero-pattern { top: 105px; height: 500px; }
  .fd-hero-photo { top: 135px; height: 430px; }
  .fd-hero-caption { top: 620px; right: 5%; }
  .fd-closing-zebra { width: 340px; height: 520px; right: 0; }
}
/* Desktop hero fits the .h-100vh header block: sizes follow viewport height. */
@media (min-width: 992px) {
  .fd-hero-copy { display: flex; flex-direction: column; justify-content: center; }
  .fd-hero-copy > .btn { align-self: center; }
  .fd-hero-copy > .my-4 { margin-top: clamp(.5rem, 2.5vh, 1.5rem) !important; margin-bottom: clamp(.5rem, 2.5vh, 1.5rem) !important; }
  .fd-hero-copy > .mb-4 { margin-bottom: clamp(.5rem, 2.5vh, 1.5rem) !important; }
  .fd-title { font-size: clamp(2rem, min(4.6vw, 7vh), 4.4rem); }
  .fd-product { font-size: clamp(1.5rem, 4vh, 2rem); }
  .fd-lead { font-size: clamp(.9375rem, 2.6vh, 1.0625rem); line-height: 1.5; }
  .fd-hero-art { height: calc(100vh - 100px); max-height: 790px; }
  .fd-hero-pattern { top: 7%; height: 78%; }
  .fd-hero-photo { top: 11%; height: 69%; }
  .fd-stamp { bottom: 8%; width: clamp(100px, 20vh, 158px); height: clamp(100px, 20vh, 158px); font-size: clamp(2rem, 3.8vh, 3rem); }
}
@media (max-width: 991px) {
  /* Stacked hero is taller than the screen: let the header block grow with its content. */
  .fullscreen-bg { height: auto; padding-top: 0; }
  .fullscreen-bg .overlay { position: relative; height: auto; }
  .fullscreen-bg .h-100vh { height: auto; padding-top: 40px; padding-bottom: 40px; }
  .fd-title { font-size: clamp(2.4rem, 7vw, 4rem); }
  .fd-hero-art { height: 520px; }
  .fd-hero-pattern { top: 20px; height: 430px; }
  .fd-hero-photo { top: 40px; left: 6%; width: 84%; height: 395px; }
  .fd-stamp { bottom: 45px; left: 3%; width: 125px; height: 125px; font-size: 2.4rem; }
  .fd-hero-caption { top: auto; bottom: 15px; }
  .fd-play-photo { height: 480px; }
  .fd-moment-photo { height: 480px; }
  .fd-closing { padding-bottom: 480px; }
  .fd-closing-pattern { width: 100%; height: 300px; }
  .fd-closing-zebra { height: 450px; width: 310px; right: calc(50% - 155px); }
}
@media (max-width: 575px) {
  .family-day { padding-top: 76px; }
  .family-day main, .family-day main section, .family-day footer { scroll-margin-top: 90px; }
  .fd-topbar { min-height: 76px; }
  .fd-title { font-size: clamp(2.15rem, 8.8vw, 3.2rem); }
  .fd-hero-art { height: 450px; }
  .fd-hero-pattern { height: 360px; }
  .fd-hero-photo { height: 320px; border-width: 8px; }
  .fd-hero-caption { max-width: 65%; text-align: right; }
  .fd-play-photo, .fd-moment-photo { height: 360px; }
  .fd-closing { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .family-day *, .family-day *::before, .family-day *::after { transition: none !important; }
}