/* ============================================================
   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; }

/* ---- Footer social buttons: static glow ---- */
.tw-social {
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(28,192,240,0.12), 0 0 16px rgba(28,192,240,0.40);
  transition: all .25s ease;
}
.tw-social:hover {
  background: rgba(28,192,240,0.22) !important;
  border-color: rgba(28,192,240,0.85) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(28,192,240,0.18), 0 0 26px rgba(28,192,240,0.7) !important;
  transform: translateY(-2px);
}
/* Show desktop row on >= 769px, mobile row below */
@media (max-width: 768px) {
  .tw-social-row--desktop { display: none !important; }
  .tw-social-row--mobile  { display: flex !important; }
}

/* ============================================================
   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.
     :not() guard skips the small eyebrow-style H1 in the hero
     (font-size:11px tracked all-caps), which must stay tiny. */
  h1:not([style*="font-size: 11"]) { 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; }
  /* Hero headline (a div role=heading aria-level=2) */
  .tw-hero-h1 {
    font-size: clamp(44px, 7.2vw, 72px) !important;
    line-height: 1 !important;
  }

  /* Card titles inside bordered/rounded cards: keep their inline-defined size, don't inflate */
  div[style*="border-radius: 18"] h3,
  div[style*="border-radius: 16"] h3,
  div[style*="border-radius: 14"] h3 {
    font-size: 22px !important;
    line-height: 1.15 !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: 1fr 1.2fr"],
  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:not([style*="font-size: 11"]) { 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; }
  .tw-hero-h1 {
    font-size: clamp(40px, 9.5vw, 56px) !important;
    line-height: 1 !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: 1fr 1.2fr"],
  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; }

  /* ChatGPT visual: outer fixed-height container + absolute "#1 pick" pill
     overflow on narrow widths. Let it grow vertically and reposition the pill. */
  div[style*="height: 420px"][style*="overflow: hidden"][style*="background: rgb(255, 255, 255)"] {
    height: auto !important;
    min-height: 360px !important;
    overflow: visible !important;
  }
  /* The "AI's #1 pick" floating pill - keep it inside the card on small screens */
  div[style*="height: 420px"][style*="overflow: hidden"] > div[style*="position: absolute"][style*="right: 14px"][style*="top: 50px"] {
    right: 8px !important;
    top: 44px !important;
    padding: 5px 10px 5px 8px !important;
    font-size: 10px !important;
  }
  div[style*="height: 420px"][style*="overflow: hidden"] > div[style*="position: absolute"][style*="right: 14px"][style*="top: 50px"] span[style*="font-size: 11px"] {
    font-size: 9.5px !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^="https://form.typeform.com"] > 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 - everything centered */
  footer { padding-top: 48px !important; padding-bottom: 24px !important; text-align: center !important; }
  footer > div:first-of-type {
    gap: 36px !important;
    justify-items: center !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; }
  /* Link columns: center their headings + lists */
  footer > div:first-of-type > div { text-align: center !important; }
  footer > div:first-of-type ul { align-items: center !important; }
  /* CTA card: center inner contents */
  footer > div:first-of-type > a[href^="https://form.typeform.com"] { width: 100% !important; max-width: 360px !important; }
  footer > div:first-of-type > a[href^="https://form.typeform.com"] > div { text-align: center !important; }
  footer > div:first-of-type > a[href^="https://form.typeform.com"] > div > div { margin-left: auto !important; margin-right: auto !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; }
  /* Bottom legal strip: already stacks via earlier rule - also center */
  footer > div:last-of-type { text-align: center !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^="https://form.typeform.com"][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:not([style*="font-size: 11"]) { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }
  .tw-hero-h1 {
    font-size: 40px !important;
    line-height: 1 !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;
  }
}


/* ============================================================
   COMPARISON TABLE - desktop / mobile swap
   ============================================================ */
.tw-cmp-mobile { display: none; }
.tw-cmp-desktop { display: block; }

@media (max-width: 768px) {
  .tw-cmp-desktop { display: none !important; }
  .tw-cmp-mobile  { display: block !important; }

  /* Force the scroller to stay a single horizontal row.
     Selector is doubled (.tw-cmp-mobile .tw-cmp-scroller.tw-cmp-scroller)
     to outrank the universal `div[style*="display:flex"][style*="gap:..."]`
     wrap rule which has attribute-selector specificity. */
  .tw-cmp-mobile .tw-cmp-scroller.tw-cmp-scroller {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .tw-cmp-mobile .tw-cmp-scroller.tw-cmp-scroller::-webkit-scrollbar {
    display: none;
  }
  /* Cards must not shrink - keep their 86% width so they overflow and scroll */
  .tw-cmp-mobile .tw-cmp-scroller.tw-cmp-scroller > .tw-cmp-card {
    flex: 0 0 86% !important;
  }
}


/* ============================================================
   LOGO MARQUEE (home) - past-agency consulting logos
   ============================================================ */
.tw-logos { background: var(--bg-page); padding: 40px 0 46px; overflow: hidden; }
.tw-logos__head { max-width: 1240px; margin: 0 auto 28px; padding: 0 48px; text-align: center; }
.tw-logos__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tw-ocean-600); margin-bottom: 10px; }
.tw-logos__note { font-family: var(--font-ui); font-size: 13.5px; color: var(--fg-3); max-width: 640px; margin: 0 auto; line-height: 1.5; }
.tw-logos__viewport { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tw-logos__track { display: flex; width: max-content; align-items: center; animation: tw-logos-scroll 50s linear infinite; }
.tw-logos__viewport:hover .tw-logos__track { animation-play-state: paused; }
.tw-logos__item { flex: 0 0 auto; padding: 0 40px; display: flex; align-items: center; }
.tw-logos__item img { height: 42px; width: auto; max-width: 165px; object-fit: contain; filter: grayscale(1); opacity: 0.5; transition: opacity .25s var(--ease-out), filter .25s var(--ease-out); }
.tw-logos__item img:hover { opacity: 1; filter: grayscale(0); }
@keyframes tw-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tw-logos__track { animation: none; } }
@media (max-width: 768px) {
  .tw-logos__head { padding: 0 20px; }
  .tw-logos__item { padding: 0 26px; }
  .tw-logos__item img { height: 34px; max-width: 130px; }
}


/* ============================================================
   BUYER-JOURNEY GRID (home — HowPeopleFind)
   ============================================================ */
.tw-hpf-grid { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 1024px) {
  .tw-hpf-grid { grid-template-columns: 1fr; gap: 14px; }
  .tw-hpf-arrow { transform: rotate(90deg); margin: 0 auto; }
}