.gallery-public-page { background: #fff; color: #292224; }
.gallery-hero { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 70px); background: linear-gradient(120deg, #720c17, #b52327); color: #fff; overflow: hidden; }
.gallery-hero-index { background: linear-gradient(90deg, rgba(42, 10, 18, .82), rgba(102, 17, 29, .52)), url('../images/perlaBuilding.png') center 42% / cover no-repeat; }
.gallery-hero-album { min-height: clamp(300px, 32vw, 380px); display: flex; align-items: center; background: #32131b; }
.gallery-hero-cover, .gallery-hero-overlay { position: absolute; inset: 0; }
.gallery-hero-cover { z-index: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; filter: saturate(.88) brightness(.82); }
.gallery-hero-overlay { z-index: 1; background: linear-gradient(90deg, rgba(38, 10, 19, .76) 0%, rgba(62, 14, 26, .56) 38%, rgba(38, 10, 19, .18) 100%); pointer-events: none; }
.gallery-hero-album > .container-xxl { position: relative; z-index: 2; width: 100%; min-width: 0; padding-inline: clamp(16px, 4vw, 32px); }
.gallery-hero h1 { margin: 0 0 12px; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.gallery-hero p:not(.eyebrow) { max-width: 620px; margin: 0; font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.gallery-hero .gallery-event-date { margin-bottom: 4px; }
.gallery-album-description { display: -webkit-box; max-width: min(620px, 100%); max-height: 5.1em; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gallery-album-description.is-expanded { display: block; max-height: none; overflow: visible; }
.gallery-caption-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-top: 8px; border: 0; background: transparent; color: #ffe1e1; font-size: .88rem; font-weight: 700; cursor: pointer; }
.gallery-caption-toggle:hover { color: #fff; text-decoration: underline; }
.gallery-caption-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-hero .eyebrow { color: #ffe1e1; }
.gallery-hero-compact { padding-top: 42px; }
.gallery-back-link { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 22px; color: #fff; font-weight: 700; text-decoration: none; }
.gallery-back-link:hover { color: #fff; text-decoration: underline; }
.gallery-event-date { font-weight: 700; }
.gallery-albums-section { padding: clamp(48px, 7vw, 88px) 0; }
.gallery-media-section { padding: 30px 0; }
.gallery-media-section > .container-xxl { min-width: 0; }
.gallery-section-heading { margin-bottom: 30px; }
.gallery-section-heading h2 { margin: 0; color: var(--perla-black, #251c1e); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); }
.gallery-empty { padding: 28px; border: 1px solid #ead9d8; border-radius: 12px; background: #fff8f7; color: #67484a; }
.gallery-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gallery-album-card { overflow: hidden; border: 1px solid #eadedf; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(63, 22, 26, .08); transition: transform .2s ease, box-shadow .2s ease; }
.gallery-album-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(63, 22, 26, .14); }
.gallery-album-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.gallery-album-link > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #f0e9e9; }
.gallery-album-card-body { padding: 16px; }
.gallery-album-card-body time { display: block; margin: 0 0 6px; color: #9b2026; font-size: .78rem; font-weight: 800; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.gallery-album-card-body h3 { display: -webkit-box; max-height: 3.1em; overflow: hidden; margin: 0 0 6px; font-size: 1.25rem; line-height: 1.55; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gallery-album-card-body p { display: -webkit-box; max-height: 3.1em; overflow: hidden; margin: 0 0 12px; color: #6c5c5e; line-height: 1.55; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gallery-album-card-body span { display: inline-flex; align-items: center; gap: 6px; color: #9d151f; font-size: .88rem; font-weight: 800; line-height: 1.35; }
.gallery-media-section { background: #faf8f8; }
.gallery-media-toolbar { display: flex; gap: 8px; margin-bottom: 22px; }
.gallery-filter-button { padding: 8px 18px; border: 1px solid #ddc8ca; border-radius: 999px; background: #fff; color: #76202b; font-size: .9rem; font-weight: 700; cursor: pointer; }
.gallery-filter-button.is-active, .gallery-filter-button:hover { border-color: #9d151f; background: #9d151f; color: #fff; }
.gallery-media-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.gallery-media-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #eee; cursor: pointer; }
.gallery-media-tile.is-selected { border-color: #ad1d25; box-shadow: 0 0 0 4px rgba(173,29,37,.18); }
.gallery-media-tile img, .gallery-media-tile video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #eee8e7; transition: transform .25s ease; }
.gallery-media-tile:hover img, .gallery-media-tile:hover video { transform: scale(1.04); }
.gallery-video-icon { position: absolute; top: 50%; left: 50%; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: rgba(112,12,23,.9); color: #fff; transform: translate(-50%, -50%); }
.gallery-filter-empty { margin: 26px 0 0; color: #6c5c5e; }
.gallery-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.gallery-pagination button { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #ddc8ca; border-radius: 7px; background: #fff; color: #76202b; cursor: pointer; }
.gallery-pagination button.is-active, .gallery-pagination button:hover { border-color: #9d151f; background: #9d151f; color: #fff; }
.gallery-modal-content { border: 0; border-radius: 14px; overflow: hidden; background: #171314; color: #fff; }
.gallery-modal-content .modal-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.gallery-modal-content .modal-title { color: #fff; }
.gallery-modal-content .btn-close { filter: invert(1); opacity: .8; }
.gallery-modal-caption { max-width: 80%; margin: 0 auto 14px; color: rgba(255,255,255,.9); font-size: .95rem; text-align: center; }
.gallery-modal-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.gallery-modal-nav { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.05); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.gallery-modal-nav:hover { background: rgba(255,255,255,.16); }
#galleryModalMedia { display: grid; max-height: 66vh; min-height: 180px; place-items: center; overflow: auto; background: #171314; }
#galleryModalMedia img, #galleryModalMedia video { display: block; max-width: 100%; max-height: 66vh; }
#galleryModalMedia img, #galleryModalMedia video { transform-origin: center center; transition: transform .2s ease; }
.gallery-modal-toolbar { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.gallery-modal-toolbar button { min-width: 34px; height: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
@media (max-width: 1199.98px) { .gallery-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .gallery-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .gallery-hero-index { background-position: 58% center; } .gallery-hero-album { min-height: 330px; padding-block: 24px 32px; } .gallery-hero-cover { background-position: center center; } .gallery-hero-overlay { background: linear-gradient(90deg, rgba(38, 10, 19, .84), rgba(62, 14, 26, .5)); } .gallery-album-grid { grid-template-columns: 1fr; } .gallery-media-section > .container-xxl { padding-inline: 16px; } .gallery-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gallery-media-tile { min-width: 0; aspect-ratio: 1 / 1; } }