/* ============================================================
   RESPONSIVE.CSS — all breakpoint work in one place.
   Loaded last so it can override theme.css and components.css
   without !important.

   Targets from brief §18: 320, 375, 390, 414, 768, 1024, 1280,
   1440, 1920. The approach is mobile-FIRST corrections rather
   than "shrink the desktop": below 992px the hero becomes a
   stacked single column with the 3D stage reduced in height and
   demoted behind the copy, the deals rail becomes a native
   snap carousel (see components.css) and the custom cursor is
   removed entirely.
   ============================================================ */

/* ============================================================
   >= 1920px — ultrawide: cap the measure so lines stay readable
   ============================================================ */
@media (min-width: 1920px) {
    .container { max-width: 1560px; }
    .ch-hero { padding: 130px 0 96px; }
    .ch-hero-sub { max-width: 620px; font-size: 1.16rem; }
    .ch-hero-stage { min-height: 580px; }
    .ch-section { padding: 112px 0; }
    .ch-rail-card { width: 460px; }
}

/* ============================================================
   1440–1919px
   ============================================================ */
@media (min-width: 1440px) and (max-width: 1919px) {
    .container { max-width: 1400px; }
    .ch-hero-stage { min-height: 520px; }
    .ch-section { padding: 96px 0; }
}

/* ============================================================
   <= 1280px — laptop: pull the hero blobs in so they do not
   crowd the headline at a narrower measure
   ============================================================ */
@media (max-width: 1280px) {
    .ch-hero::before { width: 250px; height: 250px; top: -120px; right: 4%; }
    .ch-hero::after  { width: 250px; height: 250px; bottom: -160px; left: -90px; }
    .ch-hero-badge-2 { right: 0; }
    .ch-rail-card { width: min(72vw, 380px); }
}

/* ============================================================
   <= 1024px — tablet landscape / small laptop
   ============================================================ */
@media (max-width: 1024px) {
    .ch-hero { padding: 76px 0 60px; }
    .ch-hero-stage { min-height: 400px; }
    .ch-hero-deal { max-width: 380px; padding: 26px; }
    .ch-section { padding: 72px 0; }
    .ch-section-head { margin-bottom: 26px; }
    .ch-stat-num { font-size: 1.85rem; }
    .ch-cat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .ch-marquee-item { min-width: 120px; padding: 16px 20px; }
}

/* ============================================================
   <= 991px — the point where the desktop nav is swapped for the
   mobile panel (matches theme.css). Hero becomes one column.
   ============================================================ */
@media (max-width: 991px) {
    .ch-hero { padding: 60px 0 52px; text-align: left; }
    .ch-hero-heading { line-height: 1.04; }
    .ch-hero-sub { max-width: 100%; }
    /* Stage sits UNDER the copy on tablet, reduced in height so it
       reads as an accent rather than eating the first viewport. */
    .ch-hero-stage { min-height: 340px; margin-top: 34px; }
    .ch-hero-deal { max-width: 100%; transform: none; }
    .ch-hero-deal:hover { transform: translateY(-3px); }
    /* Badges would collide with a full-width deal card */
    .ch-hero-badge-1 { top: 0; left: 0; }
    .ch-hero-badge-2 { top: auto; bottom: 6%; right: 0; }
    .ch-hero-badge-3 { display: none; }
    .ch-newsletter { padding: 40px 20px; }
    .ch-footer-section { min-width: 132px; }
}

/* ============================================================
   <= 767px — phones. This is a different layout, not a smaller
   one: single column everywhere, no 3D tilt, larger tap targets.
   ============================================================ */
