/* =====================================================================
   Atlantis Almere — Sfeerimpressie Gallery  (dc-lifestyle-gallery)
   Bento mosaic + custom lightbox. Scoped under .dc-gal.
   Edge-to-edge, self-contained.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.elementor-widget-dc-lifestyle-gallery,
.elementor-widget-dc-lifestyle-gallery .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

.dc-gal {
    --dc-ink:       #0a1b2a;
    --dc-ink-2:     #0d2438;
    --dc-gold:      #d4a24e;
    --dc-gold-soft: #e7c98b;
    --dc-heading:   #ffffff;
    --dc-text:      rgba(255,255,255,.74);
    --dc-glass:     rgba(255,255,255,.06);
    --dc-glass-brd: rgba(255,255,255,.14);
    --dc-radius:    18px;
    --dc-ease:      cubic-bezier(.16,1,.3,1);

    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(72px, 10vw, 130px) 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--dc-text);
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(212,162,78,.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--dc-ink) 0%, var(--dc-ink-2) 100%);
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.dc-gal__inner {
    width: 100%; max-width: 1320px; margin: 0 auto;
    padding: 0 clamp(22px, 5vw, 72px);
}

/* ----------------------------- header ----------------------------- */
.dc-gal__head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: clamp(30px, 4vw, 50px); max-width: 100%;
}
.dc-gal__head-l { max-width: 640px; }
.dc-gal__eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 8px 16px 8px 13px;
    border: 1px solid var(--dc-glass-brd); border-radius: 999px;
    background: var(--dc-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dc-gold-soft);
}
.dc-gal__eyebrow svg { width: 17px; height: 17px; color: var(--dc-gold); }
.dc-gal__title {
    margin: 18px 0 0;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: var(--dc-heading);
    font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em;
}
.dc-gal__title em { font-style: italic; font-weight: 500; color: var(--dc-gold); }
.dc-gal__intro { margin: 14px 0 0; font-size: clamp(1rem,1.15vw,1.1rem); line-height: 1.7; }

/* ----------------------------- mosaic grid ----------------------- */
.dc-gal__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(120px, 13vw, 180px);
    grid-auto-flow: dense;
    gap: clamp(12px, 1.4vw, 18px);
}
.dc-gal__item {
    position: relative;
    grid-column: span 4; grid-row: span 2;       /* default tile */
    margin: 0; padding: 0; border: none; cursor: pointer;
    border-radius: var(--dc-radius); overflow: hidden;
    background: #04101b;
    box-shadow: 0 20px 46px -28px rgba(0,0,0,.6);
}
.dc-gal__item--wide { grid-column: span 6; }
.dc-gal__item--tall { grid-column: span 3; grid-row: span 3; }
.dc-gal__item--big  { grid-column: span 6; grid-row: span 3; }
.dc-gal__item--small{ grid-column: span 3; grid-row: span 2; }

.dc-gal__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.04); transition: transform 1s var(--dc-ease); will-change: transform;
}
.dc-gal__item:hover .dc-gal__img { transform: scale(1.12); }
.dc-gal__item-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,16,28,0) 38%, rgba(7,16,28,.85) 100%);
    opacity: .85; transition: opacity .4s var(--dc-ease);
}
.dc-gal__item:hover .dc-gal__item-shade { opacity: 1; }
.dc-gal__item-meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; text-align: left; }
.dc-gal__item-tag {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(212,162,78,.18); border: 1px solid rgba(212,162,78,.42);
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-gold-soft);
}
.dc-gal__item-cap {
    font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 600; color: #fff; line-height: 1.2;
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s var(--dc-ease), transform .4s var(--dc-ease);
}
.dc-gal__item:hover .dc-gal__item-cap { opacity: 1; transform: translateY(0); }
.dc-gal__item-view {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    color: #1c1206; background: var(--dc-gold);
    opacity: 0; transform: scale(.6) translateY(-4px);
    transition: opacity .4s var(--dc-ease), transform .4s var(--dc-ease);
}
.dc-gal__item-view svg { width: 20px; height: 20px; }
.dc-gal__item:hover .dc-gal__item-view,
.dc-gal__item:focus-visible .dc-gal__item-view { opacity: 1; transform: scale(1) translateY(0); }
.dc-gal__item:focus-visible { outline: 3px solid var(--dc-gold); outline-offset: 3px; }

