/* DBR Gallery Builder Pro — frontend.
 * Alle layouts er rene CSS-layouts (grid/columns) styret af CSS-variabler
 * fra shortcoden: --dbrgb-cols, --dbrgb-gap, --dbrgb-radius. Ingen layout-JS. */

.dbrgb { margin: 0 auto; }
.dbrgb, .dbrgb * { box-sizing: border-box; }

.dbrgb-item { margin: 0; break-inside: avoid; }
.dbrgb-link { display: block; text-decoration: none; color: inherit; }

.dbrgb-frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--dbrgb-radius, 8px);
    background-size: cover;
    background-position: center;
    /* LQIP'en ligger som background — skjules blødt når billedet er inde. */
}
.dbrgb-img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .45s ease, transform .45s ease;
}
.dbrgb-img.is-loaded { opacity: 1; }
/* Uden JS (eller hvis load-eventet misses) må billedet aldrig forblive skjult. */
.no-js .dbrgb-img { opacity: 1; }

/* ---------- Beskæring ---------- */
.dbrgb-aspect-square .dbrgb-frame { aspect-ratio: 1 / 1; }
.dbrgb-aspect-landscape .dbrgb-frame { aspect-ratio: 3 / 2; }
.dbrgb-aspect-square .dbrgb-img,
.dbrgb-aspect-landscape .dbrgb-img { height: 100%; object-fit: cover; }
/* Masonry kræver naturlige højder — beskæring ignoreres bevidst dér. */
.dbrgb-layout-masonry .dbrgb-frame { aspect-ratio: auto; }
.dbrgb-layout-masonry .dbrgb-img { height: auto; object-fit: unset; }

/* ---------- Layout: grid (Minimal) ---------- */
.dbrgb-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--dbrgb-cols, 4), 1fr);
    gap: var(--dbrgb-gap, 8px);
}

/* ---------- Layout: masonry (Mosaic) ---------- */
.dbrgb-layout-masonry {
    columns: var(--dbrgb-cols, 3);
    column-gap: var(--dbrgb-gap, 14px);
}
.dbrgb-layout-masonry .dbrgb-item { margin-bottom: var(--dbrgb-gap, 14px); }

/* ---------- Layout: editorial (asymmetrisk spænd-mønster) ---------- */
.dbrgb-layout-editorial {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--dbrgb-gap, 28px);
}
/* Spændene skal altid summere til et multiplum af 6 for at gå op uden huller
   — den tidligere 5-punkts-cyklus (4+2+2+3+3=14) gjorde ikke, hvilket kunne
   efterlade tomme felter, da ingen efterfølgende billede havde spænd 1 til
   at udfylde dem. Et fast "stort/lille"-skift (4+2=6) hver anden plads
   tessellerer perfekt uanset antal billeder. */
.dbrgb-layout-editorial .dbrgb-item { grid-column: span 2; }
.dbrgb-layout-editorial .dbrgb-item:nth-child(odd) { grid-column: span 4; }
.dbrgb-layout-editorial .dbrgb-frame { aspect-ratio: 3 / 2; }
.dbrgb-layout-editorial .dbrgb-img { height: 100%; object-fit: cover; }
.dbrgb-layout-editorial .dbrgb-item:nth-child(odd) .dbrgb-frame { aspect-ratio: 16 / 9; }

/* ---------- Layout: justified (rækker i ens højde) ---------- */
/* Klassisk CSS-only justified: hvert billedes bredde/højde-forhold
   (--dbrgb-ar sat inline af PHP) bruges som flex-grow, så rækken
   fordeler bredden proportionalt og alle billeder i rækken får samme
   højde. Spaceren til sidst sluger rest-grow, så sidste række ikke
   strækkes urimeligt. */
.dbrgb-layout-justified {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dbrgb-gap, 8px);
}
.dbrgb-layout-justified .dbrgb-item {
    flex-grow: calc(var(--dbrgb-ar, 1.5) * 100);
    flex-basis: calc(var(--dbrgb-ar, 1.5) * 200px);
    min-width: 0;
}
.dbrgb-layout-justified .dbrgb-frame {
    aspect-ratio: var(--dbrgb-ar, 1.5);
    width: 100%;
}
.dbrgb-layout-justified .dbrgb-img { width: 100%; height: 100%; object-fit: cover; }
.dbrgb-justify-spacer { flex-grow: 1000000; flex-basis: 0; margin: 0; padding: 0; }
/* Spaceren er kun relevant for justified — usynlig overalt, og i
   grid-/columns-layouts må den ikke optage en celle. */
