/* =========================================================================
   CS-THEME-03 — game cards, the card grid, and the homepage sections.

   Loaded after tokens.css and shell.css. Uses their tokens and adds no
   new colour or spacing constant.

   THE TWO NUMBERS THIS FILE EXISTS TO FIX, both measured by CS-THEME-01
   on the live theme:
     - 94 of 94 images carried no width or height, so every image was a
       layout shift waiting to happen (CLS reached 1.469);
     - card titles rendered at 10px.

   Logical properties only, same rule as shell.css.
   ========================================================================= */

/* ---- section ------------------------------------------------------------ */

.section { margin-block-end: var(--space-6); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}
.section__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.3;
}
.section__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}
.section__more:hover { background: var(--color-surface-2); }
.section__more .i { inline-size: 1em; block-size: 1em; }

/* ---- the grid -----------------------------------------------------------
   Column counts are set per breakpoint rather than left to auto-fill, so
   the rendered card width is a decision that can be measured rather than
   whatever the viewport happens to produce. */

.card-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 360, 390 */
}

/* ---- the card -----------------------------------------------------------
   One <a> wrapping everything: one tab stop, one accessible name, one
   target. The audit found the old game page giving 52% of its controls
   less than 44px. */

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    min-block-size: var(--tap-min);
    box-shadow: var(--shadow-1);
    transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* THE SPACE IS RESERVED BEFORE THE IMAGE ARRIVES.
   aspect-ratio holds the box open at the source ratio (512x384 = 4/3), so
   nothing below the card moves when the bytes land. The width/height
   attributes on the <img> say the same thing to the browser before any
   CSS is parsed; both are present on purpose. */
.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-2);
    overflow: hidden;
}
.card__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    /* a plain background while the image is in flight, so the card never
       flashes white in dark mode */
    background: var(--color-surface-2);
}

.card__body {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
}

/* 14px is the floor on the smallest screen. The old theme rendered these
   at 10px. */
.card__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.35;
    /* two lines, then ellipsis: a long English title must not push the
       card taller than its neighbours and break the grid rhythm */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Arabic and English sit on the same line naturally when the base
       direction is the document's and only the text isolates. */
    unicode-bidi: plaintext;
    text-align: start;
}
.card__meta {
    font-size: var(--text-xs);
    color: var(--color-muted);
    unicode-bidi: plaintext;
    text-align: start;
}

/* ---- category tile ------------------------------------------------------ */

.cat-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--tap-min);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--text-sm);
}
.cat:hover { background: var(--color-surface-2); }
.cat:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cat__icon {
    inline-size: 36px; block-size: 36px;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-accent);
}
.cat__count { margin-inline-start: auto; color: var(--color-muted); font-weight: 600; font-size: var(--text-xs); }

/* ---- ad slot ------------------------------------------------------------
   Ads are NOT redesigned here and NOT removed. What changes is that their
   space is reserved, so an ad that arrives late pushes nothing. The old
   homepage measured CLS up to 1.469; an unreserved ad box is one of the
   ways that happens. The min-block-size matches the 250px creative the
   CMS already serves (getADS('300x250_main')). */
.ad-slot {
    display: grid;
    place-items: center;
    inline-size: 100%;
    max-inline-size: 336px;
    min-block-size: 280px;          /* 250 creative + label + breathing room */
    margin-inline: auto;
    margin-block: var(--space-5);
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    font-size: var(--text-xs);
}
.ad-slot--leaderboard { max-inline-size: 728px; min-block-size: 110px; }

/* =======================================================================
   BREAKPOINTS — the same three states as the shell.
   Column counts are chosen so the rendered card stays wide enough for a
   512x384 source to look sharp; the browser suite asserts the measured
   card width at each one.
   ======================================================================= */

@media (min-width: 768px) {                     /* tablet */
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
    .cat-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card__title { font-size: var(--text-base); }
    .section__title { font-size: var(--text-2xl); }
}

@media (min-width: 912px) {
    .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cat-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    /* Five, not six: at six the card falls to ~185px, below the point
       where a 512px source stops paying for itself and the two-line title
       starts clipping ordinary names. Measured, not assumed. */
    .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:hover { transform: none; }
}