/* ==========================================================================
   Responsive overrides
   Breakpoint tiers (mobile-first cutoffs, applied top-down as max-width):
     >=1920px  desktop / widescreen — the untouched 1920px artboard (default CSS)
     <=1919px  laptop               — MacBook Pro / widescreen laptop
     <=1439px  small laptop         — MacBook Air / 13" laptop
     <=1024px  tablet               — iPad
     <=799px   animation cutoff     — where pinned/scrub scroll effects switch
                                       off (see the matchMedia gate in
                                       js/scroll-effects.js)
     <=767px   mobile               — iPhone and other phones
   ========================================================================== */

/* ---------- Laptop (<=1919px) ---------- */
@media (max-width: 1919px) {
  .nav-inner { padding: 20px 60px; }
  .band-inner { padding: 0 80px; }
  .at-a-glance,
  .racehorse { padding-left: 80px; padding-right: 80px; }
  .hero-content { left: 80px; }
  .pedigree-intro-content { padding: 0 80px; }
  /* .gallery keeps its natural height here — the stage height lives on
     .gallery-stack (see layout.css). */
  .parade-video-pin { height: auto; min-height: 100vh; }

  .wax-seal--video-corner { bottom: -35px;
    right: -45px;
    width: 100px;}
}

/* ---------- Small laptop (<=1439px) ---------- */
@media (max-width: 1439px) {
  .nav-inner { padding: 18px 40px; }
  .nav-links { gap: 40px; }
  .band { padding: 100px 0; }
  .band-inner { padding: 0 40px; max-width: 100%; }
  .at-a-glance,
  .racehorse { padding-left: 40px; padding-right: 40px; }
  .at-a-glance { padding-top: 100px; padding-bottom: 100px; }
  .racehorse { padding-top: 100px; padding-bottom: 100px; }
  .hero-content { left: 40px; width: 460px; }
  .hero-title { font-size: 44px; }
  .hero-overline { font-size: 52px; }

  .quote-panel { padding: 0 100px; }
  .quote-panel blockquote { font-size: 30px; }

  #horse-of-a-lifetime .body-copy--two-col { max-width: 100%; padding: 0 40px; }
  #sir-owens-video { max-width: 640px;
    margin-bottom: 0; }
}

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
  .nav-inner { flex-wrap: nowrap; }
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex: none;
  }
  .nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text-light);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 20px;
    background: var(--color-bg-dark);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 13px; }

  .hero { height: auto; min-height: 900px; padding: 160px 0 80px; }
  .hero-content { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 460px; margin: 0 auto; padding: 0 24px; }
  .hero-bg { opacity: 0.6; object-position: 63% 0%; }

  .band { padding: 72px 0; }
  .band-inner { padding: 0 24px; }
  .band-bg-quote { display: none; }

  .intro-columns { flex-direction: column; gap: 0; }
  .intro-heading-col { flex: none; }
  .intro-body-col { padding-top: 0; }
  #intro h2 { margin-bottom: 24px; }

  .at-a-glance,
  .racehorse { padding: 72px 24px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 0; }
  .stat-tile { padding: 0 24px; border-left: none !important; }

  .carousel { width: 100%; left: 0; transform: none; }

  .pedigree-intro { padding: 90px 0; }
  .pedigree-intro-content { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .pedigree-intro-pin {
    position: relative;
    top: 0;
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 0 24px;
  }
  .pedigree-intro-pin .body-copy p { font-size: 15px; }
  .family-list { flex: none; width: 100%; padding: 48px 24px 0; margin-top: 0; }
  .family-illustration { width: 300px; height: 240px; }

  #horse-of-a-lifetime .body-copy--two-col { flex-direction: column; gap: 24px; padding: 0 24px; }
  #sir-owens-video { max-width: 100%; }
  .wax-seal--video-corner { width: 100px; bottom: -24px; right: -24px; }

  .breeding-card { flex-direction: column; }
  .breeding-card-text { padding: 24px; }
  .breeding-card-text h3 { font-size: 26px; }
  .breeding-note { font-size: 18px; }
  .breeding-caption { font-size: 14px; }

  .vet-records { max-width: 100%; }
  .offer-deadline { padding: 0 24px; margin-bottom: 40px; }

  .pedigree-narrative-content { flex-direction: column; gap: 48px; }
  .pedigree-doc-wrap { height: auto; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pedigree-certificate { height: auto; width: 100%; }
  #pedigree-illustration { height: auto; width: 280px; }
}

/* ---------- Animation cutoff (<=799px) ----------
   Matches the ScrollTrigger.matchMedia gate in js/scroll-effects.js: below
   this width the pin/scrub effects are skipped entirely, so these elements
   need their static (non-pinned, non-scrubbed) layout instead. */
@media (max-width: 799px) {
  .parade-video-pin { height: auto; min-height: auto; padding: 0; }
  #parade-video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* The slider itself is identical here; only the section stops being a
     full-height stage and follows the photos' shape instead. */
  /* The 3/2 stage from layout.css carries over; only the bar shrinks. */
  .gallery-nav { gap: 20px; padding: 12px 16px; }
  .gallery-btn { width: 32px; height: 32px; }
  .gallery-dots .slick-dots { gap: 8px; }

  .wax-seal--video-corner { width: 80px; bottom: -20px; right: -20px; }

  .offer-deadline { margin-bottom: 40px; }

  .pedigree-intro { padding: 64px 0; }

  .breeding-card-text h3 { font-size: 24px; }
  .breeding-note { font-size: 17px; }
  .breeding-caption { font-size: 13px; }

  .quote-panel { height: auto; min-height: 60vh; padding: 80px 40px; }
  .quote-panel blockquote { font-size: 26px; }
}

/* ---------- Mobile (<=767px) ---------- */
@media (max-width: 767px) {
  html { font-size: 15px; }

  .nav-inner { padding: 16px 20px; gap: 12px; }
  .nav-logo img { height: 36px; }
  .nav-links a { font-size: 12px; }

  .hero { padding: 80px 0 60px; }
  .hero-content { padding: 0 20px; }
  .hero-overline { font-size: 40px; }
  .hero-title { font-size: 32px; }
  .hero-subtitle { font-size: 18px; }

  .band { padding: 56px 0; }
  .band-inner { padding: 0 20px; }
  #horse-of-a-lifetime h2, #growing-family h2, #veterinary-records h2, .submit-offer h2 {
    font-size: 34px;
    margin-bottom: 20px;
  }

  .at-a-glance,
  .racehorse { padding: 56px 20px; }
  .pedigree-narrative-content { padding: 0 20px; }
  .at-a-glance h2 { font-size: 32px; margin-bottom: 48px; }
  .stat-grid { grid-template-columns: 1fr; gap: 40px; }
  .racehorse h2 { font-size: 32px; }

  .race-replays { padding: 72px 0; }
  .race-replays h2 { font-size: 32px; }
  .carousel-nav { gap: 12px; padding: 0 10px; }
  .carousel-caption { font-size: 26px; }
  .carousel-btn { width: 30px; }
  .wax-seal--video-corner { width: 60px; bottom: -10px; right: -10px; }

  .pedigree-intro { padding: 48px 0; }
  .pedigree-intro-pin h2, .family-list ~ * h2 { font-size: 32px; }
  .pedigree-intro-pin { padding: 0 20px; }
  .family-list { padding: 40px 20px 0; margin-top: 0; }
  .family-entry { padding: 40px 0; }
  .family-illustration { width: 240px; height: 195px; }
  #pedigree-illustration { height: auto; width: 200px; }
  .pedigree-narrative-content { flex-direction: column; gap: 32px; }

  #horse-of-a-lifetime .body-copy--two-col { padding: 0 20px; }

  .pedigree-doc-wrap { padding: 16px; }
  .pedigree-doc-wrap .wax-seal { width: 70px; top: -24px; }

  .breeding-card-text { padding: 20px; }
  .breeding-card-text h3 { font-size: 20px; }
  .breeding-note { font-size: 16px; }
  .breeding-caption { font-size: 12px; }
  .breeding-card .video-placeholder { aspect-ratio: 16 / 9; }

  .quote-panel { padding: 64px 24px; }
  .quote-panel blockquote { font-size: 20px; }
  .quote-attribution { font-size: 24px; }

  .submit-offer h2 { font-size: 34px; }
  .offer-deadline { font-size: 17px; padding: 0 12px; margin-bottom: 40px; }
  .contact-name { font-size: 22px; }
  .contact-intro { font-size: 19px; }
  .contact-link { font-size: 19px; }
  .contact-links { flex-direction: column; align-items: center; }

  .scroll-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}