/* Photos and videos section on the boat pages (see boat-media.php). Reuses the tour-package tokens. */
.bmedia__grid { display: grid; gap: 16px; margin-top: 26px; grid-template-columns: 1fr; align-items: start; }
.bmedia__item { margin: 0; background: #fff; border: 1px solid var(--pkg-line); border-radius: var(--pkg-radius); padding: 8px 8px 6px; box-shadow: 0 12px 32px rgba(3,46,66,.08); min-width: 0; }
.bmedia__frame { position: relative; overflow: hidden; border-radius: 9px; background: var(--pkg-navy); }
.bmedia__frame img,
.bmedia__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* With JavaScript, the lazy poster image shows first and the video fades in once it is playing */
.bmedia--js .bmedia__video { opacity: 0; transition: opacity .4s ease; }
.bmedia--js .bmedia__frame.is-ready .bmedia__video { opacity: 1; }
/* Loader: shown over the poster while a video is being fetched or buffering */
.bmedia__frame.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bmedia-spin .8s linear infinite; pointer-events: none; }
@keyframes bmedia-spin { to { transform: rotate(360deg); } }
.bmedia__item figcaption { padding: 9px 4px 4px; text-align: center; font-size: 13px; font-weight: 600; color: var(--pkg-gray); }

/* A tall video is shown as a 4:5 window on phones so it does not fill the whole screen */
.bmedia__item--video.bmedia__item--portrait .bmedia__frame { aspect-ratio: 4 / 5 !important; }

.bmedia__pill { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #fff; background: rgba(3,26,40,.72); backdrop-filter: blur(4px); pointer-events: none; }

/* Play / pause button, shown once boat-media.js is running */
.bmedia__toggle { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(3,26,40,.72); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bmedia__toggle[hidden] { display: none; }
.bmedia__toggle:hover { background: rgba(3,26,40,.9); }
.bmedia__toggle:focus-visible { outline: 3px solid var(--pkg-gold); outline-offset: 2px; }
.bmedia__icon { display: block; width: 14px; height: 16px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; } /* pause bars */
.bmedia__toggle.is-paused .bmedia__icon { width: 0; height: 0; border: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; margin-left: 3px; } /* play triangle */

@media (min-width: 600px) {
	.bmedia__grid--2,
	.bmedia__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.bmedia__grid--3 .bmedia__item--landscape.bmedia__item--video { grid-column: 1 / -1; }
	.bmedia__grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
}
@media (min-width: 900px) {
	.bmedia__grid--3 { grid-template-columns: repeat(3, 1fr); }
	.bmedia__grid--3 .bmedia__item--landscape.bmedia__item--video { grid-column: span 2; }
	/* one row height for every card, so wide videos, tall videos and photos line up */
	.bmedia__grid--3 .bmedia__frame { aspect-ratio: auto !important; height: 400px; }
	.bmedia__grid--1 { grid-template-columns: minmax(0, 420px); }
}
@media (prefers-reduced-motion: reduce) {
	.bmedia__pill { backdrop-filter: none; }
	.bmedia--js .bmedia__video { transition: none; }
	.bmedia__frame.is-loading::after { animation: none; border-top-color: rgba(255,255,255,.35); }
}