/* =========================================================
   Mobile layout

   Everything here is wrapped in a max-width query, so the
   desktop design in style.css is never touched. This file is
   loaded after style.css: at the same weight, the last rule
   wins, which is what lets these overrides land.
   ========================================================= */

/* ---------------------------------------------------------
   Header — the row sits on the same edges as the white
   surface below it. main is padded by --gutter on both
   sides, so the header uses the same value instead of its
   own narrower one: the logo moves in from the left, the
   menu button in from the right.
   --------------------------------------------------------- */
@media (max-width: 860px) {
    .site-header {
        padding-right: var(--gutter);
        padding-left: var(--gutter);
    }

    /* ---------------------------------------------------------
       Open menu — every capsule as wide as the widest one.
       The list is only as wide as its longest label; making the
       links fill it squares off the whole column.
       --------------------------------------------------------- */
    .primary-nav__list { width: max-content; }

    .primary-nav__link {
        width: 100%;
        min-width: var(--nav-item-w);
    }
}

@media (max-width: 620px) {
    .site-header {
        padding-right: var(--gutter);
        padding-left: var(--gutter);
    }

    /* ---------------------------------------------------------
       Home footer — four columns leave about 60px each, which
       breaks "©2026 STUDIO GUNGOR" over three lines and
       "Şartlar ve Koşullar" over two. Two columns give every
       entry room to stay on one line.
       --------------------------------------------------------- */
    .footer-links {
        grid-template-columns: repeat(2, auto);
        justify-content: space-between;
        gap: 12px 16px;
        padding: 28px var(--gutter) 16px;
    }

    .footer-links__copy,
    .footer-links__link { white-space: nowrap; }

    /* The last entry closes the row on the right, as it does
       on the wide layout */
    .footer-links__link:nth-child(even) { justify-self: end; }

    /* ---------------------------------------------------------
       Inner-page footer — the bottom bar is one flex row on the
       wide layout: the links and the icons side by side, closing
       the page on the right. On a phone that row asked for more
       width than the screen has and pushed the page sideways.
       Here it wraps and reads from the left instead.
       --------------------------------------------------------- */
    .site-footer--full .footer-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 14px 20px;
        padding-top: 40px;
    }

    /* The icons take their own line: the round back-to-top
       button sits in the right corner and would cover them */
    .footer-socials {
        width: 100%;
        padding-right: 58px;
    }

    /* Left padding was set for a wide screen; on a phone the
       block reads better with even margins */
    .footer-body { padding: 44px var(--gutter) 24px; }

    /* ---------------------------------------------------------
       Contact page — the phone and e-mail rows put a 130px
       label beside the value, which together asked for more
       width than the screen has and stretched the page. The
       label now sits above its value.
       --------------------------------------------------------- */
    .contact-person,
    .contact-form-panel { min-width: 0; }

    .contact-details__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .contact-details__row dd { overflow-wrap: anywhere; }

    /* ---------------------------------------------------------
       Project page, the disciplines above the title — set as
       one long line they filled four rows and broke mid-word.
       Two columns give two tidy rows; the brackets are a wide
       screen flourish and step aside here.
       --------------------------------------------------------- */
    .pd-intro__tag {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 4px 14px;
        text-align: left;
    }

    .pd-intro__paren { display: none; }

    /* ---------------------------------------------------------
       Three posters — side by side they were thumbnails, so the
       row now scrolls: one poster fills most of the screen and
       the next one waits at the edge.
       --------------------------------------------------------- */
    .pj-posters {
        display: flex;
        gap: 12px;
        padding: 0 var(--gutter) 70px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--gutter);
        overscroll-behavior-x: contain;
    }

    .pj-poster {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    /* A poster is cropped to 3:4 on the wide layout, where it is
       one of three. Alone on a phone it is shown whole, in the
       shape the file was made in */
    .pj-poster--photo { aspect-ratio: auto; }

    .pj-poster--photo img,
    .pj-poster--photo video {
        height: auto;
        object-fit: contain;
    }

    /* ---------------------------------------------------------
       The four closing blocks — packaging above, the garment,
       the product and the size ladder below. Each one keeps the
       same square so the group reads as one grid, and the
       ladder takes the full width it needs.
       --------------------------------------------------------- */
    .pj-pack__flat,
    .pj-pack__box { aspect-ratio: 1 / 1; }

    .pj-scale {
        grid-template-rows: auto;
        gap: 8px;
    }

    .pj-scale__wear {
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }

    .pj-scale__product {
        aspect-ratio: 1 / 1;
        padding: 20px;
    }

    .pj-scale__steps {
        grid-column: 1 / -1;
        padding: 24px var(--gutter);
    }

    .pj-scale__steps ul { gap: 14px; }

    /* The step is a height on the wide layout; a logo lockup is
       far wider than it is tall, so here the ladder is measured
       across instead and can never outgrow its box */
    .pj-scale__logo {
        height: auto;
        width: calc(var(--step) * 3.2);
        max-width: 100%;
    }

    /* ---------------------------------------------------------
       Project page, colour section — the swatch row alone is
       308px wide, so the two-column split could not hold it and
       the page grew past the screen. One column below the
       scene, with smaller swatches that wrap if they must.
       --------------------------------------------------------- */
    .pj-palette {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    /* The card is a 5:4 panel beside the scene on the wide
       layout. Under it, that shape would be a huge empty square,
       so it becomes a band the swatches sit centred in */
    .pj-palette__card {
        aspect-ratio: auto;
        min-height: 120px;
        justify-content: center;
        padding: 22px;
    }

    .pj-palette__swatches {
        flex-wrap: wrap;
        gap: 14px;
    }

    .pj-palette__swatches li {
        width: 36px;
        height: 36px;
    }
}