/* =============================================================
   Bolig-single — .bolig-single-graesmarken
   Hel side for én bolig (Etape 3, E3.2). Top: galleri (scroll-snap-spor,
   virker uden JS) i venstre kolonne + "key" (titel/pris/fakta/CTA) i højre,
   via delt .split--7-5. Derunder: beskrivelse (.flow), kort, salgsopstilling.

   Genbruger delte komponenter: .split, .container, .btn, .flow, .link-arrow,
   --focus-ring, aspect-/space-/radius-tokens. Kun :root-tokens; 0 !important;
   BEM med -graesmarken-suffix. Eneste @media er reduced-motion + galleriets
   thumbs-ombrydning (arvet kolonne-rytme via .split).
   ============================================================= */

.bolig-single-graesmarken {
    padding-block: var(--section-spacing);
}


/* ---- Top: galleri | key (delt .split--7-5 giver kolonner + gap fra 768px) ---- */
.bolig-single-graesmarken__key {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* lod nøgle-kolonnen toppe-justere med galleriet */
    align-self: start;
}


/* =============================================================
   Galleri
   ============================================================= */
.bolig-single-graesmarken__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;   /* lad sporet krympe i split-kolonnen i stedet for at flyde over */
}

.bolig-single-graesmarken__stage {
    position: relative;
}

/* Sporet: vandret scroll-snap-stribe. Virker uden JS (scroll/swipe); JS tilføjer
   kun thumbs/pile-styring ovenpå. */
.bolig-single-graesmarken__track {
    display: flex;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-top-left-radius: var(--radius-tl-lg);
    border-top-right-radius: var(--radius-tr-lg);
    border-bottom-right-radius: var(--radius-br-lg);
    border-bottom-left-radius: var(--radius-bl-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.bolig-single-graesmarken__track:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.bolig-single-graesmarken__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
}
.bolig-single-graesmarken__slide img {
    display: block;
    width: 100%;
    aspect-ratio: var(--aspect-card);
    object-fit: cover;
    border-top-left-radius: var(--radius-tl-lg);
    border-top-right-radius: var(--radius-tr-lg);
    border-bottom-right-radius: var(--radius-br-lg);
    border-bottom-left-radius: var(--radius-bl-lg);
}

/* Status-badge over galleriet (samme tone-trappe som arkivet). */
.bolig-single-graesmarken__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--fs-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    background: var(--color-green-700);
    color: var(--color-paper);
}
.is-reserveret .bolig-single-graesmarken__badge {
    background: var(--color-green-300);
    color: var(--color-green-900);
}
.is-solgt .bolig-single-graesmarken__badge {
    background: var(--color-text-muted);
    color: var(--color-paper);
}

/* Pile — skjult som standard (hidden-attribut), vises kun når JS er klar. */
.bolig-single-graesmarken__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;    /* ≥44px tap-target */
    height: 2.75rem;
    padding: 0;
    border: var(--border-card);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    color: var(--color-green-900);
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.bolig-single-graesmarken__nav--prev {
    left: var(--space-sm);
}
.bolig-single-graesmarken__nav--next {
    right: var(--space-sm);
}
.bolig-single-graesmarken__nav:hover {
    background: var(--color-green-700);
    color: var(--color-paper);
}
.bolig-single-graesmarken__nav:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}
.bolig-single-graesmarken__nav:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* Thumbnails — rigtige fragment-links (virker uden JS), JS opgraderer til blød
   in-place-scroll + aktiv markering. */
.bolig-single-graesmarken__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bolig-single-graesmarken__thumb-item {
    margin: 0;
}
.bolig-single-graesmarken__thumb {
    display: block;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    outline-offset: var(--focus-ring-offset);
}
.bolig-single-graesmarken__thumb img {
    display: block;
    width: 4.5rem;
    aspect-ratio: var(--aspect-square);
    object-fit: cover;
    opacity: 0.7;
    transition: opacity var(--dur-base) var(--ease-out);
}
.bolig-single-graesmarken__thumb:hover img {
    opacity: 1;
}
.bolig-single-graesmarken__thumb[aria-current="true"] img {
    opacity: 1;
}
.bolig-single-graesmarken__thumb[aria-current="true"] {
    box-shadow: inset 0 0 0 var(--border-width-emphasis) var(--color-green-700);
}
.bolig-single-graesmarken__thumb:focus-visible {
    outline: var(--focus-ring);
}


/* =============================================================
   Key — titel / adresse / pris / fakta / CTA
   ============================================================= */
.bolig-single-graesmarken__title {
    margin: 0;
}
.bolig-single-graesmarken__adresse {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--fs-body);
}
.bolig-single-graesmarken__pris {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.bolig-single-graesmarken__pris-label {
    font-size: var(--fs-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--color-green-700);
}
.bolig-single-graesmarken__pris-value {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-heading);
}

/* Fakta-liste (<dl>) — to spalter der falder til én på smalle kolonner. */
.bolig-single-graesmarken__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
}
.bolig-single-graesmarken__fact {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-xs);
    border-top: var(--border-card);
}
.bolig-single-graesmarken__fact-label {
    margin: 0;
    font-size: var(--fs-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--color-green-700);
}
.bolig-single-graesmarken__fact-value {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--color-text);
}

/* CTA — ekstern mægler-henvisning. */
.bolig-single-graesmarken__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-top: var(--space-xs);
}
.bolig-single-graesmarken__maegler-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    color: var(--color-text-soft);
    font-size: var(--fs-body);
}
.bolig-single-graesmarken__maegler-meta a {
    color: var(--color-link);
}
.bolig-single-graesmarken__cta-note {
    margin: 0;
    font-size: var(--fs-accent);
    color: var(--color-text-muted);
}


/* =============================================================
   Beskrivelse / kort / salgsopstilling
   ============================================================= */
.bolig-single-graesmarken__body {
    margin-top: var(--space-xl);
    max-width: var(--measure);
}

.bolig-single-graesmarken__map {
    margin-top: var(--space-xl);
    overflow: hidden;
    line-height: 0;
    border-top-left-radius: var(--radius-tl-lg);
    border-top-right-radius: var(--radius-tr-lg);
    border-bottom-right-radius: var(--radius-br-lg);
    border-bottom-left-radius: var(--radius-bl-lg);
}
.bolig-single-graesmarken__map iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-video);
    border: 0;
}

.bolig-single-graesmarken__pdf-wrap {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}


/* ---- Tom tilstand ---- */
.bolig-single-graesmarken__empty {
    margin: 0;
    color: var(--color-text-muted);
}


/* =============================================================
   Justering (kontraktens is-align-center)
   ============================================================= */
.is-align-center .bolig-single-graesmarken__key {
    align-items: center;
    text-align: center;
}
.is-align-center .bolig-single-graesmarken__pris {
    align-items: center;
}
.is-align-center .bolig-single-graesmarken__cta {
    align-items: center;
}
.is-align-center .bolig-single-graesmarken__thumbs {
    justify-content: center;
}
.is-align-center .bolig-single-graesmarken__body {
    margin-inline: auto;
}


/* =============================================================
   Reduced motion — ingen blød scroll/transition
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .bolig-single-graesmarken__track {
        scroll-behavior: auto;
    }
    .bolig-single-graesmarken__nav,
    .bolig-single-graesmarken__thumb img {
        transition: none;
    }
}