/* /cyfrowe-archiwum/ — the PISF publication (home/archive_page.html, docs/cyfrowe-archiwum/PLAN.md).
   Only what the page adds: the two-column grid, the hero, the module headings and the carousel rows.
   The cards are the catalogue's (home/catalogue.css), the film module is home/film-archive.css, and the
   colours, type and button idiom come from the copied live stylesheets, so nothing is redefined here. */

.archive-page main {
    /* Clears the fixed header. 8rem is what `.catalog-page-section` uses, at every width. */
    padding-top: 8rem;
}

/* The site's stylesheet makes `main` a column flex container, so each block below is a flex item — and a
   flex item with an auto cross-axis margin is not stretched to the container, it is sized to its own
   content. Every block here centres itself with `margin: 0 auto`, so every one of them was. A module's
   content is a carousel holding all of its subcategory's cards, which puts its min-content width at some
   10800px; `max-width` pulled that back to 1400px and no further, so below a 1400px viewport the module's
   heading, its count and its subtitle were cut off at the right edge — `main` has `overflow: clip`, so the
   page did not even scroll to them. The rules fared the other way: a `<hr>` has no content, so the wrapper
   shrank to its own 2rem of padding and the line all but vanished. Asking for the page's width makes the
   cross size definite again; `max-width` and the auto margins still centre the block on a wide screen.
   Found 2026-10-25 on a 402px phone. */
.archive-hero,
.archive-rule-wrap,
.archive-module {
    width: 100%;
}

/* ---- the grid --------------------------------------------------------- */

/* The page's one layout idea: a wide left column for the name of a thing, a narrower right one for
   the prose about it. The hero and both module headings use it, which is what makes the two modules
   read as the same kind of object. Below 900px both columns take the full width and stack. */
.archive-hero,
.archive-module-head,
.archive-page .film-archive-header {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.archive-hero-main,
.archive-module-head-main,
.archive-page .film-archive-head-main {
    flex: 1 1 420px;
    min-width: 0;
}

.archive-hero-aside,
.archive-module-subtitle,
.archive-page .film-archive-subtitle {
    flex: 1 1 380px;
    min-width: 0;
}

/* The small caps label over a heading: "Publikacja cyfrowa", then "01" and "02". */
.archive-eyebrow,
.archive-page .film-archive-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #444;
    margin-bottom: 0.7rem;
}

/* The black line between the hero and each module. The wrapper carries the page's own 2rem inset,
   so the line starts and ends where the headings above and below it do. */
.archive-rule-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.archive-rule {
    margin: 0;
    border: 0;
    border-top: 2px solid #111;
}

/* ---- hero --------------------------------------------------------------- */

.archive-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

/* More air than a module's "01"/"02": this one carries a whole line of words. */
.archive-hero-main .archive-eyebrow {
    margin-bottom: 1.25rem;
}

.archive-title {
    font-size: clamp(1.5rem, 3.6vw, 2.9rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.07;
    margin: 0;
}

.archive-title-dot {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    background: var(--primary-orange);
    border-radius: 50%;
    margin-left: 0.3rem;
    vertical-align: 0.08em;
}

/* Sits at the foot of its column, so the paragraph's last line and the title's last line meet on
   roughly the same level however many lines the title takes. */
.archive-hero-aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5rem;
}

.archive-intro p {
    font-size: 0.97rem;
    line-height: 1.72;
    color: #3d3d3d;
    margin: 0 0 0.8rem;
}

.archive-intro p:last-child {
    margin-bottom: 0;
}

/* ---- the funding credit ------------------------------------------------- */

.archive-funding {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.15rem;
    border-top: 1px solid #d8d5d1;
}

