/* ==========================================================
   COUPONAPPA LANDER — lander.css
   High-conversion design system built on TwentyTwentyFour
   Targets every real CSS class emitted by:
     - TwentyTwentyFour (FSE block theme)
     - Product Grid Shortcode plugin  (.pg-grid, .pg-item, etc.)
     - Coupon Code Button plugin      (div[style*="border: 2px solid green"])
   ========================================================== */

/* ----------------------------------------------------------
   0. GOOGLE FONTS (Inter ships with T24 — load Space Grotesk)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Brand */
  --ca-red:          #dc2626;
  --ca-red-dark:     #991b1b;
  --ca-red-light:    #fee2e2;
  --ca-green:        #16a34a;
  --ca-green-dark:   #14532d;
  --ca-green-light:  #dcfce7;
  --ca-gold:         #f59e0b;
  --ca-gold-dark:    #b45309;
  --ca-gold-light:   #fef3c7;
  --ca-blue:         #2563eb;

  /* Surface */
  --ca-bg:           #f1f5f9;
  --ca-surface:      #ffffff;
  --ca-surface-2:    #f8fafc;

  /* Text */
  --ca-text:         #0f172a;
  --ca-text-2:       #334155;
  --ca-muted:        #64748b;

  /* Border */
  --ca-border:       #e2e8f0;
  --ca-border-2:     #cbd5e1;

  /* Radius */
  --ca-r-sm:         6px;
  --ca-r:            10px;
  --ca-r-lg:         14px;
  --ca-r-xl:         20px;

  /* Shadow */
  --ca-shadow-xs:    0 1px 2px rgba(0,0,0,.06);
  --ca-shadow-sm:    0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  --ca-shadow:       0 4px 16px rgba(0,0,0,.10);
  --ca-shadow-lg:    0 10px 40px rgba(0,0,0,.14);
  --ca-shadow-deal:  0 2px 8px rgba(0,0,0,.07);

  /* Layout */
  --ca-max:          1360px;
  --ca-content-pad:  clamp(12px, 3vw, 24px);

  /* Typography */
  --ca-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ca-font-head:    'Space Grotesk', 'Inter', sans-serif;
}

/* ----------------------------------------------------------
   2. GLOBAL RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--ca-font) !important;
  background: var(--ca-bg) !important;
  color: var(--ca-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ----------------------------------------------------------
   3. LAYOUT — override TwentyTwentyFour's narrow 620px content
      The theme uses `useRootPaddingAwareAlignments: true` so
      padding lives on .wp-site-blocks, not body.
   ---------------------------------------------------------- */

