/* ============================================================================
   LAYOUT OVERHAUL — final responsive layer (loaded LAST, wins every tie)
   ----------------------------------------------------------------------------
   Scope: layout, alignment, responsive behaviour, spacing, motion ONLY.
   No content, copy, imagery or brand colours are altered.

   Strategy
   · Mobile-first: base rules target phones; enhancements via min-width
     breakpoints — tablet ≥768px, desktop ≥1024px (plus ≥480px for 2-up grids).
   · Macro structure stays CSS Grid; component internals stay Flexbox.
   · 8px spacing system: every padding/margin/gap is a multiple of 8
     (4px allowed for hairline gaps).
   · All motion uses transform/opacity only (GPU-composited, no reflow).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · FOUNDATIONS — overflow guards, readable type, spacing tokens
   --------------------------------------------------------------------------- */
:root {
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-13: 104px;
}

/* Body copy never dips below 16px / 1.55 on phones (no pinch-zoom needed) */
body {
  font-size: 16px;
  line-height: 1.55;
}

/* Nothing may force a horizontal scrollbar */
html, body { overflow-x: clip; }
img, video, iframe, svg, canvas { max-width: 100%; }
h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; }

/* Grid/flex children must be allowed to shrink below their content width —
   the classic cause of phone-width overflow */
.nav-inner > *,
.section-head > *,
.product-grid > *,
.tier-grid > *,
.tour-grid > *,
.cattle-cards > *,
.footer-grid > *,
.cams-layout > *,
.about-contact-grid > * { min-width: 0; }

/* Centered content column — one consistent measure everywhere */
.container {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-2);
}

/* ---------------------------------------------------------------------------
   1 · VERTICAL RHYTHM — 8px-system section spacing, mobile-first
   --------------------------------------------------------------------------- */
.section { padding-block: var(--sp-6); }             /* 48px on phones   */
.section-head { margin-bottom: var(--sp-4); }

/* About sub-sections keep even rhythm on phones */
#about-contact, #about-team, #about-testimonials, #about-social {
  padding-top: var(--sp-6) !important;
}

/* ---------------------------------------------------------------------------
   2 · MACRO GRIDS — single column base (phones), enhanced upward
   --------------------------------------------------------------------------- */
.product-grid,
.tier-grid,
.tour-grid,
.cattle-cards { display: grid !important; grid-template-columns: 1fr !important; gap: var(--sp-2) !important; }

.cams-layout          { grid-template-columns: 1fr !important; gap: var(--sp-3) !important; }
.about-contact-grid   { grid-template-columns: 1fr !important; gap: var(--sp-4) !important; }
.footer-grid          { grid-template-columns: 1fr; gap: var(--sp-5); }

/* Section headings stack cleanly on phones */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

/* Tour cards read better wide-format when stacked */
.tour-card { aspect-ratio: 16/11; }

/* Hero: content column centered, stats stay tidy */
.hero .container { width: 100%; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding-top: var(--sp-3);
}

/* News controls: rows wrap instead of overflowing narrow screens */
#news-controls > div { flex-wrap: wrap; }
#news-search { min-width: min(220px, 100%); flex: 1 1 220px; }

/* Map iframe scales with its card */
.about-map iframe { width: 100%; }

/* ≥480px — small-landscape phones: product-style cards go 2-up */
@media (min-width: 480px) {
  .product-grid, .cattle-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tour-card { aspect-ratio: 4/5; }
}

/* ≥768px — TABLET */
@media (min-width: 768px) {
  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-10); }          /* 80px */

  .section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }

  .product-grid, .cattle-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: var(--sp-3) !important;
  }
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-3) !important; }
  .tour-grid { gap: var(--sp-3) !important; }

  .about-contact-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .hero-stats { grid-template-columns: repeat(3, auto); gap: var(--sp-5); }

  #about-contact, #about-team, #about-testimonials, #about-social {
    padding-top: var(--sp-10) !important;
  }
}

/* ≥1024px — DESKTOP */
@media (min-width: 1024px) {
  .section { padding-block: var(--sp-13); }          /* 104px */

  .product-grid, .cattle-cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
  .tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .tour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .cams-layout { grid-template-columns: 1.6fr 1fr !important; }

  /* Footer: 3 content blocks → 3 columns (was declared for 5, leaving
     two empty tracks and a lopsided footer) */
  .footer-grid { grid-template-columns: 1.4fr 1.2fr 1fr; gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------------
   3 · SMALL PHONES (<360px) — nothing overflows, everything stays tappable
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  #news-controls .btn { flex: 1 1 auto; justify-content: center; white-space: normal; }
  .tabs { gap: var(--sp-1); }
}
@media (max-width: 360px) {
  .container { padding-inline: 12px; }
  .hero h1 { font-size: 2.1rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .hero-stats .stat strong { font-size: 1.4rem; min-height: 0; }
  .section-head h2 { font-size: 1.7rem; }
  .strip-inner { justify-content: flex-start; gap: var(--sp-1) var(--sp-2); }
  .cart-sidebar { width: 100vw; }
  .chat-widget { width: calc(100vw - 12px); right: 6px; }
}

/* ---------------------------------------------------------------------------
   4 · TOUCH TARGETS — ≥44px on every interactive element
   --------------------------------------------------------------------------- */
.btn,
.tab,
.add-to-cart,
.inquire-wa,
.news-filter-btn,
.tm-btn,
.qbtn,
.choose-tier,
.cart-checkout,
.mc-menu-toggle,
.mc-search-btn,
.news-arrow, .tcar-arrow {
  min-height: 44px;
}
.tab, .qbtn, .news-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-btn, .hamburger, .close-cart, .chat-header button {
  min-width: 44px;
  min-height: 44px;
}
.dropdown a, .mobile-sheet details a, .footer a { min-height: 44px; display: flex; align-items: center; }
.footer .brand, .footer a.brand { display: flex; }
.mobile-sheet details summary { min-height: 44px; }
.qty-ctrl button { width: 32px; height: 32px; }

/* ---------------------------------------------------------------------------
   5 · MOTION — GPU-only micro-interactions + keyboard focus
   --------------------------------------------------------------------------- */
/* Buttons: subtle lift on hover, press-down on tap (transform only) */
.btn, .add-to-cart, .tab, .qbtn, .news-filter-btn, .tm-btn {
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn:active, .add-to-cart:active, .tab:active, .qbtn:active,
.news-filter-btn:active, .tm-btn:active, .cart-btn:active, .chat-fab:active {
  transform: translateY(0) scale(.97);
}

/* Cards: hover lift already defined upstream — keep transitions composited */
.product-card, .tier, .tour-card, .tm-card, .news-post {
  transition-property: transform, box-shadow, border-color;
  transition-duration: .25s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* Visible keyboard focus everywhere (uses existing brand green) */
:focus-visible {
  outline: 2px solid var(--primary-green, #3C6E54);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scroll-reveal (elements with .reveal): opacity + translateY only.
   Base state / .in state are defined upstream; this locks the properties
   to compositor-friendly ones and adds a gentle default for phones. */
.reveal { transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.2,1); }

/* Reduced motion: kill transforms & long transitions site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   6 · FIXED OVERLAYS — keep clear of iOS safe areas
   --------------------------------------------------------------------------- */
.chat-fab {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}
.chat-widget { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .chat-fab { bottom: 24px; right: 24px; }
  .chat-widget { bottom: 96px; right: 24px; }
}