/* ============================================================
   Tradewinds Media — Responsive overrides
   Inline pixel styles in JSX get overridden here with !important.
   Universal grid collapse: any 2+ column inline grid → single column on mobile.
   Breakpoints:  ≤1024 tablet   ≤768 mobile   ≤420 small mobile
   ============================================================ */

/* ---- Universal: never let anything overflow horizontally ---- */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Section padding: tame the 48–96px horizontals */
  section, footer, nav { padding-left: 32px !important; padding-right: 32px !important; }

  /* Big display headlines scale down */
  h1 { font-size: clamp(44px, 7.2vw, 72px) !important; line-height: 1 !important; }
  h2 { font-size: clamp(36px, 5.6vw, 56px) !important; line-height: 1.05 !important; }
  h3 { font-size: clamp(28px, 4.4vw, 44px) !important; line-height: 1.08 !important; }

  /* 4-col grids → 2-col */
  div[style*="grid-template-columns: repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col grids → 2-col */
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-col footer → 2-col */
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* All 2-col split layouts → stack */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.05fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1.3fr 1fr"],
  div[style*="grid-template-columns: 1.35fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 360px 1fr"],
  div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ============================================================
   MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Display type — keep it punchy but fit the viewport */
  h1 { font-size: clamp(40px, 9.5vw, 56px) !important; }
  h2 { font-size: clamp(30px, 8vw, 44px) !important; }
  h3 { font-size: clamp(26px, 6.8vw, 34px) !important; }
  p  { font-size: 17px !important; line-height: 1.55 !important; }

  /* All UI text (eyebrow, body, labels) gets a touch bigger on mobile */
  div[style*="font-family: var(--font-ui)"][style*="font-size: 14px"],
  div[style*="fontFamily: var(--font-ui)"][style*="fontSize: 14"],
  span[style*="font-size: 14px"],
  a[style*="font-size: 14px"] { font-size: 15px !important; }
  div[style*="font-size: 15px"],
  span[style*="font-size: 15px"],
  a[style*="font-size: 15px"] { font-size: 16px !important; }
  div[style*="font-size: 19px"][style*="font-family: var(--font-serif)"],
  p[style*="font-size: 19px"] { font-size: 17px !important; line-height: 1.6 !important; }

  /* Body padding scaling on the giant CTA / hero blocks */
  div[style*="padding: 88px 56px"],
  div[style*="padding: 72px 56px"],
  div[style*="padding: 96px 48px 88px"],
  div[style*="padding: 96px 48px"],
  div[style*="padding: 88px 48px"],
  div[style*="padding: 80px 48px"],
  div[style*="padding: 48px 56px"],
  div[style*="padding: 140px 48px 160px"],
  div[style*="padding: 140px 48px 120px"],
  div[style*="padding: 40px 48px 96px"] {
    padding: 40px 24px !important;
  }

  /* Universal: collapse ANY inline grid with 2+ columns to single column */
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns: repeat(2,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.05fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1.3fr 1fr"],
  div[style*="grid-template-columns: 1.35fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 360px 1fr"],
  div[style*="grid-template-columns: 1fr auto"],
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Buttons wrap and stay tappable */
  div[style*="display: flex"][style*="gap: 14px"],
  div[style*="display: flex"][style*="gap: 16px"],
  div[style*="display: flex"][style*="gap: 20px"] {
    flex-wrap: wrap !important;
  }

  /* Map/ChatGPT visuals — kill min-height when stacked */
  div[style*="grid-template-columns: 1.05fr 1fr"] { min-height: 0 !important; }

  /* Eyebrow text + meta strips wrap nicely */
  span[style*="margin-left: 12px"] { margin-left: 0 !important; margin-top: 8px; display: block !important; }

  /* Buttons in CTA sections — full-width tap */
  a[href="/book"] > div,
  a[href*="case-studies"] > div { width: 100% !important; box-sizing: border-box; }

  /* Trust strip on contact page: stack */
  div[style*="flex-wrap: wrap"][style*="justify-content: space-between"] > div {
    border-right: none !important;
    padding-right: 0 !important;
    flex: 1 1 100% !important;
  }

  /* Footer legal strip stacks */
  footer div[style*="justify-content: space-between"][style*="border-top"] {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    align-items: center !important;
  }
  footer div[style*="border-top"] span[style*="display: flex"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Footer: clean mobile layout — logo+tagline centered, link columns left-aligned */
  footer { padding-top: 48px !important; padding-bottom: 24px !important; }
  footer > div:first-of-type {
    gap: 36px !important;
  }
  /* First column = brand: centered */
  footer > div:first-of-type > div:first-child {
    text-align: center !important;
  }
  footer > div:first-of-type > div:first-child > a[href="/"] { display: inline-block !important; }
  footer > div:first-of-type img[alt*="Tradewinds"] { margin: 0 auto 18px !important; }
  footer > div:first-of-type p { margin: 0 auto !important; max-width: 320px !important; font-size: 15px !important; }
  /* Hide the dim "Resources" mini-column on mobile (Playbooks/Blog go nowhere yet) */
  footer > div:first-of-type > div:nth-of-type(3) { display: none !important; }

  /* Calendly embed shrink */
  .calendly-inline-widget { height: 620px !important; }

  /* Big radial blooms — tone down so they don't overflow on small screens */
  div[style*="width: 540px"][style*="height: 540px"],
  div[style*="width: 560px"][style*="height: 560px"],
  div[style*="width: 480px"][style*="height: 480px"],
  div[style*="width: 420px"][style*="height: 420px"],
  div[style*="width: 360px"][style*="height: 360px"],
  div[style*="width: 320px"][style*="height: 320px"],
  div[style*="width: 280px"][style*="height: 280px"],
  div[style*="width: 260px"][style*="height: 260px"] {
    width: 220px !important;
    height: 220px !important;
  }

  /* Owner portrait — cap aspect ratio so it doesn't dominate the screen */
  div[style*="aspect-ratio: 4 / 5"],
  div[style*="aspectRatio: 4 / 5"] {
    max-width: 360px;
    margin: 0 auto;
  }

  /* Inline display titles inside cards/components — scale down too */
  div[style*="font-size: 82px"],
  div[style*="fontSize: 82px"] { font-size: 44px !important; }
  div[style*="font-size: 72px"],
  div[style*="fontSize: 72px"] { font-size: 40px !important; }
  div[style*="font-size: 56px"],
  div[style*="fontSize: 56px"] { font-size: 32px !important; }
  div[style*="font-size: 52px"],
  div[style*="fontSize: 52px"] { font-size: 30px !important; }
  div[style*="font-size: 44px"],
  div[style*="fontSize: 44px"] { font-size: 28px !important; }

  /* Owner section: center the trusted-by strip + tighten right column padding */
  section div[style*="padding: 22px 26px"] { padding: 18px 18px !important; }
  section div[style*="padding: 28px 26px"] { padding: 22px 18px !important; }
  section div[style*="padding: 34px 40px"] { padding: 24px 20px !important; }

  /* Tables/rows that use justify-content: space-between with k/v layout */
  div[style*="justify-content: space-between"][style*="gap: 16"] {
    flex-wrap: wrap !important;
  }

  /* About-page LocationCard CTA — refit for mobile */
  /* The card itself: less padding, stack content + button */
  section div[style*="background: var(--tw-ocean-950)"][style*="padding: 48px 56px"] {
    padding: 32px 24px !important;
    gap: 24px !important;
    text-align: center;
  }
  /* The icon + text row inside it — stack the icon above text and center */
  section div[style*="background: var(--tw-ocean-950)"] > div[style*="gap: 22px"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
  }
  /* Headline inside the card scales down */
  section div[style*="background: var(--tw-ocean-950)"] div[style*="font-size: 30px"] {
    font-size: 22px !important;
    max-width: 100% !important;
  }
  /* Body copy under it */
  section div[style*="background: var(--tw-ocean-950)"] div[style*="max-width: 560px"] {
    max-width: 100% !important;
  }
  /* Allow the "Book an intro call" button to wrap onto its own line, full width */
  section a[href="/book"][style*="white-space: nowrap"] {
    white-space: normal !important;
    display: block !important;
  }

  /* Force any hardcoded max-widths (text-only) to fit */
  p[style*="max-width"], div[style*="max-width: 580"], div[style*="max-width: 620"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   SMALL MOBILE (≤420px) — tighten further
   ============================================================ */
@media (max-width: 420px) {
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }

  /* Tighter inner padding everywhere */
  div[style*="padding: 88px 56px"],
  div[style*="padding: 72px 56px"],
  div[style*="padding: 96px 48px 88px"],
  div[style*="padding: 96px 48px"],
  div[style*="padding: 88px 48px"],
  div[style*="padding: 48px 56px"] {
    padding: 32px 18px !important;
  }
}