/* ===== frinally_responsive.css — breakpoint overrides =====
   Strategy (map §6, user decision): base CSS = desktop; tablets fine with it.
   Single width breakpoint (<900px): header stacks 3-in-column (centred) and
   content switches to phone spacing. Applies to portrait AND landscape phones
   (landscape under 900px is too cramped to keep the 3-col row). Viewport query. */

@media (max-width: 900px)
{

    /* Header stacks vertically: logo (heading) first, then nav, then social —
       all centred (desktop grid was logo|nav|social with right-aligned nav/social) */
    .site-header__row
    {
        /* minmax(0,1fr) lets the column SHRINK below its content width —
           otherwise the 10rem nav pills force the row wider than the viewport */
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 1.5rem;
    }

    .site-header__logo
    {
        justify-self: center;
    }

    .menu
    {
        width: 100%;
    }

    .menu ul
    {
        /* reset browser default ul padding-left (40px) so the menu centres,
           and narrow the pills so two fit on a phone */
        padding-left: 0;
        justify-content: center;
    }

    .menu > ul > li > a
    {
        width: 7.5rem;
    }

    .site-header__social
    {
        justify-self: center;
    }

    .hero-content,
    .teaser,
    .main.inside,
    .drop__body
    {
        padding: 2rem 1.5rem;
    }

    section.hero-headings
    {
        padding: 4rem 0;
    }

    section.hero-headings h2
    {
        font-size: 3.5rem;
    }

    section.hero-headings h3
    {
        font-size: 2rem;
    }

    /* hero text block — full width on phones (was 50% grid-6) */
    .grid-6
    {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Respect reduced motion (free a11y win) */
@media (prefers-reduced-motion: reduce)
{

    *,
    *::before,
    *::after
    {
        animation: none !important;
        transition: none !important;
    }
}