/*
 * Shared responsive tweaks for the public (unauthenticated) pages:
 * user profile, club profile, and the ranking/overview pages.
 *
 * Each public template carries its own inline <style> with the base layout.
 * This file is linked AFTER that block so its mobile rules win the cascade
 * without needing !important. It only narrows the outer margin and the
 * left/right padding on small screens so the content boxes use the width of
 * the page instead of leaving big empty gutters.
 */

@media (max-width: 600px) {
    /* Outer page gutter: the body padding is the left/right margin around
       every card. Tighten it so boxes get more horizontal room. */
    body {
        padding: var(--spacing-sm, 10px);
    }

    /* Headers (gradient banners) — trim the generous 40px/30px padding.
       The body padding shrinks on mobile, so add a matching top margin to
       keep the space above the header symmetric with its bottom margin. */
    .user-header,
    .club-header,
    .ranking-header,
    .overview-header {
        padding: var(--spacing-lg, 30px) var(--spacing-md, 20px);
        margin-top: var(--spacing-sm, 10px);
    }

    /* Content cards / boxes — reduce the left/right padding so their inner
       content (rating tiles, tables, pills) is not squeezed into a narrow
       column framed by wide empty margins. */
    .user-card,
    .club-card,
    .ranking-table-container,
    .ranking-box-header,
    .ranking-box-body,
    .ranking-box-footer {
        padding-left: var(--spacing-md, 20px);
        padding-right: var(--spacing-md, 20px);
    }
}

/* Extra-small phones: go tighter still so the rating tiles keep breathing
   room instead of wrapping awkwardly. */
@media (max-width: 400px) {
    body {
        padding: var(--spacing-xs, 5px);
    }

    .user-header,
    .club-header,
    .ranking-header,
    .overview-header {
        padding: var(--spacing-md, 20px) var(--spacing-sm, 10px);
        /* body padding is only 5px here; top up to match the 20px bottom margin */
        margin-top: 15px;
    }

    .user-card,
    .club-card,
    .ranking-table-container,
    .ranking-box-header,
    .ranking-box-body,
    .ranking-box-footer {
        padding-left: var(--spacing-sm, 10px);
        padding-right: var(--spacing-sm, 10px);
    }
}