/* Offentlig /kolleksjon (public/kolleksjon.html): statisk side.
   Bygger på landing-stilene i styles.css (.landing-*) og kolleksjons-
   paletten der (.kol: svart/koks/offwhite, --accent-tokenene overstyrt så
   ingenting blir blått). Her ligger bare det som er nytt for denne siden.
   Ingen translate-animasjoner. Bildene vises alltid uten beskjæring av
   plaggene; hoodie-utsnittene under klipper bare bort NABOPANELENE. */

/* nav.css (der .sr-only bor) lastes ikke her. */
.kol .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kol-brand { color: var(--text-primary); text-decoration: none; }
.kol-header-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.kol a.landing-cta:hover,
.kol a.landing-login-btn:hover { text-decoration: none; }

/* Felles container: bredere og venstrejustert (redaksjonelt), mye luft. */
.kol-hero,
.kol-section,
.kol-hoodie {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}
.kol .landing-kicker,
.kol .landing-eyebrow { text-align: left; margin-left: 0; }
.kol h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.8vw, 2.4rem);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
    text-align: left;
}

/* ---- 1. Intro ---- */
.kol-hero { padding-top: clamp(3rem, 9vh, 6rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.kol-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6) clamp(2rem, 5vw, 4.5rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.kol-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 11ch;
    overflow-wrap: break-word;
}
.kol-lead {
    margin: 0 0 var(--space-5);
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-secondary);
}
/* Statuslinjen: én rolig linje med en liten kvadratisk markør. */
.kol-status {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
}
.kol-status-mark {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--kol-coal);
    position: relative;
    top: -1px;
}
[data-theme="dark"] .kol-status-mark { background: var(--kol-off); }
.kol-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
}
.kol .landing-cta { font-size: 1rem; padding: 0.95rem 1.9rem; }

.kol-figure { margin: 0; }
.kol-figcap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.kol-textlink {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.kol-textlink:hover { text-decoration-thickness: 2px; }

/* ---- Seksjoner ---- */
.kol-section { padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }
/* Anker (#plaggene, #faq): ikke under den sticky headeren (69 px), som #hoodie. */
.kol-section[id] { scroll-margin-top: 69px; }
.kol-section + .kol-section { border-top: 1px solid var(--border-light); }
.kol-intro {
    max-width: 58ch;
    margin: 0 0 var(--space-10);
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ---- 2. Produktene: rolig rutenett med hårlinjer, ingen kort ---- */
.kol-products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-10) var(--space-8);
}
.kol-product {
    border-top: 2px solid var(--text-primary);
    padding-top: var(--space-4);
}
.kol-product-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.kol-num {
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.kol-product h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    flex: 1;
}
.kol-swatch {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-dark);
}
.kol-swatch--black { background: var(--kol-black); }
.kol-swatch--coal { background: var(--kol-coal); }
.kol-swatch--off { background: var(--kol-off); }
.kol-product-lead {
    margin: 0 0 var(--space-4);
    font-size: var(--font-base);
    line-height: 1.5;
    color: var(--text-primary);
}
.kol-specs { margin: 0; }
.kol-specs > div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-light);
    font-size: var(--font-sm);
    line-height: 1.5;
}
.kol-specs dt {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-secondary);
    padding-top: 2px;
}
.kol-specs dd { margin: 0; color: var(--text-primary); }
.kol-product-link { display: inline-block; margin-top: var(--space-3); font-size: var(--font-sm); }

/* ---- 3. Hoodien: svart bånd (samme i lys og mørk modus) ----
   Inni båndet snus tokenene: tekst og knapper offwhite, ingen blå. */
.kol-band {
    --text-primary: var(--kol-off);
    --text-secondary: #B8B2A8;        /* 8,6:1 på svart */
    --border: var(--kol-coal);
    --border-light: var(--kol-coal);
    --accent: var(--kol-off);
    --accent-aa: var(--kol-off);
    --accent-fill: var(--kol-off);
    --accent-dark: #DDD8CF;
    --on-accent: var(--kol-black);
    background: var(--kol-black);
    color: var(--text-primary);
    border-top: 1px solid var(--kol-coal);
    border-bottom: 1px solid var(--kol-coal);
    scroll-margin-top: 69px;
}
.kol-hoodie {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-8) clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-top: clamp(3.5rem, 9vh, 6rem);
    padding-bottom: clamp(3.5rem, 9vh, 6rem);
}
.kol-hoodie-copy p:not(.landing-kicker) {
    margin: 0 0 var(--space-4);
    font-size: var(--font-base);
    line-height: 1.65;
    color: var(--text-secondary);
}
.kol-band .kol-figcap { color: var(--text-secondary); }

/* Utsnittsvelgeren: fire like knapper i en rad, valgt = offwhite fyll.
   Kant #77726A på svart = 3,8:1 (WCAG 1.4.11); tekst offwhite 16,2:1. */
.kol-views {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-6);
}
.kol-views[hidden] { display: none; }
.kol-view-btn {
    min-height: 44px;
    padding: 0.55rem 0.4rem;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--kol-off);
    background: transparent;
    border: 1px solid #77726A;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.kol-view-btn:hover { border-color: var(--kol-off); }
