/* ─────────────────────────────────────────────────────────────────────────
   gbv.css — projektspecifika klasser för gb-vykortsarkiv
   Bygger ovanpå gb-design.css (variabler, knappar, kort, lede).
   ───────────────────────────────────────────────────────────────────── */

/* ─── Astra-neutralisering ────────────────────────────────────────────
   Astra sätter body.ast-single-post .entry-content a { text-decoration:
   underline } (0,2,1). Pluginets klass-regler (0,1,1) förlorar, så vi
   neutraliserar globalt på pluginets wrappers. Compound selector — INTE
   descendant — eftersom .ast-single-post sitter PÅ body. */
body.ast-single-post .entry-content .gbv-wrap a,
body.ast-single-post .entry-content .gbv-wrap-app a,
body.ast-single-post .entry-content .gbv-narrow a,
body.ast-single-post .entry-content .gbv-hero a,
body.ast-single-post .entry-content .gbv-footer a { text-decoration: none; }

/* ─── Layout ──────────────────────────────────────────────────────────── */

/* Shortcode-wrappern. Sätter main-content-bredden enligt designguiden
   (--gb-container = 1100px) så vykortsarkivets sidor matchar övriga
   plugin-sidors bredd istället för att ärva Astras content-area. */
.gbv-wrap-app {
    max-width: var(--gb-container, 1100px);
    margin: 0 auto;
    padding: 0 24px;
    /* Heritage-mapping: sea = kort som rest över tid */
    --sec: var(--gb-sea, #3D6675);
    --sec-soft: var(--gb-sea-soft, rgba(61, 102, 117, 0.12));
}

.gbv-wrap {
    max-width: var(--gb-container, 1100px);
    margin: 0 auto;
    padding: 0 24px;
    --sec: var(--gb-sea, #3D6675);
    --sec-soft: var(--gb-sea-soft, rgba(61, 102, 117, 0.12));
}

.gbv-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Topbar ─────────────────────────────────────────────────────────── */

.gbv-topbar {
    border-bottom: 1px solid var(--gb-border);
    background: var(--gb-bg);
}
.gbv-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
    max-width: var(--gb-container, 1100px);
    margin: 0 auto;
}
.gbv-topbar__brand {
    font-family: var(--gb-font-display);
    font-style: italic;
    font-size: 24px;
    color: var(--gb-accent);
    text-decoration: none;
    line-height: 1;
}
.gbv-topbar__brand:hover { color: var(--gb-ink); }

/* ─── Sökruta ────────────────────────────────────────────────────────── */

/* Sökrutan låg som DÖD CSS här fram till 2026-08-21: klasserna fanns, men
   ingen markup i pluginet använde dem — formuläret levde bara i den lokala
   förhandsvyn publik/, som inte deployas. Sökningen var alltså byggd och
   oåtkomlig. Se vyer/_sokformular.php. */

.gbv-sok__rad { display: flex; align-items: center; gap: 8px; }
.gbv-sok__input {
    font-family: var(--gb-font-body);
    font-size: 15px;
    padding: 9px 14px;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    background: var(--gb-bg);
    color: var(--gb-ink);
    min-width: 280px;
    transition: border-color 200ms ease-out;
}
.gbv-sok__input:focus {
    outline: none;
    border-color: var(--gb-accent-strong);
}
.gbv-sok__knapp {
    font-family: var(--gb-font-body);
    font-size: 15px;
    padding: 9px 18px;
    background: var(--gb-ink);
    color: #fff;
    border: 1px solid var(--gb-ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms;
}
.gbv-sok__knapp:hover { background: var(--gb-accent); border-color: var(--gb-accent); }

/* ─── Hero ──────────────────────────────────────────────────────────── */

.gbv-hero {
    padding: 72px 24px 48px;
    background: var(--gb-bg-warm);
    border-bottom: 1px solid var(--gb-border);
    text-align: center;
}
.gbv-hero__titel {
    font-family: var(--gb-font-display);
    font-weight: 500;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    color: var(--gb-ink);
}
.gbv-hero__titel em {
    color: var(--gb-accent);
    font-style: italic;
}
.gbv-hero__lede {
    font-family: var(--gb-font-body);
    font-style: italic;
    color: var(--gb-muted);
    font-size: 18px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 auto;
}

/* ─── Sidhuvud (för indexvyer) ───────────────────────────────────────── */

.gbv-sidhuvud {
    /* Topp via designsystem-token: sidan har Astras sidtitel ovanför, så
       arkivhuvudet äger title→eyebrow-gapet (16 + temats 16 = 32). Botten
       (16) är vykortsarkivets egen. Standalone-appen (publik/) behåller 48px
       eftersom den saknar titel ovanför. */
    padding: var(--gb-hero-topp, 16px) 0 16px;
}
.gbv-sidhuvud__eyebrow {
    font-family: var(--gb-font-body);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gb-muted);
    margin: 0 0 8px;
    font-weight: 500;
}
.gbv-sidhuvud__titel {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--sec, var(--gb-accent));
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    margin: 0 0 16px;
    position: relative;
}
.gbv-sidhuvud__titel::after {
    content: ""; display: block; height: 3px; width: 64px;
    margin-top: 16px; border-radius: 2px;
    background: var(--sec, var(--gb-accent));
    transition: width 0.8s cubic-bezier(0.2,0.8,0.2,1) 0.12s, opacity 0.6s ease;
}
.gb-reveal-on .gbv-sidhuvud__titel:not(.gb-in)::after { width: 0; opacity: 0; }
.gb-reveal-on .gbv-sidhuvud > .gb-rev {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
}
.gb-reveal-on .gbv-sidhuvud > .gb-rev.gb-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .gb-reveal-on .gbv-sidhuvud > .gb-rev { opacity: 1 !important; transform: none !important; }
}
.gbv-sidhuvud__lede {
    font-family: var(--gb-font-body);
    font-style: italic;
    color: var(--gb-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}

/* Brödsmulor */
.gbv-brodsmulor {
    margin: 18px 0 32px;
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--gb-muted);
}
.gbv-brodsmulor a {
    color: var(--gb-muted);
    text-decoration: none;
}
.gbv-brodsmulor a:hover { color: var(--gb-accent); }
.gbv-brodsmulor__sep { margin: 0 8px; opacity: 0.5; }

