/* BTC — mobile optimisation pass
   Loads after theme.css. Targets phones (≤768px) and very small screens (≤480px / ≤375px).
   Uses clamp() so type and spacing scale smoothly without hard breakpoint jumps. */

/* ===== Global: prevent horizontal scroll, smooth scaling ===== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
}
* { min-width: 0; } /* prevent flex/grid blowouts from long words */
img, video, figure { max-width: 100%; height: auto; }

/* ===== Tap target hygiene ===== */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"], select { min-height: 44px; }
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-size: 16px !important; /* prevents iOS Safari auto-zoom */
  }
}

/* ===== Type scaling — fluid across all viewports, optimised caps ===== */
.text-display-xl, .font-display-xl {
  font-size: clamp(36px, 5.2vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}
.text-display-xl-mobile, .font-display-xl-mobile {
  font-size: clamp(32px, 6vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}
.text-headline-lg, .font-headline-lg {
  font-size: clamp(28px, 4.2vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}
.text-headline-lg-mobile, .font-headline-lg-mobile {
  font-size: clamp(24px, 4vw, 30px) !important;
  line-height: 1.2 !important;
}
.text-headline-md, .font-headline-md {
  font-size: clamp(20px, 2.6vw, 28px) !important;
  line-height: 1.25 !important;
}
.text-body-lg, .font-body-lg {
  font-size: clamp(15px, 1.3vw, 17px) !important;
  line-height: 1.6 !important;
}
.text-body-md, .font-body-md {
  font-size: clamp(14px, 1vw, 15px) !important;
  line-height: 1.65 !important;
}

/* ===== Home hero — guarantee no collision with the fixed navbar ===== */
section[aria-label="BTC hero"] {
  height: 100svh !important;
  min-height: 620px !important;
  padding-top: 100px !important;
}
section[aria-label="BTC hero"] > .relative.z-10 {
  justify-content: flex-end !important;
  padding-bottom: clamp(48px, 8vh, 96px) !important;
}
section[aria-label="BTC hero"] h1 {
  max-width: 22ch;
}
section[aria-label="BTC hero"] p {
  max-width: 56ch;
}
@media (max-height: 760px) {
  section[aria-label="BTC hero"] .text-display-xl {
    font-size: clamp(32px, 4.6vw, 54px) !important;
  }
  section[aria-label="BTC hero"] p {
    font-size: 15px !important;
  }
}
@media (max-width: 768px) {
  section[aria-label="BTC hero"] {
    padding-top: 84px !important;
    min-height: 560px !important;
  }
  /* Tighten the content stack so the video shows and nothing overlaps */
  section[aria-label="BTC hero"] > .relative.z-10 {
    padding-bottom: 36px !important;
  }
  section[aria-label="BTC hero"] .font-label-caps {
    margin-bottom: 12px !important;
    font-size: 10px !important;
  }
  section[aria-label="BTC hero"] h1 {
    font-size: clamp(28px, 7.6vw, 36px) !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }
  section[aria-label="BTC hero"] p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
  }
  /* Buttons: side-by-side, compact */
  section[aria-label="BTC hero"] .flex.flex-col.sm\:flex-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  section[aria-label="BTC hero"] .flex.flex-col.sm\:flex-row > a {
    padding: 12px 18px !important;
    font-size: 10px !important;
    width: auto !important;
    flex: 1 1 auto;
  }
  /* Compliance line was overlapping the buttons — move it out of the way */
  section[aria-label="BTC hero"] p.absolute {
    position: static !important;
    margin-top: 16px !important;
    text-align: left !important;
    font-size: 9px !important;
  }
}
@media (max-width: 380px) {
  section[aria-label="BTC hero"] h1 {
    font-size: 26px !important;
  }
  section[aria-label="BTC hero"] p { font-size: 13px !important; }
}

/* ===== Spacing scale-down ===== */
@media (max-width: 1024px) {
  .py-section-padding { padding-top: clamp(48px, 8vw, 90px) !important; padding-bottom: clamp(48px, 8vw, 90px) !important; }
  .pt-section-padding { padding-top: clamp(48px, 8vw, 90px) !important; }
  .pb-section-padding { padding-bottom: clamp(48px, 8vw, 90px) !important; }
  .mt-section-padding { margin-top: clamp(40px, 6vw, 80px) !important; }
  .mb-section-padding { margin-bottom: clamp(40px, 6vw, 80px) !important; }
}
@media (max-width: 768px) {
  .px-grid-margin { padding-left: 18px !important; padding-right: 18px !important; }
  .gap-grid-margin { gap: 18px !important; }
  .gap-grid-gutter { gap: 16px !important; }
  .gap-stack-lg { gap: 20px !important; }
  .mb-stack-lg { margin-bottom: 20px !important; }
  .mt-stack-lg { margin-top: 20px !important; }
}
@media (max-width: 480px) {
  .px-grid-margin { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ===== Nav offset under floating pill ===== */
@media (max-width: 768px) {
  main { padding-top: 92px !important; }
}
@media (max-width: 480px) {
  main { padding-top: 84px !important; }
}

/* ===== Home hero (with video) ===== */
@media (max-width: 768px) {
  /* The hero section uses min-h-[85vh] which is too tall on small phones */
  section.min-h-\[85vh\] { min-height: auto !important; padding-bottom: 24px; }
  /* Stack: text first then visual */
  section.min-h-\[85vh\] .col-span-1.md\:col-span-6:last-child {
    height: 50vh !important;
    min-height: 320px;
    max-height: 420px;
    margin-top: 24px;
  }
  section.min-h-\[85vh\] video { object-position: center; }
  /* CTA stack on mobile */
  section.min-h-\[85vh\] .flex.flex-col.sm\:flex-row > a { width: 100%; justify-content: center; }
}

/* ===== About hero (full-bleed image) ===== */
@media (max-width: 768px) {
  section[aria-label="About Best Tobacco Company"] {
    height: 75vh !important;
    min-height: 480px !important;
  }
  section[aria-label="About Best Tobacco Company"] h1 {
    margin-bottom: 16px !important;
  }
}
@media (max-width: 480px) {
  section[aria-label="About Best Tobacco Company"] {
    height: 68vh !important;
    min-height: 420px !important;
  }
}

/* ===== Stats band — keep readable on small screens ===== */
@media (max-width: 480px) {
  section[aria-label="BTC at a glance"] > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  section[aria-label="BTC at a glance"] .font-display-xl {
    font-size: 32px !important;
    line-height: 1 !important;
  }
}

/* ===== Figures / placeholder image cards — let them breathe vertically ===== */
@media (max-width: 768px) {
  .btc-figure {
    width: 100% !important;
  }
  /* Convert fixed-height containers to aspect-ratio so they don't blow up */
  .h-\[480px\], .h-\[420px\], .h-\[360px\], .h-\[228px\] {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }
  .h-\[60vh\], .h-\[90vh\] {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 320px;
  }
  /* Operations strip — stack the right column underneath the left */
  section[aria-label="Operational imagery"] .col-span-1.md\:col-span-5 { gap: 16px !important; }
}

/* ===== Cards / product strips ===== */
@media (max-width: 768px) {
  .grid.md\:grid-cols-3, .grid.md\:grid-cols-4, .grid.lg\:grid-cols-4 {
    /* let Tailwind's own grid handle stacking; only enforce gap */
    gap: 16px !important;
  }
  /* Force any horizontal card row to wrap */
  .flex.overflow-x-auto { flex-wrap: wrap; overflow-x: visible !important; }
  .flex.overflow-x-auto > * { min-width: 0 !important; flex: 1 1 100%; }
}

/* ===== Asymmetric "stacked context cards" with ml-8/ml-16 — flatten on mobile ===== */
@media (max-width: 768px) {
  .ml-0.md\:ml-8, .ml-0.md\:ml-16 { margin-left: 0 !important; }
}

/* ===== Trade Partner / Persona / Cost cards — equalise padding ===== */
@media (max-width: 768px) {
  .p-10, .p-12 { padding: 24px !important; }
  .p-8 { padding: 20px !important; }
}

/* ===== Contact form ===== */
@media (max-width: 768px) {
  form .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 20px !important; }
  form input, form select, form textarea { width: 100% !important; }
  form button[type="submit"] { width: 100% !important; }
}

/* ===== Footer ===== */
@media (max-width: 768px) {
  footer .gap-x-12 { column-gap: 24px !important; }
  footer .col-span-12.md\:col-span-8 { justify-content: flex-start !important; }
  footer .flex-col.md\:flex-row { gap: 14px !important; }
}

/* ===== CardNav — make the pill comfortable on phones ===== */
@media (max-width: 768px) {
  .card-nav-container { width: 94% !important; top: 0.8em !important; max-width: 100% !important; }
  .card-nav-top { padding: 0.4rem 0.8rem !important; }
  .logo-container .logo img { height: 32px !important; }
  .hamburger-line { width: 24px !important; }
}
@media (max-width: 480px) {
  .card-nav-container { width: 96% !important; }
  .logo-container .logo img { height: 28px !important; }
}

/* ===== Age gate — already responsive, just bump for tiny screens ===== */
@media (max-width: 380px) {
  .btc-age-gate__panel { padding: 24px 18px !important; }
  .btc-age-gate__heading { font-size: 16px !important; }
  .btc-age-gate__sub { font-size: 13px !important; margin-bottom: 22px !important; }
  .btc-age-gate__logo { max-width: 180px !important; max-height: 80px !important; }
  .btc-age-gate__input { font-size: 18px !important; padding: 12px 6px !important; }
}

/* ===== Cookie banner — stack cleanly on phones ===== */
@media (max-width: 640px) {
  .btc-cookie { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important; }
  .btc-cookie__btn { padding: 12px 14px !important; font-size: 11px !important; }
  .btc-cookie__btn--text { order: 3; flex: 1 1 100% !important; text-align: center !important; }
}

/* ===== Hero column stacking ===== */
@media (max-width: 768px) {
  .col-span-1.md\:col-span-6,
  .col-span-1.md\:col-span-5,
  .col-span-1.md\:col-span-7 {
    grid-column: span 1 / span 1 !important;
  }
}

/* ===== Tables / overflow blocks ===== */
@media (max-width: 768px) {
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ===== Iframes (maps, embeds) ===== */
@media (max-width: 768px) {
  iframe { width: 100% !important; max-width: 100% !important; height: auto; min-height: 240px; }
}

/* ===== Hide non-essential decorative elements on tiny screens ===== */
@media (max-width: 480px) {
  /* The huge "01/02/03/04" numerals behind Core Principles look cramped on small phones */
  .btc-figure .btc-caption { font-size: 10px !important; padding: 10px 12px !important; }
}

/* ===== Touch-friendly hover states ===== */
@media (hover: none) {
  .card-hover-border:hover { transform: none !important; }
  .btc-figure:hover img { transform: none !important; }
}