/* ═══════════════════════════════════════════════════════════════════
   WinterBrooke Bar — Global Responsive Stylesheet
   Loaded after page-specific <style> blocks so it safely overrides.

   Fixes:
   1. Large screens (34"+ ultrawide, 1400px+) — content never stretches
      wall-to-wall; auto-centering formula keeps readable line lengths.
   2. Tablet polish (768–1199px) — grids collapse, spacing tightens.
   3. Mobile polish (≤768px) — layout, spacing, and type improvements.
   4. Small mobile (≤480px) — extra type scale and spacing reduction.
   ═══════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   LARGE SCREEN CONTENT CAPPING  (min-width: 1400px)

   Formula: padding = max(base, (viewport − 1320px) / 2)

   • At 1448px viewport  → padding = 64px  (base, unchanged)
   • At 1600px viewport  → padding = 140px → content ≈ 1320px
   • At 2560px viewport  → padding = 620px → content ≈ 1320px
   • At 3440px viewport  → padding = 1060px → content ≈ 1320px

   Nav uses the same formula with 64px base.
   Hero inner areas use 80px base to match their wider starting style.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1400px) {

  /* Navigation bar */
  nav {
    padding-left:  max(64px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(64px, calc((100vw - 1320px) / 2)) !important;
  }

  /* ── Main content sections (64px base) ── */
  .services,
  .difference,
  .gallery,
  .testimonials,
  .how-section,
  .tasting-section,
  .compliance-section,
  .final-cta,
  .faq-section,
  .flat-rate-section,
  .always-included,
  .testimonials-section,
  .testi-section,
  .pricing-calc-section,
  .what-section,
  .intro-section,
  .included-section,
  .trust-strip,
  .process-section,
  .contact-section,
  .cta-section,
  .cta-strip,
  .blog-section,
  .gate-section,
  .results-section,
  .calc-final-cta,
  .footnote,
  .legal-content,
  .portfolio-section,
  .about-section,
  .menu-section {
    padding-left:  max(64px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(64px, calc((100vw - 1320px) / 2)) !important;
  }

  /* ── Hero content areas (80px base) ── */
  .hero-inner,
  .about-hero-content,
  .calc-hero,
  .calculator-wrapper {
    padding-left:  max(80px, calc((100vw - 1200px) / 2)) !important;
    padding-right: max(80px, calc((100vw - 1200px) / 2)) !important;
  }

  /* ── Left-aligned hero text columns ──────────────────────────
     These elements set their own max-width AND inherit box-sizing:border-box,
     so symmetric gutter padding is subtracted from the text column itself.
     On wide screens that drove the column to zero and stacked one word per
     line. Fix: pad on the left only, and grow max-width by the same amount
     so the readable column stays a constant width at any viewport. */
  .hero-content,
  .page-hero-content {
    padding-left:  max(80px, calc((100vw - 1200px) / 2)) !important;
    padding-right: 40px !important;
    max-width: calc(640px + max(80px, (100vw - 1200px) / 2)) !important;
  }

  /* ── Blog hero (centered, no own max-width) ── */
  .blog-hero-content {
    padding-left:  max(80px, calc((100vw - 1100px) / 2)) !important;
    padding-right: max(80px, calc((100vw - 1100px) / 2)) !important;
  }

  /* ── Article hero: left-aligned column, same collapse fix as above ── */
  .article-hero-content {
    padding-left:  max(80px, calc((100vw - 1100px) / 2)) !important;
    padding-right: 40px !important;
    max-width: calc(740px + max(80px, (100vw - 1100px) / 2)) !important;
  }

  /* ── Footer: cap inner content so background stays full-width ── */
  .footer-top,
  .footer-bottom {
    max-width: 1400px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }

  /* ── Trust bar ── */
  .trust-bar {
    padding-left:  max(64px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(64px, calc((100vw - 1320px) / 2)) !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   TABLET  (769px – 1024px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Blog article: collapse sidebar below article */
  .article-layout {
    grid-template-columns: 1fr !important;
    padding: 48px 40px !important;
    gap: 40px !important;
  }

  /* Blog index: 2-column grid */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .blog-card.featured {
    grid-column: span 2 !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Compare grids in blog articles */
  .compare-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   MOBILE  (≤768px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Blog index ── */
  .blog-hero { height: 360px !important; }
  .blog-hero-content {
    padding: 0 20px 48px !important;
  }
  .blog-hero-content h1 { font-size: 34px !important; }
  .blog-section { padding: 48px 20px !important; }
  .blog-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .blog-card.featured {
    grid-column: 1 !important;
    display: block !important;
  }
  .blog-card.featured .featured-image { height: 240px !important; }

  /* ── Blog articles ── */
  .article-hero { height: 340px !important; }
  .article-hero-content {
    padding: 0 20px 40px !important;
  }
  .article-hero-content h1 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  .article-layout {
    grid-template-columns: 1fr !important;
    padding: 36px 20px !important;
    gap: 32px !important;
  }
  .article-body h2 { font-size: 26px !important; }
  .article-body h3 { font-size: 20px !important; }

  /* ── Article special components ── */
  .compare-grid { grid-template-columns: 1fr !important; }
  .smoke-steps { margin: 20px 0 !important; }
  .budget-table { font-size: 12px !important; }
  .budget-table thead th,
  .budget-table td { padding: 10px 10px !important; }
  .timeline-step { gap: 16px !important; }

  /* ── Sidebar widgets ── */
  .article-sidebar .sidebar-widget { margin-bottom: 20px !important; }

  /* ── Alcohol calculator ── */
  .calc-hero { padding: 48px 20px !important; }
  .calc-hero h1 { font-size: 34px !important; }
  .gate-section,
  .results-section,
  .calc-final-cta { padding: 48px 20px !important; }
  .wizard-section { padding: 32px 20px !important; }
  .calculator-wrapper { padding: 24px 16px !important; }
  .acalc-card-grid { grid-template-columns: 1fr !important; }
  .gate-form-row { grid-template-columns: 1fr !important; }

  /* ── Pricing page ── */
  .pricing-calc-section { padding: 48px 20px !important; }
  .flat-rate-section,
  .always-included,
  .testimonials-section,
  .faq-section { padding: 48px 20px !important; }
  .always-grid { grid-template-columns: 1fr 1fr !important; }
  .pcalc-addons { grid-template-columns: 1fr !important; }
  .pcalc-gate-row { grid-template-columns: 1fr !important; }

  /* ── City page sections ── */
  .intro-section { padding: 48px 20px !important; }
  .intro-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .intro-image { height: 260px !important; }
  .included-section { padding: 48px 20px !important; }
  .included-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .testi-section { padding: 48px 20px !important; }
  .testi-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cta-section { padding: 56px 20px !important; }
  .trust-strip {
    height: auto !important;
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
  }
  .trust-strip-stat {
    flex: 0 0 50% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(248,249,250,0.08) !important;
    padding: 12px 16px !important;
  }

  /* ── Hero CTA buttons ── */
  .hero-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ── CTA strip ── */
  .cta-strip { padding: 48px 20px !important; }

  /* ── Legal / privacy / terms ── */
  .legal-content { padding: 48px 20px !important; }

  /* ── Portfolio ── */
  .portfolio-section { padding: 48px 20px !important; }

  /* ── Menu page ── */
  .menu-section { padding: 48px 20px !important; }

  /* ── About page ── */
  .about-section { padding: 48px 20px !important; }

  /* ── Footer ── */
  .footer-top {
    grid-template-columns: 1fr !important;
    padding: 40px 20px 24px !important;
    gap: 28px !important;
  }
  .footer-bottom {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   SMALL MOBILE  (≤480px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Article hero heading */
  .article-hero-content h1 { font-size: 24px !important; }

  /* Trust strip: full-width stats */
  .trust-strip-stat { flex: 0 0 100% !important; }

  /* Always-included 2-col → 1-col on tiny screens */
  .always-grid { grid-template-columns: 1fr !important; }

  /* Budget table on tiny screens: allow horizontal scroll */
  .budget-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Nav open menu links: larger tap target */
  .nav-links a { padding: 16px 0 !important; }

  /* Blog section heading */
  .blog-hero-content h1 { font-size: 28px !important; }
}