/* Gallery (templates/core/gallery_list.html): photo categories as folders, a category's photos in a grid, and the
   viewer. The site's palette — deep green, gold, sand on cream — and its Plus Jakarta Sans headings. */
.gl-page { --gl-deep: #0a2e1a; --gl-green: #1a472a; --gl-gold: #f1c40f; --gl-sand: #f2ede1; --gl-ink: #1f2a22; --gl-muted: #4b5563;
    padding: 52px 5% 84px; background: #f9f6ef; }

/* rise on load, as the other new-design pages */
@media (prefers-reduced-motion: no-preference) {
    .gl-rise, .gl-folder, .gl-photo { animation: glRise .6s cubic-bezier(.16, 1, .3, 1) both; }
    .gl-folder:nth-child(4n+2), .gl-photo:nth-child(5n+2) { animation-delay: .05s; }
    .gl-folder:nth-child(4n+3), .gl-photo:nth-child(5n+3) { animation-delay: .1s; }
    .gl-folder:nth-child(4n+4), .gl-photo:nth-child(5n+4) { animation-delay: .15s; }
    .gl-photo:nth-child(5n+5) { animation-delay: .2s; }
    @keyframes glRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* heading rows */
.gl-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6d0b; }
.gl-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
html body .gl-intro h2, html body .gl-album-title h2 { margin: 8px 0 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 2.5vw, 38px); font-weight: 800;
    line-height: 1.1; letter-spacing: -.03em; color: var(--gl-deep); text-align: left; }
html body .gl-intro p { margin: 10px 0 0; font-size: 16px; color: var(--gl-muted); text-align: left !important; }
.gl-intro p b { color: var(--gl-deep); }
.gl-tools { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; }
.gl-search { position: relative; flex: 0 1 360px; }
/* the Videos button, left of the search: the one highlighted call to action on the page — a solid orange pill on a warm glow,
   the play icon in a white disc with a ring pulsing out of it, and a light sweep crossing the pill every few seconds */
.gl-videos-btn { position: relative; isolation: isolate; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 7px 22px 7px 7px;
    border-radius: 999px; background: linear-gradient(135deg, #ff9a3c 0%, #f07a16 45%, #d4580a 100%); color: #fff !important;
    font: 800 15px 'Plus Jakarta Sans', sans-serif; letter-spacing: .01em; text-decoration: none !important; white-space: nowrap;
    box-shadow: 0 10px 26px -8px rgba(232, 118, 26, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
.gl-videos-btn i { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding-left: 3px; box-sizing: border-box; border-radius: 50%; background: #fff; color: #e8761a; font-size: 15px;
    box-shadow: 0 2px 8px rgba(160, 60, 0, .35); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.gl-videos-btn i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.gl-videos-btn::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
.gl-videos-btn:hover, .gl-videos-btn:focus-visible { transform: translateY(-3px); outline: none;
    box-shadow: 0 16px 34px -10px rgba(232, 118, 26, .9), 0 0 0 4px rgba(241, 196, 15, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gl-videos-btn:hover i, .gl-videos-btn:focus-visible i { transform: scale(1.1); }
@media (prefers-reduced-motion: no-preference) {
    .gl-videos-btn i::after { animation: glPlayPulse 2s cubic-bezier(.2, .6, .4, 1) infinite; }
    .gl-videos-btn::before { animation: glVideoSheen 4.5s ease-in-out 1s infinite; }
    @keyframes glPlayPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
    @keyframes glVideoSheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
}
.gl-search i { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--gl-green); opacity: .6; }
.gl-search input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; border: 1px solid rgba(10, 46, 26, .14); border-radius: 999px; background: #fff;
    font: 500 15px 'Plus Jakarta Sans', sans-serif; color: var(--gl-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.gl-search input:focus { border-color: var(--gl-green); box-shadow: 0 0 0 3px rgba(26, 71, 42, .12); }

/* ── the folders ── */
.gl-folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.gl-folder { position: relative; display: block; text-decoration: none !important; color: inherit; border-radius: 16px; outline: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
/* on hover or focus: the folder lifts on a soft green glow, its cover deepens, the name turns gold and "Open" appears */
.gl-folder:hover, .gl-folder:focus-visible { transform: translateY(-6px); }
.gl-folder:hover .gl-folder-cover, .gl-folder:focus-visible .gl-folder-cover { box-shadow: 0 28px 46px -18px rgba(10, 46, 26, .7); }
.gl-folder-cover { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--gl-sand);
    box-shadow: 0 10px 28px -14px rgba(10, 46, 26, .45); }
.gl-folder-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.gl-folder-cover { transition: box-shadow .45s ease; }
.gl-folder-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 46, 26, .1), rgba(10, 46, 26, .55)); opacity: 0; transition: opacity .45s ease; }
.gl-folder:hover .gl-folder-cover::before, .gl-folder:focus-visible .gl-folder-cover::before { opacity: 1; }
.gl-folder-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 46, 26, 0) 35%, rgba(10, 46, 26, .55) 62%, rgba(10, 46, 26, .94) 100%); }
.gl-folder-badge { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, .92); color: var(--gl-green); font-size: 15px; transition: background .3s, color .3s; }
.gl-folder-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px 18px 16px; }
.gl-folder-name { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.gl-folder-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.gl-folder-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--gl-gold); color: var(--gl-deep); font-size: 12px; font-weight: 800; }
.gl-folder-open { padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--gl-deep); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.gl-folder-name { transition: color .3s ease; }
.gl-folder:hover .gl-folder-name, .gl-folder:focus-visible .gl-folder-name { color: var(--gl-gold); }
.gl-folder:hover .gl-folder-cover img, .gl-folder:focus-visible .gl-folder-cover img { transform: scale(1.07); }
.gl-folder:hover .gl-folder-open, .gl-folder:focus-visible .gl-folder-open { opacity: 1; transform: none; }
.gl-folder:hover .gl-folder-badge, .gl-folder:focus-visible .gl-folder-badge { background: var(--gl-gold); color: var(--gl-deep); }
.gl-folder[hidden] { display: none; }

