/*
 * Phone rules shared by the recipe category pages.
 *
 * There are eleven category stylesheets — salad, sauces, soup, snack, dessert,
 * baking, dinner, drink, lunch, pastry, competitions — totalling ~5,800 lines with
 * a single media query each, all at 768px. A 375px phone therefore got styling
 * identical to a 767px tablet. Two of those files (salad-page.css and
 * sauces-page.css) are byte-for-byte identical, and sauces-page.css alone is loaded
 * by seven views, so fixing them individually meant repeating the same edit eleven
 * times and keeping duplicates in step.
 *
 * This is loaded after the page stylesheet and carries the phone rules for all of
 * them. Everything is inside a max-width query, so nothing here can affect desktop.
 */

@media (max-width: 575.98px) {

    /* ── Hero type ──────────────────────────────────────────────────────
       Every category page opens with a hero heading set between 2.5rem and
       4rem with no small-screen override. */
    .sauce-hero h1,
    .salad-hero h1,
    .soup-hero h1,
    .snack-hero h1,
    .dessert-hero h1,
    .baking-hero h1,
    .dinner-hero h1,
    .drink-hero h1,
    .lunch-hero h1,
    .pastry-hero h1,
    .competitions-hero h1,
    .page-hero h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .sauce-hero .lead,
    .salad-hero .lead,
    .soup-hero .lead,
    .snack-hero .lead,
    .dessert-hero .lead,
    .baking-hero .lead,
    .dinner-hero .lead,
    .drink-hero .lead,
    .lunch-hero .lead,
    .pastry-hero .lead,
    .competitions-hero .lead {
        font-size: .95rem;
    }

    /* Section headings across the category pages run 1.8-2.2rem. */
    .section-header h2,
    .sauce-title,
    .salad-title,
    .soup-title,
    .snack-title,
    .dessert-title {
        font-size: 1.3rem !important;
    }

    /* ── Decorative circles ─────────────────────────────────────────────
       These pages paint 400-600px pseudo-element circles behind the hero.
       Their parents clip, so they do not cause scrolling, but at 375px a
       500px circle covers the whole band and turns it into a grey slab. */
    .whats-cooking-today::before,
    .whats-cooking-today::after,
    .competitions-hero::before,
    .competitions-hero::after,
    .bg-build-salad::before,
    .bg-build-salad::after,
    .sauce-hero::before,
    .soup-hero::before,
    .dessert-hero::before {
        width: 220px !important;
        height: 220px !important;
        opacity: .35;
    }

    /* ── Grids ──────────────────────────────────────────────────────────
       Card grids on these pages set a 250-300px minimum, which leaves no
       room for the gutter on a 375px screen. */
    .sauce-categories-grid,
    .salad-categories-grid,
    .soup-categories-grid,
    .category-grid,
    .recipe-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Padding ────────────────────────────────────────────────────────
       Panels and cards are padded for a desktop column. */
    .calc-panel,
    .sauce-panel,
    .tip-card,
    .quick-sauce-card,
    .recipe-card-body-compact {
        padding: .85rem !important;
    }

    /* Big numeric readouts on the calculators overflow their panel. */
    .calc-result-big {
        font-size: 1.4rem !important;
        word-break: break-word;
    }

    /* ── Container caps ─────────────────────────────────────────────────
       soup-page.css alone sets max-width:1200px on nine containers, each with
       its own horizontal padding, which stacks up on a narrow screen. */
    .sauce-hero .container,
    .soup-hero .container,
    .section .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}