/* Gallery grid (masonry via CSS columns) + teaser grids + lightbox.
   Cards carry a continuous, decorative, always-on "bob" float — not a hover effect. */

.gallery-grid{columns:1;column-gap:16px}
@media (min-width:561px){ .gallery-grid{columns:2} }
@media (min-width:901px){ .gallery-grid{columns:3} }

.gallery-card{cursor:pointer;break-inside:avoid;margin-bottom:16px;border-radius:24px;background:var(--dd-paper-warm);background-image:repeating-linear-gradient(135deg,rgba(21,18,15,.07) 0 7px,transparent 7px 14px);display:flex;align-items:flex-end;padding:16px;min-height:300px;box-shadow:0 12px 28px rgba(21,18,15,.1);transition:transform .3s var(--dd-ease),box-shadow .3s;animation:ddfloat 9s ease-in-out infinite}
.gallery-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 44px rgba(21,18,15,.16)}
.gallery-card:nth-child(even){animation-name:ddfloat2;animation-duration:11s}
.gallery-card:nth-child(3n){animation-delay:1.2s}
.gallery-card:nth-child(4n){animation-delay:2.4s}
.gallery-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px;z-index:0}
.gallery-card span{position:relative;z-index:1}
@media (max-width:900px){ .gallery-card{width:100%;margin-bottom:20px} }

.gallery-card-label{font-family:var(--dd-font-ui);font-size:10.5px;letter-spacing:.08em;color:rgba(21,18,15,.52)}

/* Teaser grids (Home "Inside the classrooms" / Careers "Life at DataDemy") share the same card look, fixed row height */
.gallery-teaser-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:200px;gap:14px}
@media (min-width:561px){ .gallery-teaser-grid{grid-template-columns:1fr 1fr} }
@media (min-width:901px){ .gallery-teaser-grid{grid-template-columns:repeat(4,1fr)} }
.gallery-teaser-grid.is-3col{grid-auto-rows:220px}
@media (min-width:901px){ .gallery-teaser-grid.is-3col{grid-template-columns:repeat(3,1fr)} }

.gallery-teaser-card{cursor:pointer;position:relative;background:var(--dd-paper-warm);background-image:repeating-linear-gradient(135deg,rgba(21,18,15,.07) 0 7px,transparent 7px 14px);border-radius:18px;display:flex;align-items:flex-end;padding:14px;overflow:hidden;transition:transform .3s var(--dd-ease),box-shadow .3s;animation:ddfloat 9s ease-in-out infinite}
.gallery-teaser-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 44px rgba(21,18,15,.16)}
.gallery-teaser-card:nth-child(even){animation-name:ddfloat2;animation-duration:11s}
.gallery-teaser-card:nth-child(3n){animation-delay:1.2s}
.gallery-teaser-card:nth-child(4n){animation-delay:2.4s}
.gallery-teaser-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;z-index:0}
.gallery-teaser-card span{position:relative;z-index:1}

/* Lightbox */
.lightbox-scrim{position:fixed;inset:0;z-index:300;background:rgba(15,13,10,.94);display:flex;align-items:center;justify-content:center;padding:24px;animation:ddlightboxFade .3s ease}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border-radius:50%;background:rgba(251,248,244,.12);color:var(--dd-paper);display:flex;align-items:center;justify-content:center}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(251,248,244,.22)}
.lightbox-close{top:24px;right:24px;width:44px;height:44px;font-size:22px}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px}
.lightbox-frame{position:relative;width:min(90vw,880px);height:min(80vh,620px);border-radius:24px;background:#1F2330;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 8px,transparent 8px 16px);display:flex;align-items:flex-end;padding:28px;box-sizing:border-box;animation:ddlightboxPop .4s var(--dd-ease);overflow:hidden}
.lightbox-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lightbox-frame span{position:relative;z-index:1;font-family:var(--dd-font-ui);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.7)}