.dbrgb:not(.dbrgb-layout-justified) .dbrgb-justify-spacer { display: none; }

/* ---------- Layout: single (Portfolio) ---------- */
.dbrgb-layout-single { display: grid; grid-template-columns: 1fr; gap: var(--dbrgb-gap, 56px); max-width: 960px; }

/* ---------- Layout: showcase (hero + par) ---------- */
.dbrgb-layout-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dbrgb-gap, 18px);
}
.dbrgb-layout-showcase .dbrgb-item:nth-child(3n+1) { grid-column: 1 / -1; }
.dbrgb-layout-showcase .dbrgb-item:nth-child(3n+1) .dbrgb-frame { aspect-ratio: 21 / 9; }
.dbrgb-layout-showcase .dbrgb-frame { aspect-ratio: 4 / 3; }
.dbrgb-layout-showcase .dbrgb-img { height: 100%; object-fit: cover; }

/* ---------- Hover-effekter ---------- */
@media (hover: hover) {
    .dbrgb-hover-zoom .dbrgb-link:hover .dbrgb-img.is-loaded { transform: scale(1.045); }
    .dbrgb-hover-fade .dbrgb-link:hover .dbrgb-img.is-loaded { opacity: .82; }
    .dbrgb-hover-lift .dbrgb-item { transition: transform .3s ease, box-shadow .3s ease; }
    .dbrgb-hover-lift .dbrgb-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.16); border-radius: var(--dbrgb-radius, 8px); }
}

/* ---------- Billedtekster ---------- */
.dbrgb-caption { font-size: .85em; line-height: 1.5; color: inherit; opacity: .75; }
.dbrgb-captions-below .dbrgb-caption { padding: 8px 2px 0; }
.dbrgb-captions-hover .dbrgb-caption {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 24px 14px 12px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: 0 0 var(--dbrgb-radius, 8px) var(--dbrgb-radius, 8px);
}
.dbrgb-captions-hover .dbrgb-item { position: relative; }
.dbrgb-captions-hover .dbrgb-item:hover .dbrgb-caption { opacity: 1; }
/* Hover-captions skal ligge oven på billedet, ikke under linket. */
.dbrgb-captions-hover .dbrgb-caption { pointer-events: none; }

/* ---------- Animationer (v1.5) ---------- */
/* Scroll-ind: ren opacity/transform, styret af en let IntersectionObserver
   der blot tilføjer .is-in. "none" og prefers-reduced-motion springer helt
   udenom (JS tilføjer is-in med det samme i de tilfælde). */
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
}
.dbrgb-anim-fade-up .dbrgb-item { transform: translateY(24px); }
.dbrgb-anim-zoom-in .dbrgb-item { transform: scale(.92); }
.dbrgb-item.is-in { opacity: 1 !important; transform: none !important; }
/* Let kaskade-forsinkelse, så billeder ikke popper ind samtidig. */
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item:nth-child(6n+2) { transition-delay: 60ms; }
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item:nth-child(6n+3) { transition-delay: 120ms; }
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item:nth-child(6n+4) { transition-delay: 180ms; }
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item:nth-child(6n+5) { transition-delay: 240ms; }
.dbrgb[class*="dbrgb-anim-"]:not(.dbrgb-anim-none) .dbrgb-item:nth-child(6n+6) { transition-delay: 300ms; }

/* ---------- Farvetema (v1.6) ----------
   Styrer KUN in-page-elementerne herunder (filterbar, "Vis flere") — via
   CSS-variabler, så de virker uafhængigt af det omgivende temas
   baggrundsfarve. Lightboxen er bevidst IKKE en del af dette — den
   forbliver altid mørk, som hos stort set alle billedvisere. */
.dbrgb-theme-light {
    --dbrgb-ui-fg: inherit;
    --dbrgb-ui-border: rgba(0,0,0,.14);
    --dbrgb-ui-border-hover: rgba(0,0,0,.4);
    --dbrgb-ui-fill: #000;
}
.dbrgb-theme-dark {
    --dbrgb-ui-fg: #f2f2f2;
    --dbrgb-ui-border: rgba(255,255,255,.24);
    --dbrgb-ui-border-hover: rgba(255,255,255,.6);
    --dbrgb-ui-fill: #fff;
}