/* Widen everything to 1360px */
:where(.wp-site-blocks) > * {
  max-width: var(--ca-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Side padding respects mobile */
.wp-site-blocks {
  padding-left: var(--ca-content-pad) !important;
  padding-right: var(--ca-content-pad) !important;
}

/* The constrained layout groups inside single.html / page.html */
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
}

/* Post content itself must be full-width */
.wp-block-post-content,
.wp-block-post-content > * {
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* ----------------------------------------------------------
   4. HEADER — clean sticky bar
   ---------------------------------------------------------- */
header.wp-block-template-part,
.wp-block-template-part[data-slug="header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: var(--ca-surface) !important;
  border-bottom: 2px solid var(--ca-border) !important;
  box-shadow: var(--ca-shadow-xs) !important;
}

/* Site title */
.wp-block-site-title a,
.wp-block-site-title {
  font-family: var(--ca-font-head) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: var(--ca-red) !important;
  text-decoration: none !important;
}
.wp-block-site-title a:hover { opacity: .85 !important; }

/* Nav links */
.wp-block-navigation a {
  font-family: var(--ca-font) !important;
  font-size: .83rem !important;
  font-weight: 600 !important;
  color: var(--ca-text-2) !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  transition: color .15s !important;
}
.wp-block-navigation a:hover {
  color: var(--ca-red) !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------------
   5. HIDE BLOG CLUTTER (date, author, tags, comments, nav)
   ---------------------------------------------------------- */
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-author__avatar,
.wp-block-post-author__content,
.wp-block-post-terms,
.entry-meta, .byline, .posted-on, time.entry-date,
.post-navigation, .wp-block-post-navigation-link,
.wp-block-query-pagination,
nav.navigation, .nav-links,
.comments-area, .comment-respond,
#comments, #respond,
.wp-block-comments, .wp-block-post-comments-form,
.wp-block-template-part[data-slug="post-meta"],
.wp-block-separator,          /* hide the decorative HR below nav */
.wp-block-post-terms          /* tags block */
{ display: none !important; }

/* ----------------------------------------------------------
   6. POST TITLE — H1
   ---------------------------------------------------------- */
h1.wp-block-post-title,
.wp-block-post-title,
.entry-title {
  font-family: var(--ca-font-head) !important;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
  color: var(--ca-text) !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
}

/* ----------------------------------------------------------
   7. POST CONTENT TYPOGRAPHY
   ---------------------------------------------------------- */
.wp-block-post-content p {
  font-size: .96rem !important;
  line-height: 1.75 !important;
  color: var(--ca-text-2) !important;
}

/* First paragraph — lead text */
.wp-block-post-content > p:first-of-type {
  font-size: 1.05rem !important;
  color: var(--ca-text-2) !important;
}

.wp-block-post-content strong { color: var(--ca-text) !important; font-weight: 700 !important; }

/* H2 section headings inside post */
.wp-block-post-content h2 {
  font-family: var(--ca-font-head) !important;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
  font-weight: 700 !important;
  color: var(--ca-text) !important;
  letter-spacing: -.015em !important;
  line-height: 1.3 !important;
  margin-top: 40px !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--ca-border) !important;
  text-transform: none !important;
}

/* H3 inside post (but NOT inside .pg-item — handled separately) */
.wp-block-post-content h3:not(.pg-item h3):not(.pg-content h3) {
  font-family: var(--ca-font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ca-text) !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
}

/* Featured image */
.wp-block-post-featured-image img {
  width: 100% !important;
  max-height: 340px !important;
  object-fit: cover !important;
  border-radius: var(--ca-r-lg) !important;
  box-shadow: var(--ca-shadow) !important;
  margin-bottom: 28px !important;
}

/* ----------------------------------------------------------
   8. DEAL GRID — Product Grid plugin output
      Plugin emits: .pg-grid > .pg-item > .pg-image + .pg-content
      .pg-content > h3 + p + a.pg-button + .pg-coupon > button + span
   ---------------------------------------------------------- */
.pg-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
  margin: 24px 0 32px !important;
  padding: 0 !important;
  width: 100% !important;
}

/* CARD */
.pg-item {
  background: var(--ca-surface) !important;
  border: 1.5px solid var(--ca-border) !important;
  border-radius: var(--ca-r-lg) !important;
  padding: 16px 13px 18px !important;
  text-align: center !important;
  box-shadow: var(--ca-shadow-deal) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .22s !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* Top accent stripe */
.pg-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ca-red) 0%, var(--ca-gold) 100%);
  border-radius: var(--ca-r-lg) var(--ca-r-lg) 0 0;
}

.pg-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--ca-shadow-lg) !important;
  border-color: var(--ca-border-2) !important;
}

/* Product image */
.pg-image {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

.pg-image img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  border-radius: var(--ca-r-sm) !important;
  background: var(--ca-surface-2) !important;
  padding: 4px !important;
  display: block !important;
}

/* Content area */
.pg-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  flex: 1 !important;
}

/* Product title — override the plugin's inline h3{font-size:24px} */
.pg-item h3,
.pg-content h3 {
  font-family: var(--ca-font-head) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--ca-text) !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 5px !important;
  text-transform: none !important;
}

/* Description */
.pg-content p {
  font-size: .76rem !important;
  color: var(--ca-muted) !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
  flex: 1 !important;
}

