/* =============================================================================
   RESPONSIVE.CSS — FareDrop Theme
   Breakpoints: Desktop ≥1200px (base), Tablet 768–1199px, Mobile <768px
   All values use design tokens from main.css — no magic numbers.
   ============================================================================= */

/* =============================================================================
   TABLET — 768px to 1199px
   ============================================================================= */
@media (max-width: 1199px) {

  /* Layout */
  .container {
    padding-inline: var(--sp-6);
  }

  /* Header */
  .site-header__nav,
  .site-nav {
    display: none;
  }

  .site-header__actions .btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-xs);
  }

  /* Hero */
  .hero__headline {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
  }

  .hero__stat-cards {
    gap: var(--sp-3);
  }

  /* Home deals grid */
  .deals-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Archive layout */
  .archive-layout {
    grid-template-columns: 1fr 240px;
    gap: var(--sp-7);
  }

  /* Single deal */
  .single-deal__layout {
    grid-template-columns: 1fr 340px;
    gap: var(--sp-7);
  }

  /* Single post */
  .single-post__layout {
    grid-template-columns: 1fr 240px;
    gap: var(--sp-7);
  }

  .single-post__title {
    font-size: clamp(1.625rem, 4vw, 2.25rem);
  }

  /* Related grids — 2 col on tablet */
  .related-deals__grid,
  .related-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .pricing-grid {
    max-width: 100%;
  }

  /* Featured deal card */
  .deal-card-featured {
    grid-template-columns: 260px 1fr;
  }

  /* About story */
  .about-story {
    gap: var(--sp-10);
  }

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

  /* Footer */
  .footer-main__inner {
    gap: var(--sp-8);
  }

  /* Steps grid */
  .steps-grid {
    gap: var(--sp-6);
  }
}

/* =============================================================================
   MOBILE — max-width 767px
   ============================================================================= */
@media (max-width: 767px) {

  /* ── Layout ── */
  :root {
    --sp-20: 56px;   /* reduce section padding on mobile */
    --sp-16: 48px;
    --sp-12: 36px;
  }

  .container {
    padding-inline: var(--sp-4);
  }

  .section,
  .section--sm {
    padding-block: var(--sp-12);
  }

  /* ── Topbar ── */
  .topbar { display: none; }

  /* ── Header ── */
  .site-nav,
  .site-header__nav {
    display: none;
  }

  .site-header__actions .btn--outline {
    display: none;
  }

  .site-header__actions .btn--primary {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-xs);
  }

  .site-header__hamburger,
  .hamburger {
    display: flex;
  }

  /* ── Hero ── */
  .hero {
    padding-block: var(--sp-12);
  }

  /* Remove wave on mobile (height constraint) */
  .hero::after { display: none; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .hero__headline {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }

  .hero__sub {
    font-size: var(--text-base);
  }

  .hero__trust { gap: var(--sp-4); }

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

  /* ── Signup form ── */
  .signup-form__fields {
    flex-direction: column;
  }

  .signup-form__fields .btn {
    width: 100%;
  }

  /* ── Section header ── */
  .section-header { margin-bottom: var(--sp-8); }

  .section-header__title {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
  }

  /* ── Deals grid ── */
  .deals-grid--4col,
  .deals-grid--3col,
  .deals-grid--2col {
    grid-template-columns: 1fr;
  }

  /* ── Steps grid ── */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .step { padding: var(--sp-6); }

  /* ── Posts grid ── */
  .posts-grid--2col,
  .posts-grid--3col {
    grid-template-columns: 1fr;
  }

  /* ── Deal filters ── */
  .deal-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .deal-filters__select { width: 100%; }
  .deal-filters__count  { margin-left: 0; }

  /* ── Archive layout — stack ── */
  .archive-layout {
    grid-template-columns: 1fr;
  }

  /* Move sidebar above posts on mobile */
  .sidebar { order: -1; }

  /* ── Featured deal card — stack ── */
  .deal-card-featured {
    grid-template-columns: 1fr;
  }

  .deal-card-featured__image-wrap {
    aspect-ratio: 16 / 7;
  }

  /* ── Single deal ── */
  .single-deal__layout {
    grid-template-columns: 1fr;
  }

  .single-deal__summary-card {
    position: static;
    border-top-width: 3px;
  }

  .single-deal__route-heading {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

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

  /* ── Single post ── */
  .single-post__layout {
    grid-template-columns: 1fr;
  }

  .single-post__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .single-post__meta { gap: var(--sp-3); }

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

  /* ── Pricing ── */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .pricing-card__badge {
    font-size: 10px;
    padding: 3px var(--sp-3);
  }

  /* ── Footer ── */
  .footer-signup__inner {
    flex-direction: column;
    gap: var(--sp-5);
    text-align: center;
  }

  .footer-main__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-1);
  }

  /* ── About ── */
  .about-story {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .about-hero__title {
    font-size: clamp(1.625rem, 5vw, 2.25rem);
  }

  .about-values__grid { grid-template-columns: 1fr; }

  /* ── CTA banner ── */
  .cta-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-5);
  }

  /* ── Deals upsell ── */
  .deals-upsell-inline {
    flex-direction: column;
    text-align: center;
  }

  /* ── Social share ── */
  .social-share { flex-wrap: wrap; }

  /* ── Page hero ── */
  .page-hero { padding: var(--sp-10) 0; }

  .page-hero__title {
    font-size: clamp(1.625rem, 5vw, 2.25rem);
  }

  /* ── Pricing final CTA ── */
  .pricing-page__final-cta {
    padding: var(--sp-8) var(--sp-4);
  }

  /* ── Button sizes ── */
  .btn--xl { padding: 14px var(--sp-8); font-size: var(--text-base); }
  .btn--lg { padding: 11px var(--sp-6); font-size: var(--text-sm); }

  /* ── Error 404 ── */
  .error-404 { padding: var(--sp-16) 0; }
}

/* =============================================================================
   SMALL MOBILE — max-width 479px
   ============================================================================= */
@media (max-width: 479px) {

  .hero__headline {
    font-size: clamp(1.5rem, 7vw, 1.875rem);
  }

  .hero__stat-cards {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-inline: auto;
  }

  .hero__stat-card--accent {
    grid-column: span 1;
  }

  .deal-card__price {
    font-size: 1.5rem;
  }

  .single-deal__route-heading {
    font-size: 1.375rem;
  }

  .single-deal__summary-price {
    font-size: 2.5rem;
  }

  .pricing-card__price { font-size: 2.75rem; }

  .cat-tabs { gap: var(--sp-2); }

  .cat-tab {
    font-size: var(--text-xs);
    padding: 5px var(--sp-3);
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }

  .footer-social { justify-content: center; }

  /* Stack footer signup form on very small screens */
  .footer-signup .signup-form__fields {
    flex-direction: column;
  }

  /* Archive */
  .archive-header__title {
    font-size: 1.5rem;
  }

  /* About values */
  .about-values__grid { gap: var(--sp-4); }

  /* Pricing toggle */
  .pricing-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
  .topbar,
  .site-header,
  .footer-signup,
  .footer-main,
  .footer-bottom,
  .site-footer,
  .sidebar,
  .cta-banner,
  .deal-signup-cta,
  .inline-post-cta,
  .social-share,
  .related-deals,
  .related-posts,
  .mobile-menu-overlay,
  .site-header__hamburger,
  .hamburger {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a { text-decoration: underline; color: #000; }

  .entry-content h2,
  .entry-content h3 { page-break-after: avoid; }

  .deal-card,
  .post-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}