/* ─── Huvudknappar (landningssida) ──────────────────────────────────── */

.gbv-knappgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 32px 0;
}
.gbv-knapp {
    padding: 24px 24px 22px;
    background: var(--gb-bg);
    border: 1px solid var(--gb-border);
    border-radius: 8px;
    transition: border-color 200ms ease-out;
}
.gbv-knapp:hover { border-color: var(--gb-accent-strong); }
.gbv-knapp__titel {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-ink);
    font-size: 24px;
    margin: 0 0 14px;
    line-height: 1.2;
}
.gbv-knapp__rad {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gbv-knapp__formatlank {
    font-family: var(--gb-font-body);
    font-size: 14px;
    padding: 7px 14px;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    color: var(--gb-ink-soft);
    background: var(--gb-bg);
    transition: border-color 200ms, color 200ms, background 200ms;
}
.gbv-knapp__formatlank:hover {
    border-color: var(--gb-accent);
    color: var(--gb-accent);
    background: var(--gb-accent-soft);
}

/* Sektionsrubrik i landningssidan */
.gbv-sektionsrubrik {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-accent);
    font-size: 26px;
    margin: 56px 0 16px;
}

/* Info-länkar (landningssida) */
.gbv-infolista {
    list-style: none;
    padding: 0;
    margin: 0 0 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
}
.gbv-infolista li { margin: 0; }
.gbv-infolista a {
    font-family: var(--gb-font-body);
    font-style: italic;
    color: var(--gb-ink-soft);
    font-size: 16px;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    padding-bottom: 2px;
    transition: color 200ms;
}
.gbv-infolista a:hover {
    color: var(--gb-accent);
    border-bottom-color: var(--gb-accent-strong);
}

/* ─── Indexlistor (länkade rader) ────────────────────────────────────── */