/* ── REDEEM DEAL button — override plugin inline #ff5722 ── */
.pg-button,
a.pg-button,
.pg-content a.pg-button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, var(--ca-green) 0%, #15803d 100%) !important;
  color: #ffffff !important;
  font-family: var(--ca-font) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.28) !important;
  transition: all .18s ease !important;
  margin-top: auto !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.pg-button:hover,
a.pg-button:hover {
  background: linear-gradient(135deg, #15803d 0%, var(--ca-green-dark) 100%) !important;
  transform: scale(1.04) !important;
  box-shadow: 0 5px 18px rgba(22,163,74,.38) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ── COUPON block ── */
.pg-coupon {
  width: 100% !important;
  margin-top: 8px !important;
}

/* "Copy Coupon" button — override plugin's plain button */
.pg-coupon button {
  display: block !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 2px dashed var(--ca-gold) !important;
  color: var(--ca-gold-dark) !important;
  font-family: var(--ca-font) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-radius: var(--ca-r-sm) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

.pg-coupon button:hover {
  background: var(--ca-gold) !important;
  color: #fff !important;
  border-color: var(--ca-gold) !important;
  border-style: solid !important;
}

/* Revealed code chip — only style when visible, never force display */
.pg-coupon span[style*="display: none"],
.pg-coupon span[style*="display:none"] {
  display: none !important;
}

.pg-coupon span:not([style*="display: none"]):not([style*="display:none"]) {
  display: inline-block !important;
  margin-top: 7px !important;
  padding: 5px 12px !important;
  background: var(--ca-gold-light) !important;
  border: 2px dashed var(--ca-gold-dark) !important;
  border-radius: var(--ca-r-sm) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  color: #78350f !important;
  letter-spacing: .10em !important;
  width: 100% !important;
  text-align: center !important;
}

/* ----------------------------------------------------------
   9. COUPON CODE BUTTON plugin output
      Plugin emits: <div style="border: 2px solid green; ...">
        <h3 style="color: green;">...</h3>
        <p>...</p>
        <button style="background: green; ...">Show Coupon</button>
        <span class="coupon-code">CODE</span>
      </div>
   We can't change the inline styles via CSS specificity alone for
   background-color on elements WITH inline styles, so we use
   !important on everything we can and target the plugin's
   specific wrapper signature.
   ---------------------------------------------------------- */

/* Wrapper — override inline border + bg */
div[style*="border: 2px solid green"],
div[style*="border:2px solid green"] {
  border: 1.5px solid var(--ca-green) !important;
  border-radius: var(--ca-r-lg) !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  padding: 28px 32px !important;
  margin: 28px 0 !important;
  text-align: center !important;
  box-shadow: var(--ca-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* "LIMITED TIME OFFER" label injected via ::before */
div[style*="border: 2px solid green"]::before,
div[style*="border:2px solid green"]::before {
  content: '🏷️ LIMITED TIME OFFER';
  display: block;
  font-family: var(--ca-font);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ca-green);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* H3 coupon title */
div[style*="border: 2px solid green"] h3,
div[style*="border:2px solid green"] h3 {
  font-family: var(--ca-font-head) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--ca-text) !important;
  letter-spacing: -.02em !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
}

/* Description paragraph */
div[style*="border: 2px solid green"] p,
div[style*="border:2px solid green"] p {
  font-size: .9rem !important;
  color: var(--ca-muted) !important;
  margin: 0 0 16px !important;
}

/* "Show Coupon" button — inline style has background:green which
   we can override with !important in some browsers; also set our
   own styles to override as much as possible */
div[style*="border: 2px solid green"] button,
div[style*="border:2px solid green"] button,
button[onclick*="revealCoupon"] {
  display: inline-block !important;
  padding: 13px 34px !important;
  background: linear-gradient(135deg, var(--ca-green), #15803d) !important;
  color: #fff !important;
  font-family: var(--ca-font) !important;
  font-weight: 700 !important;
  font-size: .96rem !important;
  letter-spacing: .02em !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.32) !important;
  transition: all .18s !important;
}

div[style*="border: 2px solid green"] button:hover,
button[onclick*="revealCoupon"]:hover {
  background: linear-gradient(135deg, #15803d, var(--ca-green-dark)) !important;
  transform: scale(1.05) !important;
}

/* Revealed coupon code span — respect the plugin's display:none until clicked */
div[style*="border: 2px solid green"] span.coupon-code[style*="display: none"],
div[style*="border:2px solid green"] span.coupon-code[style*="display: none"],
.coupon-code[style*="display: none"] {
  display: none !important;
}

div[style*="border: 2px solid green"] span.coupon-code:not([style*="display: none"]),
div[style*="border:2px solid green"] span.coupon-code:not([style*="display: none"]),
.coupon-code:not([style*="display: none"]) {
  display: inline-block !important;
  margin-top: 14px !important;
  padding: 10px 24px !important;
  background: #fff !important;
  border: 2px dashed var(--ca-gold-dark) !important;
  border-radius: var(--ca-r-sm) !important;
  font-family: var(--ca-font-head) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  color: #78350f !important;
}

/* ----------------------------------------------------------
   10. URGENCY BAR (shortcode from child functions.php)
   ---------------------------------------------------------- */
.ca-urgency-bar {
  background: linear-gradient(90deg, var(--ca-red-dark) 0%, var(--ca-red) 55%, #ea580c 100%);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-family: var(--ca-font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(220,38,38,.25);
}

.ca-urgency-bar span {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: var(--ca-r-sm);
  padding: 2px 10px;
  margin-left: 8px;
  font-weight: 800;
  font-size: .86rem;
  min-width: 90px;
  text-align: center;
}

/* ----------------------------------------------------------
   11. TRUST BADGES STRIP
   ---------------------------------------------------------- */
.ca-trust-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 14px 16px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r);
  margin: 16px 0;
  box-shadow: var(--ca-shadow-xs);
}

.ca-trust-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  border-radius: 50px;
  padding: 5px 13px;
  font-family: var(--ca-font);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ca-text-2);
  white-space: nowrap;
}

.ca-trust-badge .icon { font-size: .95rem; }

/* ----------------------------------------------------------
   12. STATS BAR
   ---------------------------------------------------------- */
.ca-stats-bar {
  display: flex;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r);
  overflow: hidden;
  margin: 16px 0;
  box-shadow: var(--ca-shadow-xs);
}

.ca-stat-item {
  flex: 1;
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid var(--ca-border);
}
.ca-stat-item:last-child { border-right: none; }

.ca-stat-num {
  display: block;
  font-family: var(--ca-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ca-red);
  line-height: 1.2;
}

.ca-stat-label {
  font-size: .68rem;
  color: var(--ca-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ----------------------------------------------------------
   13. SECTION HEADING DIVIDER
   ---------------------------------------------------------- */
.ca-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 16px;
}

.ca-section-head h2,
.ca-section-head h3 {
  font-family: var(--ca-font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ca-text) !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
  letter-spacing: -.01em !important;
}

.ca-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ca-border) 0%, transparent 100%);
}

