/* ------------------------------------------------------------------------------
   Galleries (1.7.5)

   One stylesheet for the gallery page, an album page, and the two Gallery sections in
   the page builder, so an album looks the same wherever it is shown. Everything is
   scoped under .wg and takes its colors from the active theme's own variables, the way
   the modern page sections do, so Draisap and Serepok both get their own accent and
   both dark modes work without a second file.
   ------------------------------------------------------------------------------ */

.wg {
    --wg-accent: var(--dr-accent, var(--primary, var(--mtd-scheme-primary, #bf0000)));
    --wg-ink: var(--dr-ink, var(--mtd-ink, #17191c));
    --wg-muted: var(--dr-ink-2, var(--mtd-muted, #6b7280));
    --wg-surface: var(--dr-surface, #fff);
    --wg-soft: var(--dr-surface-2, #f6f7f9);
    --wg-line: var(--dr-line-card, rgba(17, 19, 24, .1));
    --wg-radius: var(--dr-radius-card, 18px);
    --wg-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    --wg-ease: cubic-bezier(.22, .61, .36, 1);
    color: var(--wg-ink);
}
body.dark-mode .wg {
    --wg-ink: #f4f6fa;
    --wg-muted: rgba(244, 246, 250, .68);
    --wg-surface: rgba(255, 255, 255, .05);
    --wg-soft: rgba(255, 255, 255, .04);
    --wg-line: rgba(255, 255, 255, .12);
    --wg-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}

/* ---- category chips ---- */
.wg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.wg-chip { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--wg-line); border-radius: 999px; background: var(--wg-surface); color: var(--wg-ink); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: border-color .2s var(--wg-ease), background .2s var(--wg-ease), color .2s var(--wg-ease); }
.wg-chip:hover, .wg-chip:focus-visible { border-color: var(--wg-accent); color: var(--wg-accent); text-decoration: none; }
.wg-chip.is-active { border-color: var(--wg-accent); background: var(--wg-accent); color: var(--dr-on-accent, #fff); }

/* ---- album cards ---- */
.wg-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wg-grid--compact { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wg-card { margin: 0; }
.wg-card__link { display: flex; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--wg-line); border-radius: var(--wg-radius); background: var(--wg-surface); color: inherit; text-decoration: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); transition: transform .3s var(--wg-ease), box-shadow .3s var(--wg-ease), border-color .3s var(--wg-ease); }
.wg-card__link:hover, .wg-card__link:focus-visible { transform: translateY(-4px); border-color: rgba(0, 0, 0, 0); box-shadow: var(--wg-shadow); color: inherit; text-decoration: none; }
.wg-card__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wg-soft); }
.wg-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--wg-ease); }
.wg-card__link:hover .wg-card__frame img { transform: scale(1.06); }
.wg-card__blank { display: grid; width: 100%; height: 100%; place-items: center; color: var(--wg-muted); font-size: 28px; }
.wg-card__count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(12, 11, 20, .68); color: #fff; font-size: 12px; font-weight: 800; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wg-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.wg-card__eyebrow { color: var(--wg-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.wg-card__title { color: var(--wg-ink); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.wg-card__text { display: -webkit-box; overflow: hidden; color: var(--wg-muted); font-size: 14px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wg-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 10px; color: var(--wg-muted); font-size: 12.5px; }
.wg-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.wg-card.is-featured .wg-card__link { border-color: color-mix(in srgb, var(--wg-accent) 40%, transparent); }

/* ---- album page ---- */
.wg-album__head { margin: 0 0 30px; }
.wg-album__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; color: var(--wg-muted); font-size: 13.5px; font-weight: 600; }
.wg-album__meta span { display: inline-flex; align-items: center; gap: 7px; }
.wg-album__intro { max-width: 70ch; margin-top: 18px; color: var(--wg-muted); font-size: 16px; line-height: 1.7; }
.wg-album__credit { margin: 22px 0 0; color: var(--wg-muted); font-size: 13px; font-style: italic; }
.wg-draft { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 9px 15px; border-radius: 999px; background: color-mix(in srgb, var(--wg-accent) 12%, transparent); color: var(--wg-accent); font-size: 13px; font-weight: 700; }

/*
   The mosaic is a grid, not CSS columns: columns fill downwards, which puts the
   second picture at the foot of the first column and quietly undoes the order the
   album was arranged in. A grid keeps the order left to right, and because every
   tile is the same shape the rows line up. The first picture leads, two columns
   wide and two rows tall, which fills exactly and leaves no hole behind it.
*/
.wg-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wg-even { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wg-mosaic--2, .wg-even--2 { grid-template-columns: repeat(2, 1fr); }
.wg-mosaic--4, .wg-even--4 { grid-template-columns: repeat(4, 1fr); }
.wg-tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.wg-mosaic > .wg-tile:first-child { grid-column: span 2; grid-row: span 2; }
.wg-mosaic > .wg-tile:first-child .wg-tile__open { aspect-ratio: auto; height: 100%; }
.wg-mosaic--2 > .wg-tile:first-child { grid-column: span 1; grid-row: span 1; }
.wg-mosaic--2 > .wg-tile:first-child .wg-tile__open { aspect-ratio: 4 / 3; height: auto; }
.wg-tile__open { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: calc(var(--wg-radius) - 4px); background: var(--wg-soft); cursor: zoom-in; }
.wg-tile__open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--wg-ease), filter .3s var(--wg-ease); }
.wg-tile__open:hover img, .wg-tile__open:focus-visible img { transform: scale(1.04); }
.wg-tile__open:focus-visible { outline: 3px solid var(--wg-accent); outline-offset: 3px; }
.wg-tile.is-video .wg-tile__open { cursor: pointer; }
.wg-tile__play { position: absolute; top: 50%; left: 50%; display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: rgba(12, 11, 20, .62); color: #fff; font-size: 19px; transform: translate(-50%, -50%); transition: background .25s var(--wg-ease), transform .25s var(--wg-ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wg-tile__open:hover .wg-tile__play { background: var(--wg-accent); transform: translate(-50%, -50%) scale(1.06); }

/*
   A caption sits on the picture and comes up with the pointer, so the rows stay
   even; it is always read out in full in the lightbox, and a page that asks for
   captions under each picture gets them in the flow instead.
*/
.wg-tile__caption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 34px 14px 12px; border-radius: 0 0 calc(var(--wg-radius) - 4px) calc(var(--wg-radius) - 4px); background: linear-gradient(to top, rgba(8, 9, 12, .82), rgba(8, 9, 12, .45) 55%, rgba(8, 9, 12, 0)); color: rgba(255, 255, 255, .84); font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--wg-ease), transform .25s var(--wg-ease); pointer-events: none; }
.wg-tile__caption strong { display: block; color: #fff; font-size: 13.5px; }
.wg-tile:hover .wg-tile__caption, .wg-tile:focus-within .wg-tile__caption { opacity: 1; transform: none; }
.wg-tile--below .wg-tile__caption, .wg-captions-below .wg-tile__caption { position: static; padding: 9px 2px 0; border-radius: 0; background: none; color: var(--wg-muted); opacity: 1; transform: none; }
.wg-tile--below .wg-tile__caption strong, .wg-captions-below .wg-tile__caption strong { color: var(--wg-ink); }
.wg-captions-below > .wg-tile:first-child { grid-column: auto; grid-row: auto; }
.wg-captions-below > .wg-tile:first-child .wg-tile__open { aspect-ratio: 4 / 3; height: auto; }

.wg-more { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--wg-line); }
.wg-more__title { margin: 0 0 20px; font-size: 20px; font-weight: 800; }
.wg-back { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--wg-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.wg-back:hover { text-decoration: underline; }

.wg-empty { display: grid; gap: 12px; justify-items: center; padding: 70px 20px; border: 1px dashed var(--wg-line); border-radius: var(--wg-radius); color: var(--wg-muted); text-align: center; }
.wg-empty i { font-size: 30px; opacity: .6; }
.wg-empty p { margin: 0; font-size: 15px; }

.wg-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 38px; }
.wg-page { display: grid; min-width: 40px; height: 40px; place-items: center; padding: 0 12px; border: 1px solid var(--wg-line); border-radius: 12px; background: var(--wg-surface); color: var(--wg-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.wg-page.is-current, .wg-page:hover { border-color: var(--wg-accent); color: var(--wg-accent); text-decoration: none; }
.wg-page.is-current { background: var(--wg-accent); color: var(--dr-on-accent, #fff); }

/* ---- lightbox ---- */
.wg-lightbox { position: fixed; z-index: 99999; inset: 0; display: none; background: rgba(8, 8, 12, .94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wg-lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.wg-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: rgba(255, 255, 255, .76); font-size: 13px; font-weight: 700; }
.wg-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 16px; }
.wg-lightbox__stage img, .wg-lightbox__stage video { max-width: min(1400px, 94vw); max-height: 78vh; border-radius: 10px; object-fit: contain; }
.wg-lightbox__stage iframe { width: min(1200px, 92vw); aspect-ratio: 16 / 9; max-height: 78vh; border: 0; border-radius: 10px; }
.wg-lightbox__foot { min-height: 58px; padding: 12px 24px 26px; color: rgba(255, 255, 255, .84); font-size: 14px; line-height: 1.55; text-align: center; }
.wg-lightbox__foot strong { display: block; margin-bottom: 3px; color: #fff; font-size: 15px; }
.wg-lightbox__foot small { display: block; margin-top: 5px; color: rgba(255, 255, 255, .55); font-size: 12px; }
.wg-lightbox__btn { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; cursor: pointer; transition: background .2s var(--wg-ease), transform .2s var(--wg-ease); }
.wg-lightbox__btn:hover { background: rgba(255, 255, 255, .2); }
.wg-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.wg-lightbox__nav--prev { left: 14px; }
.wg-lightbox__nav--next { right: 14px; }
.wg-lightbox__btn[hidden] { display: none; }

@media (max-width: 767.98px) {
    .wg-mosaic, .wg-even { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wg-mosaic > .wg-tile:first-child { grid-column: span 2; grid-row: span 1; }
    .wg-mosaic > .wg-tile:first-child .wg-tile__open { aspect-ratio: 16 / 10; height: auto; }
    /* On a phone tile there is no pointer to bring the caption up, so the title is
       shown on the picture and the caption is left to the lightbox - except on the
       lead picture, which has the room for both. */
    .wg-tile__caption { opacity: 1; transform: none; padding: 26px 11px 10px; font-size: 12px; }
    .wg-tile__caption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wg-mosaic:not(.wg-captions-below) > .wg-tile .wg-tile__caption span,
    .wg-even:not(.wg-captions-below) > .wg-tile .wg-tile__caption span { display: none; }
    .wg-mosaic:not(.wg-captions-below) > .wg-tile:first-child .wg-tile__caption span { display: block; }
    .wg-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .wg-lightbox__stage img, .wg-lightbox__stage video { max-height: 66vh; }
    .wg-lightbox__nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-card__link, .wg-card__frame img, .wg-tile__open img, .wg-tile__play { transition: none; }
    .wg-card__link:hover { transform: none; }
    .wg-card__link:hover .wg-card__frame img, .wg-tile__open:hover img { transform: none; }
}