.gbv-indexlista {
    list-style: none;
    padding: 0;
    margin: 24px 0 48px;
    max-width: 760px;
}
.gbv-indexlista li {
    margin: 0 0 4px;
}
.gbv-indexlista a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gb-border);
    font-family: var(--gb-font-body);
    font-size: 16px;
    color: var(--gb-ink);
    text-decoration: none;
    transition: color 200ms;
}
.gbv-indexlista a:hover { color: var(--gb-accent); }
.gbv-indexlista__rad-typkod {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gb-border);
    font-family: var(--gb-font-body);
    font-size: 16px;
    color: var(--gb-ink);
}
.gbv-indexlista__rad-typkod a {
    display: inline;
    padding: 0;
    border: none;
    color: var(--gb-ink);
    text-decoration: none;
    transition: color 200ms;
}
.gbv-indexlista__rad-typkod a:hover { color: var(--gb-accent); }
.gbv-indexlista__inaktiv { color: var(--gb-muted); opacity: 0.55; }
.gbv-pdf-lank {
    margin: 8px 0;
    padding: 10px 14px;
    border: 1px solid var(--gb-border);
    border-radius: 4px;
    background: var(--gb-bg-warm, #FAF7F1);
}
.gbv-pdf-lank a { color: var(--gb-accent); text-decoration: none; }
.gbv-pdf-lank a:hover { text-decoration: underline; }
.gbv-pdf-lank a::before { content: "📄 "; }
.gbv-indexlista__namn { flex: 1; }
.gbv-indexlista__antal {
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--gb-muted);
    white-space: nowrap;
}

/* Format-toggle (gamla/nya) */
.gbv-toggle {
    display: inline-flex;
    border: 1px solid var(--gb-border);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0 0;
}
.gbv-toggle a {
    font-family: var(--gb-font-body);
    font-size: 14px;
    padding: 8px 18px;
    color: var(--gb-ink-soft);
    text-decoration: none;
    transition: background 200ms, color 200ms;
}
.gbv-toggle a:hover { color: var(--gb-accent); }
.gbv-toggle a.aktiv {
    background: var(--gb-ink);
    color: #fff;
}

/* ─── Kort-grid (lista) ──────────────────────────────────────────────── */

.gbv-kortgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
    margin: 24px 0 32px;
}
.gbv-kort {
    background: var(--gb-bg);
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 200ms ease-out, transform 200ms ease-out;
    display: flex;
    flex-direction: column;
}
.gbv-kort:hover {
    border-color: var(--gb-accent-strong);
    transform: translateY(-2px);
}
.gbv-kort__bild {
    aspect-ratio: 3/2;
    background: var(--gb-accent-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gbv-kort__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gbv-kort__bild--saknas {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-accent);
    font-size: 14px;
}
.gbv-kort__innehall { padding: 14px 16px 18px; }
.gbv-kort__namn {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-ink);
    font-size: 18px;
    margin: 0 0 4px;
    line-height: 1.25;
    transition: color 200ms;
}
.gbv-kort:hover .gbv-kort__namn { color: var(--gb-accent); }
.gbv-kort__meta {
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--gb-muted);
    margin: 0;
}

/* Paginering */
.gbv-paginering {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 32px 0 64px;
    font-family: var(--gb-font-body);
}
.gbv-paginering__lank {
    font-style: italic;
    color: var(--gb-ink-soft);
    text-decoration: none;
}
.gbv-paginering__lank:hover { color: var(--gb-accent); }
.gbv-paginering__lank--inaktiv {
    color: var(--gb-border);
    pointer-events: none;
}
.gbv-paginering__info {
    font-style: italic;
    font-size: 14px;
    color: var(--gb-muted);
}

/* ─── Enskild vykortsvy ─────────────────────────────────────────────── */

.gbv-vykort {
    padding: 32px 0 64px;
}
.gbv-vykort__bilder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 24px 0 40px;
}
@media (max-width: 800px) {
    .gbv-vykort__bilder { grid-template-columns: 1fr; }
}
.gbv-vykort__bild {
    background: var(--gb-bg-warm);
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
}
.gbv-vykort__bild img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.gbv-vykort__bild__etikett {
    margin: 14px 0 0;
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--gb-muted);
}

/* Metadata-tabell */
.gbv-meta {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-family: var(--gb-font-body);
    font-size: 16px;
}
.gbv-meta th {
    text-align: left;
    font-weight: 500;
    color: var(--gb-muted);
    padding: 10px 16px 10px 0;
    width: 180px;
    vertical-align: top;
    border-bottom: 1px solid var(--gb-border);
}
.gbv-meta td {
    padding: 10px 0;
    color: var(--gb-ink);
    border-bottom: 1px solid var(--gb-border);
}
.gbv-meta a { color: var(--gb-accent); }
.gbv-meta a:hover { color: var(--gb-ink); }
@media (max-width: 800px) {
    .gbv-meta th { width: 140px; font-size: 14px; padding-right: 12px; }
}
@media (max-width: 500px) {
    .gbv-meta th { width: 110px; font-size: 13px; padding-right: 10px; }
    .gbv-meta td { font-size: 14px; }
}

