/*
 * Blog Pro media - videos, audio, galleries, link cards and maps, on any
 * public page. Colours come from the Domma tokens, so inside a Blog Pro blog
 * they follow its theme, and elsewhere the site's.
 */

.bp-media { margin: 2rem 0; display: flex; flex-direction: column; gap: .55rem; }
.bp-media-caption { font-size: .88rem; line-height: 1.5; color: var(--dm-text-muted, #666); text-align: center; }
.bp-media-frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--dm-radius-lg, 12px); background: #0d0f14; }
.bp-media-frame video, .bp-media-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bp-media-frame video { object-fit: contain; background: #000; }

/* Width and float */
.bp-media--wide { margin-left: -6%; margin-right: -6%; }
.bp-media--full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.bp-media--full .bp-media-frame, .bp-media--full .bp-gallery-items { border-radius: 0; }
.bp-media--center { max-width: 34rem; margin-left: auto; margin-right: auto; }
.bp-media--left, .bp-media--right { width: min(46%, 22rem); margin-top: .35rem; margin-bottom: 1rem; }
.bp-media--left { float: left; margin-right: 1.5rem; }
.bp-media--right { float: right; margin-left: 1.5rem; }
@media (max-width: 720px) {
  .bp-media--wide { margin-left: 0; margin-right: 0; }
  .bp-media--left, .bp-media--right { float: none; width: auto; margin-left: 0; margin-right: 0; }
}

/* ── The facade: a poster, a play button, and who it comes from ──────── */
.bp-media-facade { display: grid; place-items: center; color: #fff; isolation: isolate; }
.bp-media-facade.no-poster { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--dm-primary, #3b82f6) 55%, #111), #0d0f14 70%); }
.bp-media .bp-media-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.bp-media-facade::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%); }
.bp-media .bp-media-facade:hover .bp-media-poster { transform: scale(1.03); filter: saturate(1.08); }
.bp-media-play { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--dm-primary, #3b82f6); color: var(--bp-on-accent, #fff); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease; }
.bp-media-play:hover, .bp-media-play:focus-visible { transform: scale(1.08); box-shadow: 0 14px 40px rgba(0,0,0,.45); outline: none; }
.bp-media-play:focus-visible { box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 14px 40px rgba(0,0,0,.45); }
.bp-media-play-icon { width: 0; height: 0; margin-left: .3rem; border-style: solid; border-width: .85rem 0 .85rem 1.35rem; border-color: transparent transparent transparent currentColor; }
.bp-media-badge { position: absolute; top: .8rem; left: .9rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.bp-media-title { position: absolute; left: 1rem; right: 1rem; bottom: 2.1rem; font-weight: 700; font-size: clamp(.95rem, 2vw, 1.15rem); line-height: 1.3;
  text-shadow: 0 1px 10px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-media-consent { position: absolute; left: 1rem; right: 1rem; bottom: .75rem; font-size: .72rem; opacity: .75; }
.bp-media-consent a { color: inherit !important; text-decoration: underline !important; }

/* ── Audio ─────────────────────────────────────────────────────────────── */
.bp-audio { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: .6rem 1rem; align-items: center;
  padding: 1rem; border-radius: var(--dm-radius-lg, 12px); border: 1px solid var(--dm-border, rgba(127,127,127,.25));
  background: var(--dm-surface, transparent); color: var(--dm-text, inherit); }
.bp-audio.bp-media-facade { place-items: stretch; color: var(--dm-text, inherit); }
.bp-audio.bp-media-facade::after { display: none; }
.bp-media .bp-audio-cover { grid-row: 1 / 3; width: 4.5rem; height: 4.5rem; border-radius: var(--dm-radius-md, 8px); object-fit: cover; }
.bp-audio-cover--none { display: block; background: linear-gradient(135deg, var(--dm-primary, #3b82f6), color-mix(in srgb, var(--dm-primary, #3b82f6) 40%, #000)); }
.bp-audio-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bp-audio-title { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-audio-artist { font-size: .85rem; color: var(--dm-text-muted, #666); }
.bp-audio audio { width: 100%; height: 2.4rem; }
.bp-media-play--audio { width: auto; height: auto; justify-self: start; display: inline-flex; gap: .5rem; align-items: center; padding: .5rem 1rem .5rem .8rem;
  border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; box-shadow: none; }
.bp-media-play--audio .bp-media-play-icon { border-width: .45rem 0 .45rem .7rem; margin: 0; }
.bp-media-play--audio:hover { transform: none; filter: brightness(1.08); box-shadow: none; }
.bp-audio-player iframe { display: block; width: 100%; border: 0; border-radius: var(--dm-radius-lg, 12px); }

/* ── Galleries ─────────────────────────────────────────────────────────── */
/* Every media picture is selected under .bp-media: a blog's own
   `.blog-content img { height: auto }` loads later and would otherwise win,
   leaving grey gaps under cropped pictures. */
.bp-media .bp-gallery-items { list-style: none; margin: 0; padding: 0; }
.bp-media .bp-gallery-item + .bp-gallery-item { margin-top: 0; }
.bp-gallery-item { margin: 0; position: relative; }
.bp-gallery-link { display: block; overflow: hidden; border-radius: var(--dm-radius-md, 8px); cursor: zoom-in; background: rgba(127,127,127,.12); }
.bp-media .bp-gallery-link img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bp-media .bp-gallery-link:hover img { transform: scale(1.04); }
.bp-gallery-caption { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.4; color: var(--dm-text-muted, #666); }

.bp-gallery--grid .bp-gallery-items { display: grid; grid-template-columns: repeat(var(--bp-cols, 3), minmax(0, 1fr)); gap: .6rem; }
.bp-gallery--grid .bp-gallery-link { aspect-ratio: 4 / 3; }
.bp-gallery--masonry .bp-gallery-items { columns: var(--bp-cols, 3) 10rem; column-gap: .6rem; }
.bp-gallery--masonry .bp-gallery-item { break-inside: avoid; margin-bottom: .6rem; }
.bp-media.bp-gallery--masonry .bp-gallery-link img { height: auto; }
.bp-gallery--mosaic .bp-gallery-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 9rem; grid-auto-flow: dense; gap: .5rem; }
.bp-gallery--mosaic .bp-gallery-item { min-height: 0; }
.bp-gallery--mosaic .bp-gallery-link { position: absolute; inset: 0; }
.bp-gallery--mosaic .bp-gallery-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.bp-gallery--mosaic .bp-gallery-item:nth-child(5n+4) { grid-column: span 2; }
.bp-gallery--carousel, .bp-gallery--strip { position: relative; }
.bp-gallery--carousel .bp-gallery-items { display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 34rem); gap: .75rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.bp-gallery--carousel .bp-gallery-item { scroll-snap-align: center; }
.bp-gallery--carousel .bp-gallery-link { aspect-ratio: 3 / 2; }
.bp-gallery-nav { display: flex; justify-content: flex-end; gap: .4rem; }
.bp-gallery-nav button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: var(--dm-surface, transparent);
  color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.bp-gallery-nav button:disabled { opacity: .35; cursor: default; }
.bp-gallery--strip .bp-gallery-items { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .4rem; }
.bp-gallery--strip .bp-gallery-item { flex: 0 0 auto; }
.bp-gallery--strip .bp-gallery-link { height: 11rem; }
.bp-media.bp-gallery--strip .bp-gallery-link img { width: auto; height: 100%; }
.bp-gallery--strip .bp-gallery-caption { display: none; }
@media (max-width: 600px) {
  .bp-gallery--grid .bp-gallery-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-gallery--mosaic .bp-gallery-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Link cards ────────────────────────────────────────────────────────── */
/* The site theme colours and underlines every content link with !important at
   (0,7,3). A card and a gallery picture are links but not text links: the
   never-matching id in :is() lifts these to (1,1,1) without touching anything else. */
.bp-media a:is(.bp-linkcard, .bp-gallery-link, #bp-media-never),
.bp-media a:is(.bp-linkcard, .bp-gallery-link, #bp-media-never):hover { color: var(--dm-text, inherit) !important; text-decoration: none !important; }
.bp-linkcard { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--dm-radius-lg, 12px);
  border: 1px solid var(--dm-border, rgba(127,127,127,.28)); background: var(--dm-surface, transparent); color: var(--dm-text, inherit) !important;
  text-decoration: none !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.bp-linkcard.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); }
.bp-linkcard:hover { border-color: var(--dm-primary, #3b82f6); box-shadow: 0 10px 28px rgba(0,0,0,.1); transform: translateY(-1px); }
.bp-linkcard-image { order: 2; display: block; min-height: 100%; background: rgba(127,127,127,.12); }
.bp-media .bp-linkcard-image img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.bp-linkcard-text { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.15rem; min-width: 0; }
.bp-linkcard-site { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-primary, #3b82f6); }
.bp-linkcard-title { font-size: 1.05rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-linkcard-desc { font-size: .88rem; line-height: 1.5; color: var(--dm-text-muted, #666); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-linkcard-url { margin-top: auto; padding-top: .25rem; font-size: .76rem; color: var(--dm-text-muted, #666); }
.bp-media--compact .bp-linkcard.has-image { grid-template-columns: minmax(0, 1fr) 6rem; }
.bp-media--compact .bp-linkcard-desc { display: none; }
@media (max-width: 560px) {
  .bp-linkcard.has-image { grid-template-columns: minmax(0, 1fr); }
  .bp-linkcard-image { order: 0; aspect-ratio: 1.91 / 1; }
}
.bp-media-fallback a { word-break: break-all; }

/* ── Maps ──────────────────────────────────────────────────────────────── */
.bp-map-facade { background:
  linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.05)),
  repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.07) 38px 40px),
  repeating-linear-gradient(25deg, transparent 0 56px, rgba(255,255,255,.05) 56px 58px),
  radial-gradient(circle at 60% 45%, #4f7a5a, #2c4a3a 60%, #1f3129); }
.bp-map-pin { position: absolute; left: 50%; top: 42%; width: 1.6rem; height: 1.6rem; translate: -50% -100%; rotate: -45deg; border-radius: 50% 50% 50% 0;
  background: var(--dm-primary, #e11d48); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.bp-map-pin::after { content: ""; position: absolute; inset: .45rem; border-radius: 50%; background: #fff; }
.bp-media-play--map { width: auto; height: auto; padding: .7rem 1.3rem; border-radius: 999px; font: inherit; font-weight: 700; margin-top: 3.5rem; }

/* ── The lightbox ──────────────────────────────────────────────────────── */
.bp-lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: transparent; color: #fff; overflow: hidden; }
.bp-lightbox::backdrop { background: rgba(8, 9, 12, .92); }
.bp-lightbox[open] { display: grid; place-items: center; }
.bp-lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 92vw; }
.bp-lightbox .bp-lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.bp-lightbox-caption { font-size: .95rem; text-align: center; max-width: 60ch; opacity: .9; }
.bp-lightbox-btn, .bp-lightbox-close { position: fixed; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.bp-lightbox-btn { top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; }
.bp-lightbox-btn:hover, .bp-lightbox-close:hover { background: rgba(255,255,255,.24); }
.bp-lightbox-prev { left: 1rem; }
.bp-lightbox-next { right: 1rem; }
.bp-lightbox-close { top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.1rem; }
.bp-lightbox-count { position: fixed; top: 1.4rem; left: 1.2rem; font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.bp-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bp-media-poster, .bp-gallery-link img, .bp-linkcard, .bp-media-play { transition: none !important; }
}