/* Reels (inc/reels.php): the shelf of cover cards on the home and category pages, and the full-screen feed.
   The reels carry their own symbol (top left) and place pills (top right) burned in, so the feed's controls
   stay off those corners: the close button sits top centre, the actions on the left edge low down. */

/* ------------------------------------------------------------------ shelf */
.od-shelf { margin-block: 2.4rem 1.2rem; }
.od-main > .od-shelf:first-of-type, .od-main > h1 + .od-shelf { margin-block-start: 0.6rem; }   /* first thing on the home page */
.od-shelf__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.9rem; }
.od-shelf__title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-family: var(--display); font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; color: var(--ink); }
.od-shelf__title .od-ico { width: 1.05em; height: 1.05em; padding: 0.16em; border-radius: 50%; background: var(--od-dose); color: #fff; }
.od-shelf__all { font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none !important;
	border-block-end: 3px solid var(--od-dose); padding-block-end: 2px; }
.od-shelf__all:hover { color: var(--od-dose); }
.od-shelf__row { display: flex; gap: 14px; margin: 0; padding: 0 0 0.6rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.od-shelf__row::-webkit-scrollbar { display: none; }
.od-reelcard { flex: 0 0 clamp(138px, 36vw, 196px); scroll-snap-align: start; }
.od-reelcard a { display: block; color: var(--ink); text-decoration: none !important; }
.od-reelcard__frame { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius);
	background: var(--ink); box-shadow: inset 0 -5px 0 var(--od); isolation: isolate; }
.od-reelcard__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.od-reelcard a:hover .od-reelcard__img { transform: scale(1.04); }
.od-reelcard__time { position: absolute; inset-block-end: 14px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 3px;
	padding: 4px 9px 4px 7px; border-radius: 99px; background: rgb(14 12 18 / 0.62); color: #fff; font: 600 0.82rem/1 var(--display);
	direction: ltr; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.od-reelcard__time .od-ico { width: 14px; height: 14px; }
.od-reelcard__title { display: -webkit-box; margin-block-start: 0.55rem; font: 700 1rem/1.35 var(--display); -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden; }
.od-reelcard a:hover .od-reelcard__title { color: var(--od); }
.od-ico { display: block; width: 24px; height: 24px; flex: none; }

/* ------------------------------------------------------------------ feed */
.od-reels { position: fixed; inset: 0; z-index: 10; margin: 0 !important; padding: 0 !important; max-width: none !important;
	background: #0E0C12; color: #fff; }
.od-feed { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory;
	scrollbar-width: none; }
.od-feed::-webkit-scrollbar { display: none; }
.od-reel { --S: 100vw; position: relative; height: 100vh; height: 100dvh; display: grid; place-items: center;
	scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.od-reel__stage { position: relative; width: 100%; height: 100%; }
.od-reel__poster, .od-reel__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.od-reel__video { background: transparent; }
.od-reel__bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: rgb(255 255 255 / 0.18); direction: ltr; }
.od-reel__bar i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--od); }
.od-reel__flash { position: absolute; inset: 50% auto auto 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
	background: rgb(14 12 18 / 0.55) center / 44px no-repeat; opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; transform: scale(0.8); }
.od-reel__flash.is-on { opacity: 1; transform: none; transition-duration: 0.12s; }
.od-reel__flash.is-muted { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='white'/%3E%3Cpath d='M16 9.5l5 5m0-5l-5 5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.od-reel__flash.is-sound { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='white'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7M18 6a8.5 8.5 0 010 12' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.od-reel__flash.is-paused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5h3v13H8zM13 5.5h3v13h-3z' fill='white'/%3E%3C/svg%3E"); }

/* the text under the reel: page, place and date, title */
.od-reel__meta { position: absolute; inset-inline: 16px 76px; inset-block-end: calc(18px + env(safe-area-inset-bottom)); z-index: 2;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.55); pointer-events: none; }
.od-reel__meta a, .od-reel__meta button { pointer-events: auto; }
.od-reel__meta::before { content: ""; position: absolute; inset: -28px -16px -40px -100px; z-index: -1; pointer-events: none;
	background: linear-gradient(to top, rgb(14 12 18 / 0.88), rgb(14 12 18 / 0.5) 60%, transparent); }
.od-reel .od-badge { color: #fff; font-size: 0.9rem; }
.od-reel .od-badge .od-symbol { width: 22px; }
.od-reel__when { display: none; margin: 0.35rem 0 0; font-size: 0.82rem; opacity: 0.8; }   /* phones: the reel shows place and date itself */
.od-reel__title { margin: 0.25rem 0 0; font: 800 1rem/1.4 var(--display); color: #fff; display: -webkit-box; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden; }
.od-reel__excerpt { display: none; }
.od-reel__more { margin-block-start: 0.45rem; padding: 0; border: 0; background: none; color: #fff; font: 700 0.85rem/1 var(--display);
	text-decoration: underline; text-decoration-color: var(--od); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }

/* actions: on the left edge (RTL end), above the text */
.od-reel__actions { position: absolute; inset-inline-end: 10px; inset-block-end: calc(24px + env(safe-area-inset-bottom)); z-index: 3;
	display: grid; gap: 12px; }
.od-reel__actions button, .od-feed__close, .od-feed__nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
	border: 0; border-radius: 50%; background: rgb(14 12 18 / 0.5); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 0.2s ease, transform 0.15s ease; }
.od-reel__actions button:active, .od-feed__nav button:active { transform: scale(0.92); }
.od-reel__actions button:hover, .od-feed__close:hover, .od-feed__nav button:hover { background: var(--od); }
[data-od-mute] .od-ico + .od-ico, .is-sound [data-od-mute] .od-ico:first-child { display: none; }
.is-sound [data-od-mute] .od-ico + .od-ico { display: block; }
.od-feed__close { position: fixed; inset-block-start: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 5; width: 40px; height: 40px;
	transform: translateX(-50%); }
.od-feed__brand { display: none; }
.od-feed__nav { display: none; }
.od-feed__hint { position: fixed; inset-inline: 0; inset-block-start: calc(62px + env(safe-area-inset-top)); z-index: 4; margin: 0;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
	text-align: center; font: 700 0.95rem/1 var(--display); pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.od-feed__hint.is-on { opacity: 1; animation: od-hint 1.4s ease-in-out 3; }
@keyframes od-hint { 50% { transform: translateY(-10px); } }

/* the sheet: everything the reel said, its sources and credits */
.od-reel__sheet { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; background: rgb(14 12 18 / 0.45); }
.od-reel__sheet[hidden] { display: none; }
.od-reel__sheetin { position: relative; width: 100%; max-height: 72%; overflow-y: auto; overscroll-behavior: contain;
	padding: 1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--cream); color: var(--ink);
	box-shadow: inset 0 5px 0 var(--od); animation: od-sheet 0.28s ease-out; }
@keyframes od-sheet { from { transform: translateY(40px); opacity: 0; } }
.od-reel__sheetclose { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 38px; height: 38px;
	padding: 0; border: 0; border-radius: 50%; background: rgb(23 21 28 / 0.08); color: var(--ink); cursor: pointer; }
.od-reel__sheettitle { margin: 0 0 0.6rem; font: 800 1.15rem/1.2 var(--display); }
.od-reel__text { margin: 0 0 1.3rem; padding-inline-start: 1.3rem; line-height: 1.75; }
.od-reel__text li::marker { color: var(--od); font-weight: 700; }
.od-reel__sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; padding: 0; list-style: none; }
.od-reel__sources a { display: inline-block; padding: 6px 12px; border-radius: 99px; background: #fff; color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--rule); font-size: 0.9rem; text-decoration: none !important; }
.od-reel__sources a:hover { box-shadow: inset 0 0 0 2px var(--od); }
.od-reel__credits { margin: 0 0 1rem; font-size: 0.8rem; color: var(--muted); }
.od-reel__read { display: inline-block; padding: 10px 18px; border-radius: 12px; background: var(--od); color: #fff;
	font: 700 1rem/1 var(--display); text-decoration: none !important; }

/* computers and tablets on their side: the reel is a column in the middle, the text to its right,
   the actions and the up/down buttons to its left */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
	.od-reel { --S: calc((100dvh - 40px) * 9 / 16); }
	.od-reel__stage { width: var(--S); height: calc(100dvh - 40px); border-radius: 16px; overflow: hidden; }
	.od-reel__meta { right: auto; left: calc(50% + var(--S) / 2 + 28px); inset-block-end: 40px; width: min(340px, calc(50% - var(--S) / 2 - 56px)); text-shadow: none; }
	.od-reel__when { display: block; }
	.od-reel__meta::before { display: none; }
	.od-reel__title { font-size: 1.35rem; -webkit-line-clamp: 4; }
	.od-reel__excerpt { display: block; margin: 0.5rem 0 0; opacity: 0.8; line-height: 1.6; }
	.od-reel__actions { right: auto; left: calc(50% - var(--S) / 2 - 66px); inset-block-end: 40px; }
	.od-reel__sheet { inset-inline: calc(50% - var(--S) / 2); inset-block: 20px; width: var(--S); border-radius: 16px; overflow: hidden; }
	.od-feed__close { inset-block-start: 20px; left: auto; inset-inline-end: 24px; transform: none; }
	.od-feed__brand { display: block; position: fixed; inset-block-start: 20px; inset-inline-start: 24px; z-index: 5; width: 46px; }
	.od-feed__nav { display: grid; gap: 12px; position: fixed; inset-inline-end: 24px; top: 50%; z-index: 5; transform: translateY(-50%); }
	.od-feed__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.od-feed { scroll-behavior: auto; }
	.od-feed__hint.is-on { animation: none; }
	.od-reel__sheetin { animation: none; }
	.od-reelcard__img { transition: none; }
}