/* Korslänkar */
.gbv-korslank {
    margin: 48px 0;
}
.gbv-korslank__titel {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-accent);
    font-size: 22px;
    margin: 0 0 12px;
}

/* Intro-stycken på landningssidan — brödtext-bredd enligt designmanualen
   (62ch ≈ läsbar radlängd). Vänsterställd, inte centrerad. */
.gbv-intro {
    max-width: 62ch;
    margin: 32px 0 48px;
    font-family: var(--gb-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--gb-ink);
}
.gbv-intro p { margin: 0 0 1em; }
.gbv-intro p:last-child { margin-bottom: 0; }
.gbv-intro em { font-style: italic; color: var(--gb-ink); }
.gbv-intro a {
    color: var(--gb-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--gb-accent-strong);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}
.gbv-intro a:hover {
    color: var(--gb-ink);
    border-bottom-color: var(--gb-ink);
}

/* Info-sida (artikel) — vänsterställd brödtext med läsbar bredd.
   Sidhuvudet (gbv-sidhuvud) ligger fullbredd ovanför, samma mönster som
   tidningsarkivets gbta-detalj — container är bred, text-element har egen
   max-width. */
.gbv-artikel {
    padding: 24px 0 64px;
    max-width: 760px;
    font-family: var(--gb-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--gb-ink);
}
.gbv-artikel h1,
.gbv-artikel h2,
.gbv-artikel h3 {
    font-family: var(--gb-font-display);
    font-style: italic;
    color: var(--gb-accent);
}
.gbv-artikel p { margin: 0 0 1em; }
.gbv-artikel ul,
.gbv-artikel ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.gbv-artikel li { margin: 0 0 0.35em; }
.gbv-artikel a {
    color: var(--gb-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--gb-accent-strong);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}
.gbv-artikel a:hover {
    color: var(--gb-ink);
    border-bottom-color: var(--gb-ink);
}

/* WP-block-innehåll städas inte; styla nedärvt så det smälter in */
.gbv-artikel figure {
    margin: 24px 0;
    clear: both;
}
.gbv-artikel figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.gbv-artikel figcaption,
.gbv-artikel .wp-element-caption {
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--gb-muted);
    margin-top: 8px;
    text-align: center;
}
/* Info-sidornas WP-innehåll använder alignleft/alignright för att flyta
   bilder med text runt. Vi neutraliserar floats så sidan blir enkolumns —
   varje figure blir ett blockelement, text kommer efter, inte runt. */
.gbv-artikel figure.alignleft,
.gbv-artikel figure.alignright,
.gbv-artikel figure.aligncenter {
    float: none;
    margin: 24px 0;
    max-width: 100%;
}

.gbv-artikel table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 15px;
}
.gbv-artikel th,
.gbv-artikel td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gb-border);
    vertical-align: top;
}
.gbv-artikel th {
    font-weight: 500;
    color: var(--gb-muted);
    background: var(--gb-bg-warm);
}
.gbv-artikel .is-style-stripes tbody tr:nth-child(odd) {
    background: var(--gb-bg-warm);
}

.gbv-artikel strong { font-weight: 500; color: var(--gb-ink); }

/* Footer */
.gbv-footer {
    border-top: 1px solid var(--gb-border);
    padding: 32px 24px;
    text-align: center;
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--gb-muted);
    background: var(--gb-bg-warm);
}
.gbv-footer a { color: var(--gb-muted); text-decoration: underline; }
.gbv-footer a:hover { color: var(--gb-accent); }

/* Tom-tillstånd */
.gbv-tom {
    padding: 48px 24px;
    text-align: center;
    font-family: var(--gb-font-body);
    font-style: italic;
    color: var(--gb-muted);
}

/* ─── Lightbox ───────────────────────────────────────────────────────── */

/* Bilder som ska kunna förstoras */
.gbv-zoom {
    cursor: zoom-in;
    transition: opacity 200ms ease-out;
}
.gbv-zoom:hover { opacity: 0.92; }

.gbv-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(31, 27, 22, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}
.gbv-lightbox.aktiv { display: flex; }

.gbv-lightbox__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
    cursor: default;
}