@media (max-width: 767px) {
    .ch-hero { padding: 44px 0 40px; }
    .ch-hero-eyebrow { margin-bottom: 16px; font-size: 0.7rem; }
    .ch-hero-sub { font-size: 1rem; margin-bottom: 24px; }
    .ch-hero-cta-row { gap: 10px; }
    .ch-hero-cta-row .ch-btn,
    .ch-hero-cta-row .ch-btn-ghost { flex: 1 1 auto; justify-content: center; }
    .ch-hero-stage { min-height: 260px; margin-top: 26px; }
    .ch-hero-canvas { inset: 0; }

    /* Search collapses to a stacked field + full-width button:
       a 22px-wide submit next to an input is unusable at 375px. */
    .ch-hero-search-field,
    .ch-searchbox {
        flex-wrap: wrap;
        padding: 12px 14px;
        border-radius: 16px;
    }
    .ch-hero-search-field input,
    .ch-searchbox input { flex: 1 1 100%; padding: 8px 0 12px; }
    .ch-hero-search-field button[type="submit"],
    .ch-searchbox button[type="submit"] { flex: 1 1 100%; padding: 13px 18px; }
    .ch-hero-search-field > i.fa-search,
    .ch-searchbox > i.fa-search { display: none; }

    .ch-section { padding: 48px 0; }
    .ch-section-head { margin-bottom: 22px; }
    .ch-section-head h2 { letter-spacing: -0.025em; }
    .ch-stats { padding: 26px 0; }
    .ch-stat-num { font-size: 1.5rem; }
    .ch-stat-label { font-size: 0.68rem; letter-spacing: 0.05em; }

    /* No 3D tilt on touch — it fights scrolling and cannot be
       driven by a pointer that is not there. A plain lift stays.
       Note we zero the TILT VARIABLES, not `transform`: the reveal
       flip composes into the same transform, and `transform: none`
       here used to kill the whole coupon flip on every phone. */
    .ch-card { --tx: 0deg !important; --ty: 0deg !important; padding: 18px; }
    .ch-card [data-parallax] { --px: 0px !important; --py: 0px !important; }
    .ch-card:hover { box-shadow: var(--card-hover-shadow); }
    .ch-card-glow, .ch-card-shine { display: none; }
    .ch-card-title { font-size: 0.98rem; min-height: 0; }
    .ch-cat-panel { transform: none !important; min-height: 148px; padding: 20px 18px; }
    .ch-cat-panel:hover .ch-cat-icon { transform: none; }

    .ch-zone-divider { padding: 30px 0; gap: 14px; }
    .ch-zone-line { max-width: 60px; }
    .ch-marquee-wrap { padding: 20px 0; }
    .ch-newsletter { padding: 34px 18px; border-radius: 20px; }
    /* Stacked newsletter: a joined input+button pair is too tight */
    .ch-newsletter .input-group { flex-direction: column; gap: 10px; }
    .ch-newsletter input { border-radius: 12px; }
    .ch-newsletter .ch-sub-btn { border-radius: 12px; padding: 13px 24px; width: 100%; }

    .ch-filterbar { padding: 14px; gap: 8px; }
    .ch-filter-select { flex: 1 1 45%; }
    /* Apply spans the row under the paired selects rather than being a
       narrow tap target wedged between them (coupons.php submits its
       filters with a real button — the page ships no JS of its own). */
    .ch-filterbar .ch-btn { flex: 1 1 100%; padding: 12px 20px; }
    .ch-filter-clear { margin-left: 0; flex: 1 1 100%; }

    /* Store tiles go 2-up on phones, so the logo plate has to give back
       vertical space or four rows of stores fill three screens. */
    .ch-store-logo { height: 108px; padding: 16px; }
    .ch-store-logo img { max-height: 68px; }
    .ch-store-info { padding: 14px 14px 16px; gap: 6px; }
    .ch-store-name { font-size: 0.95rem; }
    .ch-store-tile:hover { transform: translateY(-3px); }

    .ch-pagination a, .ch-pagination span { min-width: 38px; height: 38px; }
    .ch-toast-stack { bottom: 16px; }
}

/* ============================================================
   <= 575px
   ============================================================ */
