/* ==========================================================================
   Designer Flair - responsive behaviour

   The layout is adapted at each breakpoint rather than scaled down: columns
   are re-composed, the gallery is re-arranged, and the desktop navigation is
   replaced by a full-screen panel.

   Checked at 320, 390, 430, 768, 820, 1024, 1280, 1440 and 1920px.
   ========================================================================== */

/* ---- Large desktop (>= 1600px) ------------------------------------------ */

@media (min-width: 1600px) {
    .hero__content {
        max-width: 50rem;
    }
}

/* ---- Laptop (<= 1200px) -------------------------------------------------- */

@media (max-width: 1200px) {
    .about__grid {
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .contact__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
}

/* ---- Tablet (<= 1024px) --------------------------------------------------
   Two columns are still right for About and Contact here, but the gallery
   needs a simpler rhythm and the sticky contact panel gets in the way.       */

@media (max-width: 1024px) {
    .contact__details {
        position: static;
    }

    /* Four footer columns squeeze the email address below this width, so the
       brand takes a full row and the three lists share the next one. */
    .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

/* ---- Mobile navigation threshold (<= 900px) ------------------------------ */

@media (max-width: 900px) {
    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-panel.is-open {
        display: block;
    }

    /* While the panel is open the header must stay dark-on-dark. */
    body.nav-open .site-header {
        background: var(--ink);
        border-bottom-color: var(--line-on-dark);
        box-shadow: none;
    }

    body.nav-open .site-header .logo {
        color: var(--gold-logo-on-dark);
    }

    body.nav-open .nav-toggle__bar {
        background: #fff;
    }
}

/* ---- Small tablet / large phone (<= 820px) ------------------------------- */

@media (max-width: 820px) {
    .about__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 7vw, 3.5rem);
    }

    .about__media {
        max-width: 520px;
    }

    .about__media img {
        aspect-ratio: 4 / 3;
    }

    /* The offset gold frame is fussy at this size. */
    .about__media::before {
        display: none;
    }

    .experience-badge {
        left: auto;
        right: clamp(-.75rem, -2vw, -.5rem);
    }

    /* One column, and the order changes: heading, then the enquiry form, then
       the phone number and address. Someone who has just read "get in touch"
       can start typing straight away rather than scrolling past a screen of
       details to find the form. On a laptop both sit side by side, so the
       question does not arise and the desktop order in sections.css stands. */
    .contact__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "form"
            "details";
    }

    /* The floating WhatsApp button is already fixed in the corner at this
       width, so the one inside the contact details is the same action offered
       twice within a thumb's reach of itself. */
    .contact__actions {
        display: none;
    }
}

/* ---- Phone (<= 640px) ---------------------------------------------------- */

@media (max-width: 640px) {
    .hero {
        min-height: min(88svh, 720px);
        align-items: flex-end;
    }

    .hero__media img {
        object-position: center 38%;
    }

    /* A vertical scrim reads better than a directional one once the copy
       sits across the full width. */
    .hero__scrim {
        background: linear-gradient(to top, rgba(14, 14, 14, .9) 12%,
                                    rgba(14, 14, 14, .62) 48%, rgba(14, 14, 14, .3) 100%);
    }

    .hero__inner {
        padding-block: clamp(3rem, 12vw, 4.5rem);
    }

    .hero__text {
        max-width: none;
    }

    .hero__cue {
        display: none;
    }

    .btn-group .btn {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl) var(--space-lg);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__bottom {
        justify-content: flex-start;
    }

    /* One slide at a time, nearly full width, with a peek of the next so it is
       obvious the strip scrolls. */
    .carousel__slide,
    .carousel__slide--feature {
        flex-basis: 82vw;
        aspect-ratio: 4 / 3;
    }

    /* Arrows are redundant on a touch screen - swiping is the natural gesture. */
    .carousel__nav {
        display: none;
    }

    .carousel__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .carousel__progress {
        max-width: none;
        width: 100%;
    }
}

/* ---- Small phone (<= 380px) ---------------------------------------------- */

@media (max-width: 380px) {
    .announce__list {
        /* Only the first three trades fit legibly; the rest are in the nav. */
        gap: .5rem;
    }

    .announce__item:nth-child(n + 4) {
        display: none;
    }

    .experience-badge {
        right: auto;
        left: 0;
        bottom: -1rem;
        padding: .875rem 1.125rem;
    }
}

/* ---- Landscape phones ---------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
    .hero {
        min-height: 560px;
    }

    .nav-panel {
        padding-top: calc(var(--header-h) + var(--space-lg));
    }

    .nav-panel__link {
        font-size: 1.5rem;
        padding: var(--space-sm) 0;
    }
}

/* ---- Print ---------------------------------------------------------------- */

@media print {
    .site-header,
    .announce,
    .nav-panel,
    .hero__cue,
    .form-card {
        display: none !important;
    }

    body {
        color: #000;
    }

    .section {
        padding-block: 1.5rem;
        break-inside: avoid;
    }
}