/* ----------------------------------------------------------
   14. HIGHLIGHT / INFO BOX
   ---------------------------------------------------------- */
.ca-highlight-box {
  border-radius: var(--ca-r-lg);
  padding: 18px 22px;
  margin: 20px 0;
  border: 1.5px solid;
}

.ca-highlight-box h4 {
  font-family: var(--ca-font-head) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  margin: 0 0 7px !important;
  text-transform: none !important;
}

.ca-highlight-box p {
  font-size: .88rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  color: var(--ca-text-2) !important;
}

/* blue (default) */
.ca-highlight-box,
.ca-highlight-box.blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe88);
  border-color: #93c5fd;
}
.ca-highlight-box h4,
.ca-highlight-box.blue h4 { color: #1d4ed8 !important; }

.ca-highlight-box.green {
  background: linear-gradient(135deg, #f0fdf4, #bbf7d088);
  border-color: #86efac;
}
.ca-highlight-box.green h4 { color: #15803d !important; }

.ca-highlight-box.red {
  background: linear-gradient(135deg, #fff1f2, #fecaca88);
  border-color: #fca5a5;
}
.ca-highlight-box.red h4 { color: #b91c1c !important; }

.ca-highlight-box.gold {
  background: linear-gradient(135deg, #fffbeb, #fde68a88);
  border-color: #fcd34d;
}
.ca-highlight-box.gold h4 { color: var(--ca-gold-dark) !important; }

/* ----------------------------------------------------------
   15. SAVINGS PILL
   ---------------------------------------------------------- */
.ca-savings {
  display: inline-block;
  background: var(--ca-red);
  color: #fff;
  font-family: var(--ca-font-head);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 2px 13px;
  border-radius: var(--ca-r-sm);
  letter-spacing: .02em;
  vertical-align: middle;
}

/* ----------------------------------------------------------
   16. VISITOR COUNTER (social proof)
   ---------------------------------------------------------- */
.ca-visitor-count {
  font-weight: 800;
  color: var(--ca-red);
}

/* ----------------------------------------------------------
   17. AFFILIATE DISCLAIMER
   ---------------------------------------------------------- */
.ca-disclaimer {
  font-size: .74rem !important;
  color: #94a3b8 !important;
  border-top: 1px solid var(--ca-border) !important;
  margin-top: 44px !important;
  padding-top: 14px !important;
  line-height: 1.7 !important;
}

/* ----------------------------------------------------------
   18. SCROLL-TO-TOP BUTTON
   ---------------------------------------------------------- */
.ca-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--ca-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: var(--ca-shadow);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: background .15s, transform .15s;
}
.ca-scroll-top.visible { display: flex; }
.ca-scroll-top:hover { background: var(--ca-red-dark); transform: scale(1.1); }

/* ----------------------------------------------------------
   19. FOOTER
   ---------------------------------------------------------- */
footer.wp-block-template-part,
.wp-block-template-part[data-slug="footer"] {
  background: var(--ca-surface) !important;
  border-top: 1px solid var(--ca-border) !important;
  margin-top: 56px !important;
}

footer a,
.wp-block-template-part[data-slug="footer"] a {
  color: var(--ca-blue) !important;
  text-decoration: none !important;
}

footer a:hover { text-decoration: underline !important; }

/* ----------------------------------------------------------
   20. RESPONSIVE GRID BREAKPOINTS
   ---------------------------------------------------------- */

/* 4 col — large tablet */
@media (max-width: 1200px) {
  .pg-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 3 col — tablet */
@media (max-width: 880px) {
  .pg-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .ca-stats-bar { flex-wrap: wrap; }
  .ca-stat-item { min-width: 50%; border-bottom: 1px solid var(--ca-border); }
  .ca-stat-item:last-child { border-right: none; }
}

/* 2 col — large phone */
@media (max-width: 620px) {
  .pg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pg-item { padding: 12px 10px 14px !important; }

  .pg-item h3, .pg-content h3 {
    font-size: .8rem !important;
  }

  .pg-button, a.pg-button {
    font-size: .74rem !important;
    padding: 9px 10px !important;
  }

  h1.wp-block-post-title, .wp-block-post-title {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important;
  }

  div[style*="border: 2px solid green"],
  div[style*="border:2px solid green"] {
    padding: 20px 16px !important;
  }

  div[style*="border: 2px solid green"] h3 {
    font-size: 1.2rem !important;
  }

  .ca-urgency-bar { font-size: .74rem; }
  .ca-trust-badges { gap: 5px; }
  .ca-trust-badge { font-size: .7rem; padding: 4px 10px; }

  .ca-stats-bar { flex-direction: column; }
  .ca-stat-item { border-right: none !important; border-bottom: 1px solid var(--ca-border); }
  .ca-stat-item:last-child { border-bottom: none; }
}

/* 2 col tight — small phones */
@media (max-width: 400px) {
  .pg-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pg-image img { width: 56px !important; height: 56px !important; }
}