.gl-empty { margin: 32px 0 0; padding: 32px; border: 2px dashed rgba(10, 46, 26, .14); border-radius: 16px; text-align: center !important; font-weight: 600; color: var(--gl-muted); }
.gl-empty i { margin-right: 8px; color: var(--gl-green); }
.gl-empty button { margin-left: 8px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--gl-green); color: #fff; font-weight: 700; cursor: pointer; }

/* ── one category ── */
.gl-album-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 32px; padding: 24px 28px;
    border-radius: 16px; background: var(--gl-deep); }
.gl-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff !important;
    font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background .2s; }
.gl-back:hover { background: var(--gl-gold); color: var(--gl-deep) !important; }
.gl-album-head .gl-kicker { color: var(--gl-gold); }
.gl-album-head .gl-kicker.gl-kicker-lg { gap: 12px; font-size: 30px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
html body .gl-album-head .gl-album-title h2 { margin-top: 4px; color: #fff; font-size: clamp(24px, 2.2vw, 34px); }
html body .gl-album-title p { margin: 8px 0 0; color: rgba(255, 255, 255, .78); text-align: left !important; }
.gl-count { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--gl-gold); color: var(--gl-deep); font-size: 14px; font-weight: 800; white-space: nowrap; }

.gl-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; scroll-margin-top: 140px; }   /* ten a page: two full rows */
.gl-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--gl-sand); cursor: zoom-in; }
.gl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .3s; }
.gl-photo { transition: transform .3s ease, box-shadow .3s ease; }
.gl-photo-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(10, 46, 26, .85));
    color: #fff; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-photo:hover, .gl-photo:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 36px -16px rgba(10, 46, 26, .65); outline: none; }