.gbv-lightbox__bild {
    max-width: 100%;
    max-height: calc(100vh - 130px);
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    background: var(--gb-bg);
}

.gbv-lightbox__etikett {
    color: rgba(250, 247, 241, 0.78);
    font-family: var(--gb-font-body);
    font-style: italic;
    font-size: 14px;
    text-align: center;
}

/* Stäng-knapp — pill i bildarkivets stil: kursiv ×, terrakotta border,
   hover fyller med terrakotta. */
.gbv-lightbox__stang {
    position: absolute;
    top: 22px;
    right: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--gb-accent, #9C4A2A);
    border-radius: 999px;
    color: var(--gb-bg-warm, #FAF7F1);
    font-family: var(--gb-font-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
}
.gbv-lightbox__stang::after {
    content: "×";
    font-family: var(--gb-font-display);
    font-size: 1.4rem;
    line-height: 1;
}
.gbv-lightbox__stang:hover,
.gbv-lightbox__stang:focus {
    background: var(--gb-accent, #9C4A2A);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

/* Prev/next — runda terrakotta-knappar, bildarkivets mönster. */
.gbv-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gb-accent, #9C4A2A);
    border: 1px solid var(--gb-accent, #9C4A2A);
    border-radius: 999px;
    color: #fff;
    font-family: var(--gb-font-body);
    font-size: 30px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out;
}
.gbv-lightbox__foreg { left: 24px; }
.gbv-lightbox__nasta { right: 24px; }
.gbv-lightbox__foreg::before { content: "‹"; display: block; transform: translate(-1px, -3px); }
.gbv-lightbox__nasta::before { content: "›"; display: block; transform: translate( 1px, -3px); }

.gbv-lightbox__nav:hover:not(:disabled),
.gbv-lightbox__nav:focus:not(:disabled) {
    background: var(--gb-bg-warm, #FAF7F1);
    border-color: var(--gb-bg-warm, #FAF7F1);
    color: var(--gb-accent, #9C4A2A);
    outline: none;
}
.gbv-lightbox__nav:disabled {
    opacity: 0.3;
    cursor: default;
}
.gbv-lightbox__nav[hidden] { display: none; }

@media (max-width: 500px) {
    .gbv-lightbox__nav   { width: 42px; height: 42px; font-size: 22px; }
    .gbv-lightbox__foreg { left: 8px; }
    .gbv-lightbox__nasta { right: 8px; }
}

/* ─── Mobil-svep (samlat sist så det vinner cascade) ──────────────────── */
@media (max-width: 800px) {
    /* Container-padding följer child-temats baseline (16px) — vi nollar
       våra egna 24px så vi inte dubblar */
    .gbv-wrap,
    .gbv-narrow { padding: 0 16px; }

    /* Topbar: stapla brand + sökruta vertikalt så sökrutan får full bredd */
    .gbv-topbar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
    }
    .gbv-topbar__brand { text-align: center; }
    .gbv-sok { width: 100%; }
    .gbv-sok__input { min-width: 0; flex: 1; }

    /* Hero: kompaktare på mobil */
    .gbv-hero { padding: 48px 16px 36px; }

    /* Indexlistor och info-länkar smalare */
    .gbv-sidhuvud { padding: var(--gb-hero-topp, 16px) 0 12px; }
    .gbv-sektionsrubrik { margin: 40px 0 14px; font-size: 22px; }
    .gbv-infolista {
        grid-template-columns: 1fr;
        gap: 6px 0;
    }

    /* Kortgrid: 2 kolumner på mellan, 1 på små */
    .gbv-kortgrid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
    .gbv-kort__namn { font-size: 17px; }

    /* Paginering: krymp och stapla */
    .gbv-paginering { gap: 16px; flex-wrap: wrap; }

    /* Enskild vykortsvy: bilderna staplas redan, krymp metadata-tabell */
    .gbv-vykort { padding: 20px 0 48px; }
}
@media (max-width: 500px) {
    .gbv-wrap,
    .gbv-narrow { padding: 0 14px; }
    .gbv-topbar__inner { padding: 12px 14px; }
    .gbv-hero { padding: 36px 14px 28px; }
    .gbv-hero__titel { font-size: clamp(30px, 7vw, 40px); margin-bottom: 12px; }
    .gbv-hero__lede { font-size: 16px; }
    .gbv-sok__input { padding: 8px 14px; font-size: 14px; }
    .gbv-sok__knapp { padding: 8px 16px; font-size: 14px; }
    .gbv-kortgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .gbv-kort__namn { font-size: 16px; }
    .gbv-kort__innehall { padding: 10px 12px 14px; }
    .gbv-sektionsrubrik { margin: 32px 0 12px; font-size: 20px; }
    .gbv-footer { padding: 24px 14px; }
}


/* ─── Sökformulär: fritext + avancerad sökning (2026-08-21) ──────────── */

.gbv-sokformular {
    margin: 0 0 40px;
    padding: 24px;
    background: var(--gb-bg-warm);
    border: 1px solid var(--gb-border);
    border-radius: 6px;
}

.gbv-sok__etikett {
    display: block;
    font-family: var(--gb-font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--gb-accent);
    margin: 0 0 10px;
}
.gbv-sok__input { flex: 1 1 auto; min-width: 0; }
.gbv-sok__hjalp {
    margin: 8px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--gb-muted);
}
.gbv-sok__genvag { margin: 0 0 24px; font-size: 15px; }
.gbv-sok__tips  { margin: 24px 0 0; font-size: 16px; color: var(--gb-ink-soft); }

/* Den avancerade panelen är ett <details> — den fälls ut av webbläsaren
   själv, så hela formuläret fungerar utan JavaScript. */
.gbv-avancerad { margin: 20px 0 0; border-top: 1px solid var(--gb-border); padding-top: 16px; }
.gbv-avancerad__rubrik {
    cursor: pointer;
    font-family: var(--gb-font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--gb-accent);
    list-style: none;
}
.gbv-avancerad__rubrik::-webkit-details-marker { display: none; }
.gbv-avancerad__rubrik::before {
    /* Mellanslaget i content kollapsar — luften måste sättas som marginal. */
    content: "▸";
    display: inline-block;
    margin-right: 8px;
}
.gbv-avancerad[open] .gbv-avancerad__rubrik::before { content: "▾"; }
.gbv-avancerad__rubrik:hover { color: var(--gb-ink); }
.gbv-avancerad__ingress {
    margin: 10px 0 20px;
    font-size: 15px;
    color: var(--gb-ink-soft);
}

.gbv-faltgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 24px;
}
.gbv-falt { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gbv-falt label {
    font-size: 14px;
    font-style: italic;
    color: var(--gb-muted);
}
.gbv-falt input[type="text"],
.gbv-falt input[type="number"],
.gbv-falt select {
    font-family: var(--gb-font-body);
    font-size: 15px;
    padding: 8px 12px;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    background: var(--gb-bg);
    color: var(--gb-ink);
    width: 100%;
    /* Långa förlagsnamn får inte tvinga fram vågrät scroll på sidan. */
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 200ms ease-out;
}
.gbv-falt input:focus,
.gbv-falt select:focus { outline: none; border-color: var(--gb-accent-strong); }
.gbv-falt__not { font-size: 13px; font-style: italic; color: var(--gb-muted); }

.gbv-spann { display: flex; align-items: center; gap: 8px; }
.gbv-spann__tecken { color: var(--gb-muted); }

.gbv-avancerad__knappar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 0;
}
.gbv-avancerad__rensa { font-size: 15px; color: var(--gb-muted); }
.gbv-avancerad__rensa:hover { color: var(--gb-accent); }

/* Vad sökningen gällde, i klartext — utan den raden går det inte att se om
   ett tomt resultat beror på en snäv sökning eller på ett fält som blev
   ifyllt av misstag. */
.gbv-sokresultat {
    margin: 0 0 24px;
    font-size: 16px;
    color: var(--gb-ink-soft);
}
.gbv-sokvillkor {
    display: inline-block;
    margin: 4px 6px 0 0;
    padding: 3px 12px;
    font-size: 14px;
    background: var(--gb-accent-soft);
    border-radius: 999px;
    color: var(--gb-ink);
}
.gbv-sokvillkor em { font-style: italic; color: var(--gb-accent); }

@media (max-width: 800px) {
    .gbv-sokformular { padding: 18px; }
    .gbv-faltgrid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .gbv-sok__rad { flex-wrap: wrap; }
    .gbv-sok__input { width: 100%; min-width: 0; }
    .gbv-sok__knapp { width: 100%; }
    .gbv-sok__etikett { font-size: 19px; }
}