/* ═══════════════════════════════════════════════════════════
   games.css — Game card styles
   Include on any page that shows game cards:
   - homepage (index.php)
   - /murder-mystery-games/
   - /hen-night-murder-mystery-games/
   - /halloween-murder-mystery-games/
   - any other category pages
   ═══════════════════════════════════════════════════════════ */

/* ── FILTER BAR ─────────────────────────────────────────────
   .filter-bar, .filter-btn, .filter-btn.active
   ---------------------------------------------------------- */
    .filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(0,0,0,.08)}
    .filter-btn{background:transparent;border:1px solid rgba(0,0,0,.12);color:var(--mid-gray);padding:.5rem 1.1rem;border-radius:100px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--trans);font-family:inherit}
    .filter-btn:hover{border-color:var(--off-black);color:var(--off-black)}
    .filter-btn.active{background:var(--off-black);border-color:var(--off-black);color:#fff}

/* ── GAMES GRID ─────────────────────────────────────────────
   .games-grid, .games-intro
   ---------------------------------------------------------- */
    .games-section{background:var(--cream);padding-top:1.5rem}
    .games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}


/* ── GAME CARD ──────────────────────────────────────────────
   .game-card, .game-card:hover
   ---------------------------------------------------------- */
    .game-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--trans-slow),box-shadow var(--trans-slow);display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.05);position:relative}
    .game-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
    .game-card:hover .card-art-inner{transform:scale(1.06)}
    .game-card:hover .card-art img{transform:scale(1.06)}
    .game-card:hover .card-overlay{opacity:1}


/* ── CARD ART (image area) ──────────────────────────────────
   .card-art, .card-art-inner, .card-overlay, .card-overlay-btn
   .card-badge, .card-badge-new
   ---------------------------------------------------------- */
    .card-art{height:210px;overflow:hidden;position:relative;flex-shrink:0;display:block;text-decoration:none;border-radius: var(--r-lg);}
    @media(max-width:768px){.card-art{pointer-events:none;}}
    .card-art-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;transition:transform .6s cubic-bezier(.4,0,.2,1)}
    .card-overlay{position:absolute;inset:0;background:rgba(10,10,10,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--trans);z-index:3;cursor:pointer;border-radius: var(--r-md)}
    @media(max-width:768px){.card-overlay{display:none}}
    .card-overlay-btn{background:#fff;color:var(--off-black);border:none;border-radius:var(--r-sm);padding:.65rem 1.4rem;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;transition:background var(--trans),transform var(--trans)}
    .card-overlay-btn:hover{background:var(--cream);transform:scale(1.04)}
    .card-badge{position:absolute;top:.85rem;left:.85rem;background:var(--red);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .65rem;border-radius:var(--r-sm);z-index:2}
    .card-badge-new{position:absolute;top:.85rem;right:.85rem;background:rgba(10,10,10,.75);backdrop-filter:blur(4px);color:rgba(255,255,255,.9);font-size:.62rem;font-weight:600;letter-spacing:.08em;padding:.25rem .55rem;border-radius:var(--r-sm);z-index:2}


/* ── CARD BODY ──────────────────────────────────────────────
   .card-body, .card-meta, .card-setting-tag
   .card-players-count, .card-players-tag
   .card-suitability, .card-suitability-dot
   .card-title, .card-desc, .card-note
   ---------------------------------------------------------- */

    .card-body{padding:1.25rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column}
    .card-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
    .card-setting-tag{font-size:.7rem;font-weight:500;color:var(--mid-gray);background:var(--cream);padding:.2rem .55rem;border-radius:100px}
    .card-players-tag{font-size:.7rem;font-weight:500;color:var(--mid-gray)}
    .card-players-tag::before{content:'·';margin-right:.4rem}
    .card-players-count{font-family:'Playfair Display',Georgia,serif;font-size:1rem;font-style:italic;font-weight:700;color:var(--off-black);margin-bottom:.2rem}
    .card-suitability{font-size:.7rem;font-weight:500;color:var(--mid-gray);display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem}
    .card-suitability-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* ── CARD FOOTER ────────────────────────────────────────────
   .card-footer, .card-price, .card-price-note
   .card-btns, .btn-learn, .btn-buy
   ---------------------------------------------------------- */


/* ── CARD VARIATIONS ────────────────────────────────────────
   .card-variations, .card-variations-label
   .card-variation-row, .card-variation-info
   .card-variation-name, .card-variation-price
   .btn-buy-sm
   ---------------------------------------------------------- */
    /* Variations */
    .card-variations{border-top:1px solid rgba(0,0,0,.06);margin-top:.85rem;padding-top:.85rem}
    .card-variations-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:.6rem}
    .card-variation-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem 0;border-bottom:1px solid rgba(0,0,0,.04)}
    .card-variation-row:last-child{border-bottom:none}
    .card-variation-info{display:flex;flex-direction:column;gap:.1rem}
    .card-variation-name{font-size:.78rem;font-weight:600;color:var(--off-black)}
    .card-variation-price{font-size:.72rem;color:var(--mid-gray)}
    .btn-buy-sm{background:var(--off-black);color:#fff;border:none;padding:.38rem .75rem;font-size:.68rem;font-weight:600;border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:all var(--trans);white-space:nowrap}
    .btn-buy-sm:hover{background:var(--charcoal);transform:translateY(-1px)}
    .card-title{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;font-weight:700;font-style:normal;color:var(--off-black);line-height:1.25;margin-bottom:.55rem}
    .card-desc{font-size:.85rem;color:var(--mid-gray);line-height:1.6;flex:1;margin-bottom:1.1rem}
    .card-rating{display:flex;align-items:center;gap:.35rem;margin-bottom:1rem}
    .stars-svg{color:#f59e0b;font-size:.75rem;letter-spacing:.05em}
    .rating-count{font-size:.72rem;color:var(--mid-gray)}
    .card-footer{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.06)}
    .card-price{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--off-black);line-height:1}
    .card-price-note{font-size:.65rem;color:var(--mid-gray);margin-top:.15rem;font-weight:400}
    .card-btns{display:flex;gap:.4rem;align-items:center}
	.card-note {font-size: 0.78rem;color: var(--mid-gray);font-style: italic;margin-top: 0.5rem;line-height: 1.6;border-top: 1px solid rgba(0,0,0,0.06);padding-top: 0.5rem;}
    .btn-learn{background:transparent;border:1px solid rgba(0,0,0,.15);color:var(--off-black);padding:.55rem .85rem;font-size:.75rem;font-weight:500;border-radius:var(--r-sm);text-decoration:none;transition:all var(--trans);display:inline-flex;align-items:center;gap:.3rem;font-family:inherit}
    .btn-learn:hover{border-color:var(--off-black);background:var(--off-black);color:#fff}
    .btn-buy{background:var(--off-black);color:#fff;border:none;padding:.55rem 1rem;font-size:.75rem;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all var(--trans);font-family:inherit;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
    .btn-buy:hover{background:var(--charcoal);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25)}


/* ── HIGHLIGHT / CAROUSEL ───────────────────────────────────
   .carousel-section, .carousel, .carousel-track
   .carousel-slide, .carousel-slide-inner
   .carousel-img-wrap, .carousel-content
   .carousel-players, .carousel-title, .carousel-desc
   .carousel-footer, .carousel-price, .carousel-btn
   .carousel-arrow, .carousel-dots, .carousel-dot
   @keyframes carouselFade
   ---------------------------------------------------------- */


/* ── RESPONSIVE ─────────────────────────────────────────────
   Breakpoints for game cards, filter bar, carousel
   ---------------------------------------------------------- */