/* =========================================================
   EcomCalc Theme — Responsive Rules
   Breakpoints: 1920 / 1440 / 1366 / 1024 / 768 / 430 / 390 / 375 / 360 / 320
   Mobile-first overrides layered on top of main.css.
   ========================================================= */

/* Large desktop: give the container a touch more room */
@media (min-width:1920px){
  :root{ --container:1360px; }
}

/* 1440 is the default design target in main.css — no overrides needed */

/* 1366 laptop: slightly tighten side padding */
@media (max-width:1400px){
  .wrap{ padding:0 28px; }
}

/* Tablet landscape (1024) and below */
@media (max-width:1024px){
  .wrap{ padding:0 24px; }

  .primary-nav{ display:none; }
  .nav-toggle{ display:flex; }

  .hero .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .hero h1{ font-size:42px; }
  .hero-visual{ max-width:460px; }

  .tools-grid{ grid-template-columns:repeat(2,1fr); }
  .tool-card.flagship{ grid-column:span 2; grid-row:auto; }

  .cat-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr 1fr; }

  .calc-panel{ grid-template-columns:1fr; }
  .calc-inputs{ border-right:none; border-bottom:1px solid var(--color-border); }

  .audience-row{ grid-template-columns:repeat(3,1fr); }

  .pk-grid{ grid-template-columns:1fr; gap:36px; }

  .how-steps{ grid-template-columns:1fr; gap:36px; }
  .how-step .step-line{ display:none; }

  .guides-grid{ grid-template-columns:1fr 1fr; }
  .related-grid{ grid-template-columns:1fr 1fr; }

  .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; }

  .contact-grid{ grid-template-columns:1fr; gap:36px; }
}

/* Tablet portrait (768) */
@media (max-width:768px){
  .section{ padding:64px 0; }
  .section-head h2{ font-size:28px; }
  .guides-grid{ grid-template-columns:1fr 1fr; }
  .related-grid{ grid-template-columns:1fr; }
}

/* Phones (430 and below) */
@media (max-width:430px){
  .wrap{ padding:0 20px; }
  .site-header .wrap{ height:64px; }
  .mobile-nav{ top:64px; }
  .nav-search-link span{ display:none; }

  .hero{ padding:48px 0 56px; }
  .hero h1{ font-size:30px; }
  .hero .lede{ font-size:15.5px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .trust-line{ font-size:12.5px; }

  .section{ padding:56px 0; }
  .section-head h2{ font-size:24px; }
  .final-cta h2{ font-size:26px; }

  .tools-grid{ grid-template-columns:1fr; }
  .tool-card.flagship{ grid-column:span 1; }

  .value-grid{ grid-template-columns:1fr; gap:26px; }

  .calc-inputs,.calc-results{ padding:24px 20px; }
  .calc-field-row{ grid-template-columns:1fr 1fr; }
  .result-grid{ grid-template-columns:1fr 1fr; }
  .calc-actions{ flex-direction:column; }
  .calc-actions .btn{ width:100%; }

  .audience-row{ grid-template-columns:repeat(2,1fr); }

  .pk-features{ grid-template-columns:1fr; }

  .guides-grid{ grid-template-columns:1fr; }

  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }

  .cta-buttons{ flex-direction:column; }
  .cta-buttons .btn{ width:100%; }

  .dash-card{ padding:20px 18px; }
  .floating-chip{ display:none; }

  .tools-directory-bar{ flex-direction:column; align-items:stretch; }

  .page-content{ padding:44px 0 64px; }
  .page-content .entry-header h1{ font-size:28px; }
}

/* Small phones (390 / 375) — fine-tune touch targets and type */
@media (max-width:390px){
  .hero h1{ font-size:27px; }
  .btn{ padding:13px 20px; }
  .calc-field-row{ grid-template-columns:1fr; }
  .result-grid{ grid-template-columns:1fr; }
}

/* Very small phones (360 / 320) — final safety net, no horizontal scroll */
@media (max-width:360px){
  .wrap{ padding:0 16px; }
  .hero h1{ font-size:25px; }
  .site-logo{ font-size:18px; }
  .dash-highlight{ flex-direction:column; align-items:flex-start; gap:10px; }
  .dash-highlight .profit-badge{ text-align:left; }
}