/* Scoped gallery layout and media viewer, adapted from Kaan Platform. */
.dweb-gallery { min-width: 0; margin-block: 16px; }
body:has(.dweb-gallery) #primary .entry-title, body:has(.dweb-gallery) #primary .wp-block-paragraph { text-align: center; }
.dweb-gallery-tabs { display: flex; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 4px; border: 1px solid var(--dweb-border); border-radius: 12px; background: #f5f6f8; }
.dweb-gallery-tabs button { min-width: 112px; min-height: 38px; padding: 6px 16px; border: 1px solid var(--dweb-border); border-radius: 8px; background: #fff; color: #102b49; font: inherit; cursor: pointer; transition: background-color .15s, border-color .15s; }
.dweb-gallery-tabs button[aria-selected="true"], .dweb-gallery-tabs button:hover { border-color: var(--dweb-primary); background: var(--dweb-primary); }
.dweb-gallery-tabs button:focus-visible { outline: 2px solid #102b49; outline-offset: 3px; }
.dweb-gallery [role="tabpanel"][hidden] { display: none; }
.dweb-gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--dweb-content-gap); }
.dweb-gallery-photo, .dweb-gallery-video-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--dweb-border); border-radius: 12px; background: #fff; box-shadow: var(--dweb-shadow); }
.dweb-gallery-photo > a { position: relative; display: block; aspect-ratio: 16/17; overflow: hidden; border-radius: 12px; }
.dweb-gallery-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .3s; }
.dweb-gallery-photo > a::after, .dweb-gallery-video-trigger::before { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; z-index: 2; height: 8px; background: #4a5df9; transition: bottom .3s ease-in-out; }
@media (min-width:600px) { .dweb-gallery-photo > a:hover img, .dweb-gallery-video-trigger:hover img { transform: scale(1.1); } .dweb-gallery-photo > a:hover::after, .dweb-gallery-video-trigger:hover::before { bottom: 0; } }
.dweb-gallery-photo figcaption { padding: 12px; font-size: 14px; font-weight: 700; text-align: center; }
.dweb-gallery-photo:hover, .dweb-gallery-video-card:focus-within { border-color: var(--dweb-primary); }
.dweb-gallery-video-card { display: flex; flex-direction: column; background: #f8f9fb; }
.dweb-gallery-video-trigger { position: relative; display: block; width: 100%; aspect-ratio: 16/17; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #102b49; cursor: pointer; }
.dweb-gallery-video-trigger::after { content: ""; position: absolute; top: 50%; left: 50%; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #fff; filter: drop-shadow(0 1px 3px #0008); transform: translate(-40%,-50%); }
.dweb-gallery-video-trigger img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1); transition: transform .3s; }
.dweb-gallery-video-copy h3 { margin: 0 0 6px; }
.dweb-gallery-video-copy p { margin: 0 0 12px; color: var(--dweb-muted); }
.dweb-gallery-video-copy a { align-self: center; margin-top: auto; padding: 6px 10px; border: 1px solid var(--dweb-primary); border-radius: 7px; background: var(--dweb-primary); color: #102b49; font-weight: 700; }
.dweb-gallery-viewer { width: min(1000px,calc(100vw - 36px)); height: min(760px,calc(100dvh - 36px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #0b0c0f; color: #fff; }
.dweb-gallery-viewer::backdrop { background: #000c; }
.dweb-gallery-viewer-layout { display: grid; grid-template-rows: minmax(0,1fr) auto auto; width: 100%; height: 100%; }
.dweb-gallery-viewer figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.dweb-gallery-viewer figure :is(img,video) { position: absolute; inset: 18px 18px 10px; display: block; width: calc(100% - 36px); height: calc(100% - 28px); object-fit: contain; }
.dweb-gallery-viewer-caption { min-height: 24px; margin: 0; padding: 2px 18px 7px; color: #e6e6e6; font-size: 12px; line-height: 1.25; text-align: center; }
.dweb-gallery-viewer-controls { display: flex; justify-content: center; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid #ffffff1f; background: #111318; }
.dweb-gallery-viewer-controls button { min-width: 76px; min-height: 27px; padding: 3px 14px; border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; color: #171717; font: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.dweb-gallery-viewer-controls button:hover { border-color: #aaa; background: #ececec; }
.dweb-gallery-viewer-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dweb-gallery-viewer-controls button[data-close] { border-color: var(--dweb-primary); background: var(--dweb-primary); color: #102b49; }
@media (max-width: 1080px) { .dweb-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .dweb-gallery-grid { grid-template-columns: minmax(0,1fr); } .dweb-gallery-tabs { width: 100%; gap: 4px; } }

/* Match gallery video copy to site typography; remove image accent line. */
.dweb-gallery-video-copy { display: flex; flex: 1; flex-direction: column; padding: 12px; text-align: center; font-family: inherit; }
.dweb-gallery-video-copy h3 { font-family: inherit; font-size: 16px; line-height: 1.4; }
.dweb-gallery-video-copy p { font-family: inherit; font-size: 14px; line-height: 1.55; }
.dweb-gallery-video-copy a { font-family: inherit; font-size: 14px; text-decoration: none; }
.dweb-gallery-video-copy a:is(:hover,:focus-visible) { text-decoration: none; }
.dweb-gallery-video-trigger::before { content: none; }
.dweb-gallery-photo > a::after { content: none; }
.dweb-gallery-photo figcaption a { text-decoration: none; }

/* The three gallery filters use the same type as the rest of the site. */
.dweb-gallery-tabs button {
  font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 600px) {
  .dweb-gallery-tabs button { flex: 1; min-width: 0; padding-inline: 6px; font-size: 12px; }
}