/* ==========================================================================
   Responsive fixes — loaded last (after style.css, page styles and base.css)
   so these rules win. Tested at 320–3440px wide.
   ========================================================================== */

:root {
    --content-max-width: 1200px;
}

/* Never let anything make the page scroll sideways */
html, body {
    overflow-x: clip;
}

img, video, iframe {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Side textures (the decorative image bars left and right of the content).
   They exactly fill the space between the screen edge and the 1200px content
   column, on any screen width, and disappear when there's no room for them.
   -------------------------------------------------------------------------- */
.side-texture-left,
.side-texture-right {
    width: max(0px, calc((100% - var(--content-max-width)) / 2));
}

@media screen and (max-width: 1260px) {
    .side-texture-left,
    .side-texture-right {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Header between phone and desktop layouts: author photo, site name and the
   cookbook scale with the screen so they always fit on one row.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    .header-container {
        padding: 0 clamp(1rem, 2.5vw, 2rem);
    }

    .left-section {
        gap: clamp(1.25rem, 3vw, 3.5rem);
        min-width: 0;
    }

    .author-image-container {
        width: clamp(140px, 17vw, 220px);
        height: clamp(140px, 17vw, 220px);
    }

    .blog-name {
        font-size: clamp(2.2rem, 4.4vw, 4rem);
    }

    .author-name {
        font-size: clamp(1.2rem, 2.2vw, 2rem);
    }

    .header-book-section {
        margin-left: clamp(0.75rem, 2vw, 2rem);
    }


    .header-book {
        width: clamp(105px, 14vw, 180px);
        height: auto;
        aspect-ratio: 3 / 4;
    }
}

/* --------------------------------------------------------------------------
   Card grids: a 300px minimum column can't fit on narrow phones
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .blog-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .blog-card {
        min-width: 0;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   About page: on small phones place the photos relative to their column
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .author-images-stack-left,
    .author-images-stack-right {
        width: 100%;
    }

    .author-images-stack-left .author-image-frame-about:nth-child(1) { left: 8%; }
    .author-images-stack-left .author-image-frame-about:nth-child(2) { left: 20%; }
    .author-images-stack-left .author-image-frame-about:nth-child(3) { left: 4%; }
    .author-images-stack-right .author-image-frame-about:nth-child(1) { left: 14%; }
    .author-images-stack-right .author-image-frame-about:nth-child(2) { left: 6%; }
    .author-images-stack-right .author-image-frame-about:nth-child(3) { left: 24%; }
}

/* --------------------------------------------------------------------------
   Error pages (403/404/500) on small phones
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .error-page {
        padding: 1rem;
    }

    .error-container {
        width: 100%;
        box-sizing: border-box;
        padding: 2rem 1.25rem;
    }

    .error-container .btn {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }
}