/* Responsive Design */

/* ─── Utilities ──────────────────────────────── */

/* Gallery cards revert to equal widths when caption text-wrap isn't necessary */

@container (min-width: 809px) and (max-width: 1370px) {
    .card:last-child { margin-left: 1lh; }
}

/* Fix for iOS device status bar and .hide-nav */

@supports (-webkit-touch-callout: none) {
    .hide-nav { transform: translateY(-200%); }

    @media (max-width: 956px) {
            .blockquote-container { grid-column: 1 / -1; } /* landscape iPhone fix */
    }
}

/* ─── Smaller Browser Windows : 1439px to 1200px ──────────────────────────────── */

/* Grow headshot and bio */

@media (max-width: 1360px) {
    .headshot { display: grid; grid-template-columns: repeat(4, 1fr); }

    .headshot .image-container { grid-column: 2 / span 2; }

    .bio-container { grid-column: 2 / span 10; }
}

/* ─── Large Tablets : 1199px to 850px ──────────────────────────────── */

/* Condensed spacing, new type scale, 
100% width services/bio, smaller image border-radius */

@media (max-width: 1199px) {
    header {
        padding-top: 92px;
        padding-bottom: 40px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    section {
        padding-top: 80px;
        padding-bottom: 80px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        gap: 60px;
    }

    footer {
        padding-top: 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        gap: 30px;
    }

    nav {
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: 20px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    h1 { font-size: 96px; line-height: 0.75; }
    h2 { font-size: 64px; line-height: 0.906; }
    h3 { font-size: 48px; line-height: 0.875; }
    h4 { font-size: 32px; line-height: 1; }
    h5 { font-size: 24px; line-height: 1.333; }

    p, a { font-size: 24px; line-height: 1.333; }

    .logo-container { padding: 40px 20px; }

    .tagline-container, .copyright-container,
    .gallery, .headshot, .grid-container { gap: 10px; }

    .about { gap: 80px; }

    .intro { gap: 60px; }

    .image-container { border-radius: 10px; }

    .services { grid-column: 1 / -1; }

    .pill {
        font-size: 36px;
        line-height: 40px;
        padding: 9px 19px;
    }

    .button { font-size: 24px; line-height: 32px; }

    .animated-bg { height: 52px; }

    .list-container { gap: 20px; }

    .large-link-text { font-size: 48px; line-height: 0.875; }

    .bit-headline { font-size: 48px; line-height: 0.875;}
}

/* Prevent logo from scaling under h1 */

@media (min-width: 850px) and (max-width: 1024px) {
    .logo-container { padding: 40px 0; }
}

/* ─── Tablets : 849px to 768px ──────────────────────────────── */

/* Mobile nav/footer, new type scale, direction/flow swap,
full-width headshot/gallery/blockquote, large-links gap adjustment */

@media (max-width: 849px) {
    .desktop-nav    { display: none; }
    .mobile-nav     { display: revert; }
    .desktop-footer { display: none; }
    .mobile-footer  { display: revert; }

    h1 { font-size: 60px; line-height: 0.8; }
    h2 { font-size: 40px;  line-height: 0.9; }
    h3 { font-size: 32px;  line-height: 1; }
    h4 { font-size: 24px;  line-height: 1; }
    h6 { font-size: 20px;  line-height: 1.2; }

    .tagline-container { flex-direction: column; gap: 20px; }

    .headshot .image-container { grid-column: 1 / -1; border-radius: 10px; }

    .pill { font-size: 28px; line-height: 32px; }

    .gallery { grid-auto-flow: row; gap: 60px; }

    .bio-container { grid-column: 1 / -1; }

    .button {
        font-size: 20px;
        line-height: 24px;
        padding: 9px 19px;
    }

    .animated-bg { height: 44px; }

    .blockquote-container { grid-column: 1 / -1; }

    .large-links { gap: 10px; }

    .large-link-text { font-size: 32px; line-height: 1; }

    .bit-headline { font-size: 32px; line-height: 1; }

    .bit-link { font-size: 32px; }
}

/* ─── Mobile Devices: 767px to 414px ──────────────────────────────── */

/* Mobile logo */

@media (max-width: 677px) {
    .desktop-logo   { display: none; }
    .mobile-logo    { display: revert; }

    header { padding-top: 72px; }

    .logo-container { padding: 40px; }
}

/* Address link animated-decoration fix */

@media (max-width: 632px) {
    #address { max-width: 15.35ch; }
}

/* Email link font-size fix */

@media (max-width: 472px) {
    .large-link-text { font-size: clamp(20px, 6.779vw, 32px); line-height: 1; }
}

/* ─── Small Mobile Devices: 413px to 360px ──────────────────────────────── */

/* New type scale */

@media (max-width: 413px) {
    h1 { font-size: 48px; line-height: 0.8333; }
    h2 { font-size: 32px;  line-height: 0.875; }
    h3 { font-size: 24px;  line-height: 1; }

    .caption { font-size: 16px; line-height: 1.25; }

    .pill { font-size: 24px; line-height: 28px; }
}