/* ----------------------------- lightbox -------------------------- */
.dc-gal__lb {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 56px);
}
.dc-gal__lb.is-open { display: flex; }
.dc-gal__lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(4,10,18,.92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .35s var(--dc-ease);
}
.dc-gal__lb.is-open .dc-gal__lb-backdrop { opacity: 1; }
.dc-gal__lb-stage {
    position: relative; z-index: 2;
    max-width: 1100px; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    transform: scale(.96); opacity: 0;
    transition: transform .4s var(--dc-ease), opacity .4s var(--dc-ease);
}
.dc-gal__lb.is-open .dc-gal__lb-stage { transform: scale(1); opacity: 1; }
.dc-gal__lb-figure {
    width: 100%; border-radius: var(--dc-radius); overflow: hidden;
    box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
    background: #04101b;
}
.dc-gal__lb-img { display: block; width: 100%; max-height: 76vh; object-fit: contain; background: #04101b; }
.dc-gal__lb-bar { display: flex; align-items: center; gap: 16px; width: 100%; color: rgba(255,255,255,.85); }
.dc-gal__lb-cap { flex: 1 1 auto; font-size: 1rem; }
.dc-gal__lb-cap b { display: block; font-family: 'Playfair Display', serif; font-size: 1.15rem; color: #fff; }
.dc-gal__lb-count { font-size: .9rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

.dc-gal__lb-btn {
    display: grid; place-items: center; cursor: pointer;
    border-radius: 50%; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid var(--dc-glass-brd);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background-color .3s var(--dc-ease), transform .3s var(--dc-ease);
}
.dc-gal__lb-btn:hover { background: var(--dc-gold); color: #1c1206; transform: scale(1.06); }
.dc-gal__lb-btn:focus-visible { outline: 3px solid var(--dc-gold-soft); outline-offset: 3px; }
.dc-gal__lb-btn svg { width: 24px; height: 24px; }
.dc-gal__lb-close { position: absolute; top: -6px; right: 0; width: 48px; height: 48px; z-index: 3; }
.dc-gal__lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; }
.dc-gal__lb-prev { left: clamp(-4px, -2vw, 0px); }
.dc-gal__lb-next { right: clamp(-4px, -2vw, 0px); }

/* ----------------------------- reveal states --------------------- */
.dc-gal--anim .dc-gal__head > *,
.dc-gal--anim .dc-gal__item { opacity: 0; }

/* ----------------------------- responsive ------------------------- */
@media (max-width: 860px) {
    .dc-gal__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(110px, 22vw, 160px); }
    .dc-gal__item,
    .dc-gal__item--small,
    .dc-gal__item--tall { grid-column: span 3; grid-row: span 2; }
    .dc-gal__item--wide,
    .dc-gal__item--big  { grid-column: span 6; grid-row: span 2; }
    .dc-gal__lb-nav { width: 46px; height: 46px; }
}
@media (max-width: 520px) {
    .dc-gal__grid { grid-template-columns: 1fr; grid-auto-rows: 56vw; }
    .dc-gal__item,
    .dc-gal__item--small,
    .dc-gal__item--tall,
    .dc-gal__item--wide,
    .dc-gal__item--big { grid-column: span 1; grid-row: span 1; }
    .dc-gal__item-cap { opacity: 1; transform: none; }
    .dc-gal__lb-prev { left: 4px; } .dc-gal__lb-next { right: 4px; }
    .dc-gal__lb-close { top: 4px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-gal__img, .dc-gal__item-shade, .dc-gal__item-cap, .dc-gal__item-view,
    .dc-gal__lb-backdrop, .dc-gal__lb-stage { transition: none !important; }
    .dc-gal__img { transform: none !important; }
    .dc-gal--anim .dc-gal__head > *,
    .dc-gal--anim .dc-gal__item { opacity: 1 !important; }
}