@media (max-width: 575px) {
    .ch-hero-badge { font-size: 0.78rem; padding: 7px 12px; }
    .ch-card-store { padding-right: 40px; }
    .ch-save-btn { top: 14px; right: 14px; width: 32px; height: 32px; }
    .ch-code-row { flex-wrap: wrap; padding: 10px 12px; }
    .ch-code-actions { width: 100%; justify-content: flex-end; }
    .ch-card-reveal { padding: 20px 16px; gap: 10px; }
    .ch-card-reveal .ch-reveal-code { font-size: 1.1rem; padding: 10px 16px; }
    .ch-footer { padding: 40px 0 22px; }
    .ch-footer-newsletter { flex-direction: column; align-items: flex-start; }
    .ch-footer-sub-form { max-width: 100%; }
    .ch-footer-bottom { flex-direction: column; align-items: flex-start; }
    .ch-footer-section { min-width: 100%; }
}

/* ============================================================
   <= 400px — 320/375/390 class devices. The tightest layout;
   everything here is about preventing horizontal overflow.
   ============================================================ */
@media (max-width: 400px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .ch-hero { padding: 34px 0 32px; }
    .ch-hero-heading { font-size: clamp(1.95rem, 9vw, 2.5rem); letter-spacing: -0.03em; }
    .ch-hero-stage { min-height: 210px; }
    .ch-hero-badge-2 { display: none; }
    .ch-hero-cta-row .ch-btn,
    .ch-hero-cta-row .ch-btn-ghost { flex: 1 1 100%; }
    .ch-section { padding: 40px 0; }
    .ch-card { padding: 16px; border-radius: 18px; }
    .ch-discount { font-size: 0.85rem; padding: 3px 9px; }
    .ch-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ch-cat-panel { min-height: 132px; padding: 16px 14px; }
    .ch-cat-icon { width: 42px; height: 42px; font-size: 1.02rem; }
    .ch-cat-name { font-size: 0.94rem; }
    .ch-rail-card { width: 88vw; }
    .ch-rail-media { height: 168px; }
    /* At 320–400px the tile is ~140px wide: the description is two words
       per line and adds nothing, so the tile leads with name + deal count. */
    .ch-store-logo { height: 92px; padding: 12px; }
    .ch-store-logo img { max-height: 58px; }
    .ch-store-desc { display: none; }
    .ch-store-icon-fallback { width: 50px; height: 50px; font-size: 1.15rem; }
    .ch-pill { padding: 9px 14px; font-size: 0.82rem; }
    .ch-marquee-item { min-width: 104px; padding: 14px 16px; }
    .ch-marquee-item img { height: 32px; }
}

/* ============================================================
   Touch / coarse pointer, at any width.
   Hover-only affordances are dropped rather than left to fire on
   tap, which is what makes "sticky hover" bugs on mobile.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
    /* Zero the tilt vars, never `transform` itself — the coupon
       reveal flip lives in the same transform chain. */
    .ch-card { --tx: 0deg !important; --ty: 0deg !important; }
    .ch-card [data-parallax] { --px: 0px !important; --py: 0px !important; }
    .ch-card-glow, .ch-card-shine { display: none !important; }
    .ch-cat-panel::before { animation: none !important; }
    .ch-marquee-item:hover { transform: none; }
    .ch-hero-deal:hover { transform: none; }
    /* Comfortable minimum tap target */
    .ch-save-btn, .ch-login-nudge, .ch-social a { min-width: 40px; min-height: 40px; }
    .ch-unlock-btn, .ch-copy-btn { padding: 11px 16px; font-size: 0.82rem; }
}

/* ============================================================
   Short viewports (landscape phones) — the hero must not push
   everything below the fold on a 390x844 device rotated.
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
    .ch-hero { padding: 28px 0 26px; }
    .ch-hero-stage { min-height: 190px; margin-top: 16px; }
    .ch-hero-eyebrow { display: none; }
    .ch-mobile-nav a { padding: 11px 4px; font-size: 0.98rem; }
}

/* ============================================================
   Print — strip every decorative layer
   ============================================================ */
@media print {
    .ch-bg-scene, .ch-hero-canvas, .ch-page-loader, .ch-scroll-progress,
    .ch-cursor-dot, .ch-cursor-ring, .ch-toast-stack,
    .ch-header, .ch-mobile-nav, .ch-mobile-nav-backdrop, .ch-search-bar { display: none !important; }
    body { padding-top: 0 !important; background: #fff !important; color: #000 !important; }
    .ch-card, .ch-cat-panel, .ch-rail-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
}