.kol-view-btn[aria-pressed="true"] {
    background: var(--kol-off);
    border-color: var(--kol-off);
    color: var(--kol-black);
}
.kol .kol-view-btn:focus-visible {
    outline: 2px solid var(--kol-off);
    outline-offset: 3px;
}

/* ---- Hoodie-rammen: utsnitt av SAMME ark (1536×1024) ----
   Hvert utsnitt er et rektangel i arkets egne piksler (x, y, bredde,
   høyde). Bildet skaleres så hele rektangelet får plass i rammen
   («contain», aldri beskjæring av plagget), sentreres, og alt utenfor
   rektangelet klippes bort (nabopanelene). Rammen har arkets bakgrunns-
   farge, så det blir ingen skjøter. Juster tallene her ved nye ark.
   Målt 2026-10-02: forside-hoodie x 33–554, rygg x 570–1078, modell
   x 1161–1448 / y 57–876, bildetekster y 909–919, toppl. logo y 66–193. */
.kol {
    --kol-hv-front-x: 14;   --kol-hv-front-y: 212;  --kol-hv-front-w: 552;  --kol-hv-front-h: 732;
    --kol-hv-back-x: 558;   --kol-hv-back-y: 212;   --kol-hv-back-w: 540;   --kol-hv-back-h: 732;
    --kol-hv-fit-x: 1110;   --kol-hv-fit-y: 30;     --kol-hv-fit-w: 426;    --kol-hv-fit-h: 914;
    /* Rammens form (bredde / høyde): som arket på desktop, stående på mobil. */
    --kol-hv-frame: 1536 / 1024;
}
.kol-frame {
    --iw: 1536;
    --ih: 1024;
    --x: 0;
    --y: 0;
    --w: 1536;
    --h: 1024;
    position: relative;
    aspect-ratio: var(--kol-hv-frame);
}
.kol-frame[data-view="front"] { --x: var(--kol-hv-front-x); --y: var(--kol-hv-front-y); --w: var(--kol-hv-front-w); --h: var(--kol-hv-front-h); }
.kol-frame[data-view="back"]  { --x: var(--kol-hv-back-x);  --y: var(--kol-hv-back-y);  --w: var(--kol-hv-back-w);  --h: var(--kol-hv-back-h); }
.kol-frame[data-view="fit"]   { --x: var(--kol-hv-fit-x);   --y: var(--kol-hv-fit-y);   --w: var(--kol-hv-fit-w);   --h: var(--kol-hv-fit-h); }
.kol-frame img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    height: auto;
    /* contain: minste av (rammebredde / utsnittsbredde) og (rammehøyde / utsnittshøyde) */
    width: calc(100% * min(var(--iw) / var(--w), var(--iw) / (var(--h) * (var(--kol-hv-frame)))));
    /* utsnittets midtpunkt havner midt i rammen */
    transform: translate(calc((var(--x) + var(--w) / 2) / var(--iw) * -100%),
                         calc((var(--y) + var(--h) / 2) / var(--ih) * -100%));
    clip-path: inset(calc(var(--y) / var(--ih) * 100%)
                      calc((var(--iw) - var(--x) - var(--w)) / var(--iw) * 100%)
                      calc((var(--ih) - var(--y) - var(--h)) / var(--ih) * 100%)
                      calc(var(--x) / var(--iw) * 100%));
}

/* ---- 4. Bakgrunnen ---- */
.kol-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-5) clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.kol-about-grid h2 { margin: 0; }
.kol-about-grid p {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(1.05rem, 2.3vw, 1.2rem);
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ---- FAQ ---- */
.kol .kol-faq { max-width: 720px; margin: 0; }
.kol .landing-faq summary:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 5. Neste steg ---- */
.kol-final .kol-intro { margin-bottom: var(--space-6); }

/* ---- Mobil ---- */
@media (max-width: 899px) {
    .kol { --kol-hv-frame: 3 / 4; }
    .kol-hero-grid,
    .kol-hoodie,
    .kol-about-grid { grid-template-columns: minmax(0, 1fr); }
    .kol-hero h1 { max-width: none; }
    .kol-hoodie { gap: var(--space-6); }
}
@media (max-width: 600px) {
    .kol-ctas { flex-direction: column; align-items: stretch; text-align: center; }
    .kol-products { gap: var(--space-8); }
    .kol-views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vektorlogo i hero (img/logo/*.svg). Ett motiv, aldri strukket: bredden styres,
   høyden følger viewBox. 240 px nedre grense holder COACHING lesbar. */
.kol-logo { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); line-height: 0; }
.kol-logo img { display: block; width: clamp(240px, 30vw, 380px); height: auto; }
.kol-logo .kol-logo-light { display: none; }
[data-theme="dark"] .kol-logo .kol-logo-dark { display: none; }
[data-theme="dark"] .kol-logo .kol-logo-light { display: block; }
.kol-logo .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* viewBox har 12/765 luft til venstre: trekk logoen ut så den flukter med H1. */
.kol-logo img { margin-left: calc(clamp(240px, 30vw, 380px) * -12 / 765); }