/* ALQQAMAR — Explore This Deck page styles (PAGE 2).
   Fluid clamp() pass 2026-07-04. Figma 💙 EXPLORE THIS DECK page,
   desktop frame 408:13607 (1440px) / mobile frame 416:14460 (390px).
   Typography standard updated 2026-07-08: buttons/labels → 13px fixed.

   Spacing repass 2026-07-06: full ARB walk of all four frames, ABB-based
   padding derivation.

   Restructured 2026-07-28: converted from max-width to mobile-first
   (min-width: 1440px) so desktop rules fire reliably at ≥1440px.
   Also added explicit desktop suit-title typography (base theme does not
   provide 16px/500/7px at desktop — must be declared here).

   Cache-bust 2026-07-28b: removed stale display:none on .ed-bottom-links
   that was hiding back-nav links at sub-1440px viewports.

   Clamp range updated 2026-08-02: 320→1920px (divisor 1600) sitewide standard.

   Derivation method:
     padding/margin = child_ABB_top − parent_content_top (no leading offset).
   Verified geometry chain:
     Desktop: ed-content(y=173) + deck-title(pt=30) → title ABB y=203 ✓
              deck-title(pb=30) → element bottom=282 = hero frame bottom ✓
              baraja(pt=19) → suit-title ABB y=301 ✓
              suit-title(mb=24) → cards ABB y=345 ✓
     Mobile:  ed-content(y=44) + deck-title(pt=32) → title ABB y=76 ✓
              deck-title(pb=32) → element bottom=132 = hero frame bottom ✓
              baraja(pt=32) → suit-title ABB y=208 ✓
              suit-title(mb=24) → cards ABB y=248 ✓ */

/* ── BOTTOM LINKS ────────────────────────────────────────────────────── */
/* Desktop only — 13px fixed per typography standard 2026-07-08 */
.ed-content .ed-bottom-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 15px;
  color: #0b40b4;
}

/* ── CARDS GRID ──────────────────────────────────────────────────────── */
.ed-content .ed-cards-grid {
  gap: clamp(8px, calc(8px + (16 - 8) * ((100vw - 320px) / 1600)), 16px);
  max-width: 1040px;
  margin: 0 auto;
}

/* ── CARD ────────────────────────────────────────────────────────────── */
.ed-content .ed-card {
  width: clamp(114px, calc(114px + (116 - 114) * ((100vw - 320px) / 1600)), 116px);
}
@media (min-width: 1440px) {
  .ed-content .ed-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
}

/* ── BUY BUTTON ──────────────────────────────────────────────────────── */
/* 13px fixed per typography standard — both breakpoints */
.ed-content .ed-buy-btn {
  width: clamp(208px, calc(208px + (240 - 208) * ((100vw - 320px) / 1600)), 240px);
  height: clamp(40px, calc(44px + (40 - 44) * ((100vw - 320px) / 1600)), 44px);
  line-height: clamp(40px, calc(44px + (40 - 44) * ((100vw - 320px) / 1600)), 44px);
  font-size: 13px;
  letter-spacing: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   SPACING — MOBILE BASE (no media query = mobile default, all widths)
   ══════════════════════════════════════════════════════════════════════ */

.ed-content .ed-deck-title { padding-top: 32px; padding-bottom: 32px; }

.ed-content .ed-baraja {
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 16px;
  padding-right: 16px;
}

.ed-content .ed-suit-title {
  margin-bottom: 24px !important;
  font-size: 13px;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: 5px;
}

.ed-content .ed-cta { padding-top: 38px; padding-bottom: 38px; }

/* ── DESKTOP OVERRIDES — min-width 1440px ───────────────────────────── */
@media (min-width: 1440px) {

  .ed-content .ed-deck-title { padding-top: 30px; padding-bottom: 30px; }

  .ed-content .ed-baraja {
    padding-top: 19px;
    padding-bottom: 44px;
    padding-left: 0;
    padding-right: 0;
  }

  .ed-content .ed-suit-title {
    font-size: 16px;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 7px;
  }

  .ed-content .ed-cta { padding-top: 48px; padding-bottom: 29px; }
}

/* ── BUTTON — .btn_filled ─────────────────────────────────────────────
   13px fixed per typography standard 2026-07-08.
   letter-spacing 4px per Figma (deviates from site standard 0.04em).
   Note: buy button in DOM uses .ed-buy-btn only (no .btn_filled class).
   These rules are kept for forward compatibility.
   ────────────────────────────────────────────────────────────────────── */
.ed-content .btn_filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  height: 44px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
}

@media (min-width: 1440px) {
  .ed-content .btn_filled { height: 40px; }
}