/* ---------- Kategorifilter ---------- */
.dbrgb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.dbrgb-filter-btn {
    border: 1px solid var(--dbrgb-ui-border, rgba(0,0,0,.14));
    background: transparent;
    color: var(--dbrgb-ui-fg, inherit);
    border-radius: 999px;
    padding: 7px 18px;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.dbrgb-filter-btn:hover { border-color: var(--dbrgb-ui-border-hover, rgba(0,0,0,.4)); }
/* Aktiv pille: fyldes diskret med temaets egen tekstfarve på lav opacitet
   (via ::before), så filteret matcher det valgte farvetema uden yderligere
   konfiguration. */
.dbrgb-filter-btn.is-active { border-color: currentColor; position: relative; }
.dbrgb-filter-btn.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--dbrgb-ui-fill, currentColor);
    opacity: .08;
    pointer-events: none;
}

/* Skjulte billeder (filter/paginering) må ikke optage plads. */
.dbrgb-item[hidden] { display: none !important; }

/* ---------- "Vis flere" ---------- */
.dbrgb-more-wrap { text-align: center; margin: 22px 0 0; }
.dbrgb-more {
    border: 1px solid var(--dbrgb-ui-border, rgba(0,0,0,.16));
    background: transparent;
    color: var(--dbrgb-ui-fg, inherit);
    border-radius: 999px;
    padding: 11px 28px;
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.dbrgb-more:hover { border-color: var(--dbrgb-ui-border-hover, rgba(0,0,0,.45)); }
.dbrgb-more-count { opacity: .6; font-weight: 400; }

/* ---------- Lightbox ---------- */
.dbrgb-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(12, 12, 14, .96);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dbrgb-lb img {
    max-width: min(94vw, 1800px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.dbrgb-lb-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.85);
    font-size: 14px;
    max-width: 80vw;
    text-align: center;
}
.dbrgb-lb-btn {
    position: absolute;
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s;
}
.dbrgb-lb-btn:hover { background: rgba(255,255,255,.2); }
.dbrgb-lb-close { top: 18px; right: 18px; }
.dbrgb-lb-share { top: 18px; left: 18px; }
.dbrgb-lb-info { top: 18px; left: 70px; }
.dbrgb-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.dbrgb-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- EXIF-panel (v1.5) ---------- */
.dbrgb-lb-exif {
    position: absolute;
    left: 18px;
    bottom: 60px;
    z-index: 1;
    background: rgba(20,20,22,.9);
    color: #fff;
    border-radius: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 18px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 14px;
    font-size: 12.5px;
    transition: max-height .25s ease, opacity .25s ease, padding .25s ease;
}
.dbrgb-lb-exif.is-open { max-height: 220px; opacity: 1; padding: 14px 18px; }
.dbrgb-lb-exif span { opacity: .65; }
.dbrgb-lb-exif strong { font-weight: 600; }

/* "Link kopieret"-bekræftelse på delings-knappen (desktop-fallback). */
.dbrgb-lb-shared {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.dbrgb-lb-share.is-shared .dbrgb-lb-shared { opacity: 1; }

/* ---------- Beskyttelse ---------- */
/* Gør billeder sværere at kopiere tilfældigt — markering, træk og
   long-press-menu (iOS) blokeres. Ægte beskyttelse = vandmærket. */
.dbrgb-protected .dbrgb-img,
.dbrgb-protected .dbrgb-frame {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
.dbrgb-copyright-notice {
    position: absolute;
    z-index: 99998;
    background: rgba(12,12,14,.92);
    color: #fff;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -130%);
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
    .dbrgb-layout-grid, .dbrgb-layout-editorial, .dbrgb-layout-showcase { grid-template-columns: repeat(2, 1fr); }
    .dbrgb-layout-editorial .dbrgb-item,
    .dbrgb-layout-editorial .dbrgb-item:nth-child(5n+1),
    .dbrgb-layout-editorial .dbrgb-item:nth-child(5n+4),
    .dbrgb-layout-editorial .dbrgb-item:nth-child(5n+5) { grid-column: span 1; }
    .dbrgb-layout-editorial .dbrgb-item:nth-child(5n+1) { grid-column: 1 / -1; }
    .dbrgb-layout-masonry { columns: 2; }
}
@media (max-width: 560px) {
    .dbrgb-layout-grid, .dbrgb-layout-editorial, .dbrgb-layout-showcase { grid-template-columns: 1fr; }
    .dbrgb-layout-editorial .dbrgb-item:nth-child(5n+1) { grid-column: span 1; }
    .dbrgb-layout-showcase .dbrgb-item:nth-child(3n+1) { grid-column: span 1; }
    .dbrgb-layout-masonry { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dbrgb-img, .dbrgb-hover-lift .dbrgb-item, .dbrgb-captions-hover .dbrgb-caption { transition: none; }
    .dbrgb[class*="dbrgb-anim-"] .dbrgb-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}