/**
 * Layout primitives.
 *
 * Added after an audit found 85 inline `style="…"` attributes across the
 * templates, all re-implementing the same handful of layouts by hand.
 * The cost wasn't only untidiness: card grids had drifted into four
 * different column widths (200/220/240/260px) for what is visually one
 * concept, because each template picked its own number. A layout that
 * lives in one place can't drift, can be tuned for every page at once,
 * and can respond to a breakpoint — none of which an inline style can do.
 *
 * These are structure-only: no color, no border, no typography. Anything
 * with a visual identity belongs in components/.
 */

/* The standard page shell: readable width, breathing room, and a
   consistent vertical rhythm between sections. Used on <main>. */
.ww-page {
    width: 100%;
    max-width: var(--ww-container-xl);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: var(--ww-space-page-block);
    display: flex;
    flex-direction: column;
    gap: var(--ww-space-section);
}

/* Not-found / logged-out shells: same container, more vertical air, no
   section rhythm because there is only one thing on the page. */
.ww-page--centered {
    padding-block: calc(var(--ww-space-page-block) * 1.5);
}

/* Vertical stack. The default gap matches the space between items in a
   list; --tight is for dense rows (watchlist entries, review cards). */
.ww-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ww-stack--tight {
    gap: 0.75rem;
}

.ww-stack--loose {
    gap: var(--ww-space-section);
}

/**
 * Card grid. Two intentional sizes, replacing the four accidental ones:
 *
 *   .ww-grid          entity cards that carry a score, description and
 *                     actions (casino, bonus, landing page results)
 *   .ww-grid--compact small identity cards (game, provider, payment
 *                     method, country)
 *
 * `auto-fill` rather than `auto-fit`: with auto-fit a single remaining
 * card stretches to the full row width, which makes one search result
 * look like a hero banner. auto-fill keeps card width honest regardless
 * of how many results came back.
 */
.ww-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
}

.ww-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}

/* Horizontal row that wraps instead of overflowing on narrow screens —
   the reason this is a primitive and not an inline flex: every hand-written
   `display:flex;justify-content:space-between` in the templates was
   missing `flex-wrap`, so on a phone the two ends collided. */
.ww-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ww-row--start {
    justify-content: flex-start;
}

/* Inline group of small things (badges, buttons) that should wrap
   together and stay vertically aligned. */
.ww-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Filter/finder bars: as many columns as fit, controls aligned to their
   bottom edge so labels of different lengths don't misalign the inputs. */
.ww-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1rem;
    align-items: end;
}

/* Stat tiles (homepage trust signals, withdrawal tracker figures). */
.ww-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .ww-page {
        padding-inline: 1rem;
    }
}

/* Homepage rhythm: more air between major sections than a content page. */
.ww-page--spacious {
    padding-block: calc(var(--ww-space-page-block) * 1.5);
    gap: calc(var(--ww-space-section) * 2);
}

.ww-stat-grid--center {
    text-align: center;
}