/* ==========================================================================
   Dubbelbluf — utilities.css
   Visually-hidden, reveal animation classes, spacing helpers.
   ========================================================================== */

/* Visually hidden (screen reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reveal animations (controlled by reveal.js with IntersectionObserver) */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for children */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: var(--s-8); }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-48 { margin-top: var(--s-48); }
.mt-64 { margin-top: var(--s-64); }

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: var(--s-8); }
.mb-16 { margin-bottom: var(--s-16); }
.mb-24 { margin-bottom: var(--s-24); }
.mb-32 { margin-bottom: var(--s-32); }
.mb-48 { margin-bottom: var(--s-48); }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* Image utilities */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-rounded {
    border-radius: var(--r-md);
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 420px;
}

/* Gallery masonry-style grid */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--s-16);
    max-height: 480px;
}

.gallery-grid__item {
    overflow: hidden;
    border-radius: var(--r-md);
}

.gallery-grid__item--large {
    grid-row: span 2;
}

.gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gallery overlay text */
.gallery-overlay {
    position: relative;
}

.gallery-overlay__text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--s-32);
    background: linear-gradient(transparent, rgba(18, 17, 16, 0.85));
    border-radius: 0 0 var(--r-md) var(--r-md);
}

.gallery-overlay__title {
    font-family: var(--f-heading);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--c-white);
    margin-bottom: var(--s-8);
}

.gallery-overlay__subtitle {
    font-size: 0.875rem;
    color: var(--c-text-dim);
}

/* Event photos 2x2 grid */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
}

.photo-grid__item {
    overflow: hidden;
    border-radius: var(--r-md);
    max-height: 280px;
}

.photo-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Poker gallery 3-image grid */
.poker-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-16);
}

.poker-gallery__item {
    overflow: hidden;
    border-radius: var(--r-md);
    max-height: 240px;
}

.poker-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flex center utility */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thank-you page layout */
.thank-you {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    padding: var(--s-80) var(--s-24);
}

.thank-you__box {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: var(--s-32);
    margin-top: var(--s-32);
    margin-bottom: var(--s-32);
    text-align: left;
}

.thank-you__box li {
    padding: var(--s-8) 0;
    font-size: 0.9375rem;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
}

.thank-you__box li:last-child {
    border-bottom: none;
}