/* ═══════════════════════════════════════════════════════════
   Final Furlong — Mobile responsive overrides
   Applied to all public pages. Targets structural inline-style
   patterns used across components by attribute / element.
   Breakpoints:
     ≤ 768px  : tablet portrait + phones
     ≤ 480px  : phones
   ═══════════════════════════════════════════════════════════ */

/* Smooth font sizing */
html { -webkit-text-size-adjust: 100%; }

/* Prevent horizontal scroll always */
html, body { max-width: 100vw; }
body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* ───── TABLET + PHONE (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {

  /* Body padding shrink — many sections use 56px side padding */
  section,
  footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Cap vertical section padding */
  section[style*="padding"] { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* ── NAV ──────────────────────────────────────────────── */
  nav {
    padding: 16px 20px !important;
    gap: 12px !important;
    position: relative;
  }
  /* Hide horizontal nav list on mobile — replaced by drawer */
  nav > ul { display: none !important; }
  /* Hide nav CTA buttons that get crowded */
  nav > button { display: none !important; }

  /* Hamburger trigger (injected by mobile-nav.js) */
  .ff-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .ff-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Full-screen drawer */
  .ff-drawer {
    position: fixed;
    inset: 0;
    background: #0A0907;
    color: #F5F1E8;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
  }
  .ff-drawer.open { transform: translateX(0); }
  .ff-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 56px;
  }
  .ff-drawer-mark {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px; font-weight: 700; letter-spacing: 0.15em;
  }
  .ff-drawer-close {
    background: transparent; border: none; color: #F5F1E8;
    font-size: 28px; cursor: pointer; padding: 8px 12px;
    line-height: 1;
  }
  .ff-drawer ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  .ff-drawer li {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 14px 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    cursor: pointer;
    color: #F5F1E8;
  }
  .ff-drawer li.active { color: var(--ff-accent, #2897FF); }
  .ff-drawer-cta {
    margin-top: 32px;
    padding: 16px;
    text-align: center;
    background: var(--ff-accent, #2897FF);
    color: #0A0907;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    border: none;
    cursor: pointer;
  }
  body.ff-drawer-locked { overflow: hidden; }

  /* ── HEROES — collapse 2-col grids to 1 col ──────────── */
  /* Common pattern: heroes use grid w/ 1.x fr 1fr layouts */
  [style*="grid-template-columns"][style*="fr"][style*="fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Repeat-N grids → single or 2-col */
  [style*="grid-template-columns: repeat(4"],
  [style*="gridTemplateColumns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: repeat(3"],
  [style*="gridTemplateColumns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="grid-template-columns: repeat(2"],
  [style*="gridTemplateColumns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── TYPOGRAPHY scale-down ────────────────────────────── */
  /* Display headlines */
  h1 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(30px, 7.5vw, 44px) !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(22px, 5vw, 28px) !important; }

  /* Tame any monstrous inline numerics (stat values) */
  [style*="font-size: 56"], [style*="fontSize: 56"],
  [style*="font-size: 64"], [style*="fontSize: 64"],
  [style*="font-size: 72"], [style*="fontSize: 72"] {
    font-size: 40px !important;
  }
  [style*="font-size: 80"], [style*="fontSize: 80"],
  [style*="font-size: 96"], [style*="fontSize: 96"],
  [style*="font-size: 120"], [style*="fontSize: 120"],
  [style*="font-size: 140"], [style*="fontSize: 140"],
  [style*="font-size: 160"], [style*="fontSize: 160"] {
    font-size: 48px !important;
    letter-spacing: -0.03em !important;
  }

  /* ── FLEX rows: allow wrap so big toolbars/strips stack ── */
  nav, footer [style*="display:flex"], footer [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* ── HERO heights — replace 100vh strict with min-height ── */
  div[style*="height: 100vh"], div[style*="height:100vh"] {
    height: auto !important;
    min-height: 88vh !important;
  }

  /* ── Hero with photoFilly: convert to bg-image overlay layout ── */
  /* The OfferingHero photo column is a tall image — let it shrink */
  [style*="aspect-ratio"][style*="3 / 4"],
  [style*="aspect-ratio"][style*="4 / 5"],
  [style*="aspect-ratio"][style*="3/4"],
  [style*="aspect-ratio"][style*="4/5"] {
    aspect-ratio: 3 / 2 !important;
    max-height: 60vh !important;
  }

  /* ── TABLES → reflow stacked ──────────────────────────── */
  /* Generic data rows that use a flex layout: flex direction stays
     row but they wrap, key-value rows compress */
  table { width: 100%; }

  /* Sire comparison + stats rows — they're divs with inline grid */
  [style*="display: grid"][style*="1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── FOOTER ───────────────────────────────────────────── */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer { padding: 48px 24px 24px !important; }

  /* ── FORMS (Contact, CTAs) ────────────────────────────── */
  input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Stack inline email forms */
  form[style*="display: flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  form[style*="display: flex"] > input,
  form[style*="display: flex"] > button {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  /* ── HIDE Tweaks panel on mobile (it's a desktop tool) ── */
  .tweaks-panel,
  [data-tweaks-panel],
  div[style*="position: fixed"][style*="bottom"][style*="right"][style*="width: 280"],
  div[style*="position: fixed"][style*="bottom"][style*="right"][style*="width: 320"] {
    display: none !important;
  }

  /* ── STICKY BOTTOM CTA (injected per page where appropriate) ── */
  .ff-sticky-cta {
    display: flex !important;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 90;
    background: var(--ff-accent, #2897FF);
    color: #0A0907;
    padding: 14px 20px;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ff-sticky-cta::after { content: '→'; font-size: 18px; }
  /* Push body bottom so sticky doesn't cover footer disclaimer */
  body.ff-has-sticky footer { padding-bottom: 96px !important; }

  /* ── Tap targets minimum ──────────────────────────────── */
  button, a[role="button"], .ff-drawer li { min-height: 44px; }

  /* ── Page-specific: large stat boards, hide flourishes ── */
  /* Eyebrow side-rules can crash on narrow viewports */
  [style*="display: inline-block"][style*="width: 40"][style*="height: 1"] {
    width: 20px !important;
  }

  /* Allow long unbroken horse names / table cells to wrap.
     Use break-word (not anywhere) so currency, dates, and short tokens
     stay intact; we only split inside a word when it can't fit at all. */
  * { word-wrap: break-word; overflow-wrap: break-word; }

  /* ── STAT STRIPS ───────────────────────────────────────────
     Multi-cell flex rows tagged with data-stats reflow to a 2-col
     grid on mobile so labels & values keep their integrity. The
     thin inline dividers (1px wide spacers between cells) become
     redundant once the strip wraps, so hide them. */
  [data-stats] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 24px !important;
    align-items: start !important;
    justify-content: start !important;
  }
  [data-stats] > * {
    flex: initial !important;
    padding-right: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  [data-stats] > div[style*="width: 1px"],
  [data-stats] > div[style*="width:1px"] {
    display: none !important;
  }

  /* ── FEES TABLE ────────────────────────────────────────────
     The fees table is a 4-column flex grid (TIER / ANNUAL / MO /
     QTR). At 393px viewport that compresses cells until values
     either wrap badly or overflow under body's overflow-x:hidden.
     On mobile, hide the column header row and stack each row as
     a card, with cells getting their column name back via a
     ::before label drawn from data-th. */
  [data-fees-head] { display: none !important; }
  [data-fees-table] > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 28px 20px !important;
  }
  [data-fees-table] [data-th]::before {
    content: attr(data-th);
    display: block;
    font-size: 10px;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 6px;
  }
  [data-fees-table] [data-th] {
    flex: initial !important;
    padding-right: 0 !important;
  }

  /* ── SIRE COMPARISON (offering page) ──────────────────────
     Label + two 160px stat cols won't fit at 393px. Stack the
     label above and let the two cols share the row evenly. */
  [data-sire-compare] > div {
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
  }
  [data-sire-compare] > div > div:last-child {
    flex: 0 0 100% !important;
    grid-template-columns: 1fr 1fr !important;
    text-align: left !important;
  }

  /* ── PRESS STRIP (offering hero footer) ───────────────────
     "FEATURED IN: …" + 3 outlets won't fit in one row at 393px.
     Wrap so the label sits above its outlets. */
  [data-press-strip] {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
}

/* ───── PHONE (≤ 480px) — tighter ────────────────────── */
@media (max-width: 480px) {
  section, footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section[style*="padding"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* On 4-col grids, go to 1-col on smallest phones */
  [style*="grid-template-columns: repeat(4"],
  [style*="gridTemplateColumns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  h1 { font-size: clamp(32px, 10vw, 44px) !important; }
  h2 { font-size: clamp(26px, 8vw, 36px) !important; }

  /* Stat cells: use 2-col tight grid */
  [class*="statRow"], [style*="border-top"][style*="border-bottom"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
}

/* ───── DESKTOP — hide mobile-only chrome ─────────────── */
@media (min-width: 769px) {
  .ff-burger { display: none !important; }
  .ff-drawer { display: none !important; }
  .ff-sticky-cta { display: none !important; }
}