/* Portfolio: karuzela na stronie głównej, lista z filtrem i strona projektu. */

.arrows { display: none; gap: 7px; }
.arrows button {
    width: 40px; height: 40px; border: 1px solid var(--line-strong);
    font-size: 15px; color: var(--ink); transition: background-color 0.18s, border-color 0.18s, opacity 0.18s;
}
.arrows button:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .arrows button:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink); }
}

/* Na telefonie widać kawałek następnego projektu — sygnał, że da się przesunąć palcem. */
.carousel {
    --gap: 12px;
    display: flex; gap: var(--gap);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 84%; scroll-snap-align: start; }

.card {
    position: relative; height: 100%; border: 1px solid var(--line); padding: 10px; background: #fff;
    transition: border-color 0.45s ease, transform var(--press-out), box-shadow var(--press-out);
}
.card__link { display: block; }
.card.is-flash { border-color: var(--ink-strong); }
.card__crop { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.card__crop { position: relative; }
.card__zoom { position: absolute; inset: 0; }
.card__render, .card__drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__render { object-fit: cover; }
/* Rysunek leży pod spodem: z myszą wychodzi po najechaniu, na telefonie przyciskiem. */
.card__drawing { object-fit: contain; padding: 5%; background: #fff; opacity: 0; transition: opacity 0.45s ease; }
.card.is-drawing .card__drawing { opacity: 1; }
.card__flip {
    position: absolute; top: 18px; right: 18px; z-index: 2; min-height: 36px; padding: 6px 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-strong); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.card__flip[aria-pressed="true"] { background: var(--ink-strong); color: #fff; border-color: var(--ink-strong); }
@media (hover: hover) and (pointer: fine) {
    .card[data-card-drawing]:hover .card__drawing { opacity: 1; }
    .card__flip { display: none; }
}
.carousel-count { flex: 0 0 auto; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
/* „Zatrzymaj / Wznów” samoczynnego przesuwania — w tym samym tonie co licznik obok. */
.carousel-pause {
    min-height: 40px; padding-inline: 4px; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.carousel-pause[aria-pressed="true"] { color: var(--ink-strong); }
.card__caption {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.card__caption b { font-weight: 500; color: var(--ink); }
.card__title { display: block; margin-top: 12px; font-size: 15px; line-height: 1.35; font-weight: 400; color: var(--ink-strong); }
.card__title + .card__caption { margin-top: 8px; padding-top: 8px; }

.portfolio-more { margin-top: 22px; }

/* ---------- lista projektów ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 22px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-strong);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.grid { display: grid; gap: 14px; list-style: none; }
.grid > [hidden] { display: none; }

/* ---------- strona projektu ---------- */
.project-head { display: grid; gap: 22px; padding-block: 18px 0; }
/* Metryka projektu jako tabliczka rysunkowa pod kadrem — ten sam rysunek co tabliczka w nagłówku strony głównej.
   Rubryki są tylko wypełnione, więc zamiast siatki rzędy z zawijaniem: komórki w każdym rzędzie rosną do jego
   końca — przy dowolnej liczbie rubryk nie zostaje szara dziura (tło kontenera to linie między komórkami). */
.title-block {
    display: flex; flex-wrap: wrap; gap: 1px; margin: 0;
    background: var(--line); border: 1px solid var(--line-strong); border-top: 0;
}
.title-block__cell { flex: 1 1 140px; padding: 8px 10px; background: #fff; }
.title-block__cell--wide { flex-basis: 100%; }
.title-block dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.title-block dd { margin: 3px 0 0; font-size: 13px; color: var(--ink-strong); }
.title-block__cell--wide:first-child dd { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.project-body { display: grid; gap: 28px; }
.gallery { display: grid; gap: 12px; }
.gallery figure { overflow: hidden; background: var(--paper-2); }
.gallery figcaption { padding-top: 8px; font-size: 12px; color: var(--muted); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.pager a { display: grid; gap: 4px; min-height: 48px; }
.pager span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pager b { font-weight: 400; color: var(--ink-strong); }
.pager__next { text-align: right; justify-items: end; }

@media (min-width: 621px) {
    .carousel > * { flex-basis: calc((100% - var(--gap)) / 2); }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .title-block__cell--wide { flex: 2 1 280px; }
}
@media (min-width: 900px) {
    .arrows { display: flex; }
    .carousel {
        --gap: clamp(12px, 1.8vw, 26px);
        padding-inline: 0; margin-inline: 0; scroll-padding-inline: 0;
    }
    .carousel > * { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
    .card { padding: clamp(10px, 1vw, 14px); }
    .grid { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); }
    .project-head { grid-template-columns: minmax(260px, 0.8fr) 1.4fr; align-items: end; gap: clamp(28px, 4vw, 56px); padding-block: clamp(30px, 4vw, 52px) 0; }
    .project-head .project-sheet { order: 2; }
    .project-body { grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
}