.archive-funding-logo {
    /* The file is 240px wide for a 2× screen; 2.77:1, so this draws 120 × 43. */
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

.archive-funding-text {
    font-size: 0.72rem;
    line-height: 1.55;
    color: #555;
    margin: 0;
}

/* ---- a module ----------------------------------------------------------- */

.archive-module {
    padding: 2.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* The film module brings its own padding (film-archive.css), so this one only centres it. */
.archive-module-film {
    padding: 0;
}

/* The rules above and below each module set the rhythm now, so the partial's generous 4rem top and
   bottom (tuned for the home page, where it stands alone) comes down to the 2.5rem the catalogue
   module uses. Its side padding stays: both modules clear the page edge by 2rem. */
.archive-module-film .film-archive-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.archive-module-head {
    margin-bottom: 2rem;
}

.archive-module-title {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.18;
    margin: 0;
}

/* What the branch holds, under its heading: "170 obiektów · 69 z modelem 3D". */
.archive-module-count {
    font-size: 0.78rem;
    color: #555;
    margin: 0.85rem 0 0;
}

.archive-module-subtitle,
.archive-page .film-archive-subtitle {
    font-size: 0.85rem;
    line-height: 1.68;
    color: #444;
    max-width: none;
    margin: 0;
}

.archive-empty {
    font-size: 0.9rem;
    color: #666;
}

/* ---- one row ------------------------------------------------------------ */

.archive-row {
    margin-bottom: 2.5rem;
}

.archive-row-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.archive-row-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.archive-row-name {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.archive-row-name:hover,
.archive-row-name:focus-visible {
    border-bottom-color: var(--primary-orange);
}

/* How many cards the row holds, after the "|" the mockup draws. The script rewrites the number when the
   3D toggle is on, so the heading never claims a count the row is not showing. */
.archive-row-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.04em;
}

.archive-row-count::before {
    content: "|";
    margin-right: 0.75rem;
    color: #c8c8c8;
}

/* The "MODELE 3D" switch. Orange and pressable like the site's other buttons; pressed it inverts, so the
   state is legible without colour alone (WCAG 1.4.1). */
.archive-3d-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 6px 14px;
    border: 2px solid #000;
    border-radius: 0.4rem;
    background: var(--primary-orange);
    box-shadow: 2px 2px 0 0 #000;
    color: #000;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.archive-3d-count {
    font-weight: 500;
    opacity: 0.75;
}

.archive-3d-toggle:hover {
    background: #ffa033;
}

.archive-3d-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.archive-3d-toggle[aria-pressed="true"] {
    background: #000;
    color: #fff;
    box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.25);
}

.archive-3d-toggle[aria-pressed="true"]::before {
    content: "✕";
    font-size: 0.8rem;
    line-height: 1;
}

.archive-row-nav {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.archive-nav-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #000;
    transition: background 0.15s, opacity 0.15s;
}

.archive-nav-btn:hover:not(:disabled) {
    background: var(--primary-orange);
}

.archive-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---- the carousel ------------------------------------------------------- */

.archive-row-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    /* The arrows above do the scrolling; the bar under 170 cards of thumbnails is noise. Dragging,
       the wheel and the keyboard still work, and the arrows are the visible affordance. */
    scrollbar-width: none;
}

.archive-row-track::-webkit-scrollbar {
    display: none;
}

.archive-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
}

.archive-card .product-card {
    min-width: 0;
    width: 100%;
}

/* Hidden by the 3D toggle. `hidden` alone would be overridden by the flex display above. */
.archive-card[hidden] {
    display: none;
}

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

@media (max-width: 768px) {
    /* One column: 420px + 380px + a 3rem gap cannot sit side by side here anyway, and the gap
       would otherwise open as vertical space between the two stacked halves. */
    .archive-hero,
    .archive-module-head,
    .archive-page .film-archive-header {
        gap: 1.5rem;
    }

    .archive-hero {
        padding: 0 1rem 1.5rem;
    }

    .archive-rule-wrap {
        padding: 0 1rem;
    }

    /* Not the film wrapper: the partial sets its own phone padding, and this rule, being the later
       one of equal specificity, would otherwise win over `.archive-module-film` and double it. */
    .archive-module:not(.archive-module-film) {
        padding: 1.5rem 1rem;
    }

    /* The arrows go: on a touch screen the row is swiped, and at this width they would take the whole
       line the heading needs. The count and the 3D switch stay. */
    .archive-row-nav {
        display: none;
    }

    .archive-row-head {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .archive-card {
        flex-basis: 170px;
    }

}