.gl-photo:hover img, .gl-photo:focus-visible img { transform: scale(1.05); filter: brightness(1.05); }
.gl-photo:focus-visible { outline: 3px solid var(--gl-green); outline-offset: 3px; }
.gl-video { cursor: default; background: #000; }
.gl-video video, .gl-video iframe { width: 100%; height: 100%; border: 0; object-fit: contain; }

.gl-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.gl-pager-link { display: inline-flex; align-items: center; gap: 14px; max-width: 48%; padding: 14px 20px; border-radius: 12px; background: var(--gl-sand); color: var(--gl-deep) !important;
    font-weight: 800; text-decoration: none !important; transition: background .2s, transform .2s; }
.gl-pager-link small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6d0b; }
.gl-pager-link:hover { background: #e6dfcd; transform: translateY(-2px); }
.gl-pager-next { margin-left: auto; text-align: right; }

/* ── videos ── two to a row, each in a white frame: the video inset with a thin border, its name and the speed control below on white */
.gl-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.gl-video-card { margin: 0; padding: 10px; border: 1px solid rgba(10, 46, 26, .1); border-radius: 18px; background: #fff;
    box-shadow: 0 18px 40px -24px rgba(10, 46, 26, .45); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.gl-video-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(10, 46, 26, .55); }
.gl-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; }
.gl-video-frame video, .gl-video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.gl-video-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 6px; }
.gl-video-card strong { display: inline-flex; align-items: center; gap: 10px; font: 800 17px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; color: var(--gl-deep); }
.gl-video-card strong i { color: #e8761a; font-size: 18px; }
.gl-speed { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gl-muted); white-space: nowrap; }
.gl-speed i { color: var(--gl-green); }
.gl-speed select { padding: 5px 10px; border: 1px solid rgba(10, 46, 26, .15); border-radius: 8px; background: var(--gl-sand); color: var(--gl-deep); font-weight: 700; cursor: pointer; }

/* ── the viewer ── */
.gl-viewer { position: fixed; inset: 0; z-index: 2147483000;   /* over the sticky header and every other layer */ display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(5, 18, 10, .96); color: #fff; }
.gl-viewer[hidden] { display: none; }
.gl-viewer-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.gl-viewer-count { font: 700 14px Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.gl-viewer-tools { display: flex; gap: 8px; }
.gl-viewer button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 17px;
    cursor: pointer; transition: background .2s, color .2s; }
.gl-viewer button:hover, .gl-viewer button:focus-visible { background: var(--gl-gold, #f1c40f); color: #0a2e1a; outline: none; }
.gl-viewer-nav { align-self: center; justify-self: center; width: 52px !important; height: 52px !important; }
.gl-viewer-stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: pan-y; }
.gl-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-drag: none;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s; transform-origin: 50% 50%; }
.gl-viewer-stage.is-zoomed img { cursor: zoom-out; transition: opacity .2s; }
.gl-viewer-cap { grid-column: 1 / -1; min-height: 1.5em; margin: 0; padding: 12px 20px 20px; text-align: center !important; font-size: 15px; color: rgba(255, 255, 255, .85); }
body.gl-lock { overflow: hidden; }

/* ── pages of a collection ── */
.gl-pages { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 16px 20px; border-radius: 14px; background: var(--gl-sand); }
.gl-pages-info { font-size: 14px; color: var(--gl-muted); }
.gl-pages-info b { color: var(--gl-deep); }
.gl-pages-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gl-page-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; background: #fff;
    color: var(--gl-deep) !important; font: 700 14px Roboto, sans-serif; font-variant-numeric: tabular-nums; text-decoration: none !important; transition: background .2s, color .2s, transform .2s; }
a.gl-page-btn:hover { background: var(--gl-gold); transform: translateY(-1px); }
.gl-page-btn.is-on { background: var(--gl-deep); color: var(--gl-gold) !important; }
.gl-page-btn.is-off { opacity: .4; }
.gl-page-gap { padding: 0 4px; color: var(--gl-muted); }

/* ── widths: five photos to a row on desktop, fewer as the screen narrows ── */
@media (max-width: 1200px) { .gl-folders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .gl-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .gl-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .gl-folders, .gl-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gl-album-head { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
    .gl-back, .gl-count { justify-self: start; }
}
@media (max-width: 700px) { .gl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 560px) {
    .gl-page { padding: 32px 20px 52px; }
    .gl-folders, .gl-video-grid { grid-template-columns: minmax(0, 1fr); }
    .gl-tools { flex-basis: 100%; } .gl-search { flex: 1 1 auto; }
    .gl-viewer { grid-template-columns: 0 minmax(0, 1fr) 0; }
    .gl-viewer-nav { position: absolute; bottom: 64px; z-index: 2; }
    .gl-prev { left: 16px; } .gl-next { right: 16px; }
    .gl-pager { flex-direction: column; } .gl-pager-link { max-width: none; }
}