/* ============================================================
   k100 - Timeline styles  (stage + strip layout)
   ============================================================ */

/* -- CSS custom properties --------------------------------- */
:root {
--strip-height: 176px;
--strip-card-w: 148px;
--strip-arrow-w: 84px;
--strip-bg: #0e0e0e;
--strip-border: rgba(255,255,255,.08);
--tl-accent: #c8a96e;
--tl-overlay-gradient: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 55%, transparent 100%);
--tl-panel-bg: rgba(12,12,12,.70);
--tl-panel-blur: 14px;
--tl-transition: .45s cubic-bezier(.4,0,.2,1);
}

/* -- Full viewport lock (no page scroll) ------------------- */
/* Ainult ajajoone lehtedel – mitte splash/viktoriin/quiz lehtedel */
html:has(body.k100-exhibition),
body.k100-exhibition {
height: 100%;
overflow: hidden;
}

/* -- Outer wrapper ----------------------------------------- */
.timeline-outer {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
background: #111;
}

/* ===========================================================
   STAGE
   =========================================================== */
.timeline-stage {
position: relative;
flex: 1;
overflow: hidden;
min-height: 0;
}

.stage-event {
position: absolute;
inset: 0;
display: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--tl-transition);
z-index: 1;
}

.stage-event.is-active {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}

.event-media-area {
position: absolute;
inset: 0;
background: #1a1a1a;
overflow: hidden;
}

.media-items {
position: absolute;
inset: 0;
}

.media-item {
position: absolute;
inset: 0;
display: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .4s ease;
z-index: 1;
}

.media-item.is-portrait::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--media-bg-image);
background-size: cover;
background-position: center;
filter: blur(16px) saturate(.9);
transform: scale(1.08);
opacity: .9;
}

.media-item.is-portrait::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.34) 100%);
}

.media-item.is-active {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}

.media-item img,
.media-item video {
width: 100%;
height: 100%;
object-fit: cover;
}

.media-item.is-portrait img {
position: relative;
z-index: 2;
object-fit: contain;
}

.media-video-preview {
position: absolute;
inset: 0;
background-color: #101010;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.media-item.is-video .media-video-play-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 88px;
height: 88px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.54);
border: 2px solid rgba(255,255,255,.78);
color: #fff;
cursor: pointer;
z-index: 8;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.media-item.is-video .media-video-play-badge:hover {
transform: translate(-50%, -50%) scale(1.06);
background: rgba(0,0,0,.7);
border-color: #fff;
}

.media-item.is-video .media-video-play-badge svg {
width: 36px;
height: 36px;
margin-left: 4px;
}

.media-item .media-image-open-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
border-radius: 50%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
background: rgba(0,0,0,.54);
border: 2px solid rgba(255,255,255,.78);
color: #fff;
z-index: 8;
pointer-events: none;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.media-item .media-image-open-badge svg {
width: 30px;
height: 30px;
}

.media-item .media-image-open-label {
font-size: .66rem;
font-weight: 700;
letter-spacing: .08em;
}

.media-item.is-active:hover .media-image-open-badge {
transform: translate(-50%, -50%) scale(1.05);
background: rgba(0,0,0,.68);
border-color: #fff;
}

.media-credit {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 12;
max-width: min(54ch, 70%);
padding: .38rem .62rem;
border-radius: .45rem;
background: rgba(0,0,0,.52);
border: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.94);
font-size: .82rem;
line-height: 1.25;
letter-spacing: .02em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* -- Internal media navigation ------------------------------ */
.media-nav {
position: static;
display: flex;
align-items: center;
gap: .6rem;
pointer-events: auto;
}

.media-nav-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.72);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s;
border: none;
cursor: pointer;
}

.media-nav-btn:hover:not(:disabled) {
background: rgba(0,0,0,.92);
transform: scale(1.04);
}

.media-nav-btn svg {
width: 22px;
height: 22px;
}

.media-nav-btn:disabled {
opacity: .35;
cursor: default;
}

.media-nav-counter {
font-size: 1.02rem;
font-weight: 700;
color: rgba(255,255,255,.95);
min-width: 3.1em;
text-align: center;
text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* -- Title overlay ----------------------------------------- */
.event-title-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 2rem 3.2rem 3rem;
background: var(--tl-overlay-gradient);
z-index: 11;
transition: opacity var(--tl-transition);
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: min(54vh, 560px);
}

.event-title-overlay::after {
display: none;
}

.event-meta-row {
display: inline-flex;
align-items: center;
gap: 3rem;
pointer-events: auto;
margin-top: 1rem;
margin-bottom: .25rem;
flex-wrap: wrap;
}

/* Hoia CTA nupud ajateljest kindlalt kõrgemal timeline-lehel. */
body.k100-exhibition .k100-cta-float {
bottom: calc(var(--strip-height, 176px) + 1.2rem);
}

.event-heading-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: .7rem;
pointer-events: auto;
flex-wrap: wrap;
}

.event-title-inline {
margin: 0;
font-size: clamp(1.55rem, 3.5vw, 2.75rem);
line-height: 1.15;
}

.event-date-chip {
    display: inline-block;
   font-size: clamp(1.15rem, 2.2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tl-accent);
    margin-bottom: .65rem;
    background: #737373a3;
   padding: .72rem 2.2rem;
    border-radius: 45px;
}

.event-title {
font-size: clamp(2.25rem, 5.2vw, 4.6rem);
font-weight: 500;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.7);
line-height: 1.2;
}

.event-media-area:has(.event-description-panel.is-open) .event-title-overlay,
.event-media-area.description-open .event-title-overlay {
opacity: 0;
pointer-events: none;
}

.event-top-actions {
position: absolute;
top: 2rem;
left: 2rem;
display: flex;
align-items: center;
gap: .6rem;
z-index: 14;
}

.event-logo-slot {
height: 54px;
min-width: 108px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .35rem .7rem;
border-radius: 999px;
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}

.event-logo-slot .custom-logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}

.event-logo-slot .custom-logo {
max-height: 42px;
width: auto;
height: auto;
object-fit: contain;
}

.event-logo-placeholder {
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--k100-logo-text-color, rgba(255,255,255,.78));
font-weight: 700;
white-space: nowrap;
}

/* -- Description button ------------------------------------ */
.event-description-btn {
position: static;
display: flex;
align-items: center;
gap: 1.5rem;
padding: .7rem 1.4rem;
border-radius: 999px;
background: rgba(0,0,0,.48);
color: rgba(255,255,255,.95);
font-size: 1.7rem;
font-weight: 700;
letter-spacing: .06em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.36);
cursor: pointer;
transition: background .2s, border-color .2s, transform .2s;
}

.event-description-btn:hover,
.event-description-btn[aria-expanded="true"] {
background: rgba(0,0,0,.58);
border-color: rgba(255,255,255,.55);
color: var(--tl-accent);
opacity: 1;
transform: translateY(-1px);
}

.event-description-btn svg {
width: 20px;
height: 20px;
}

.event-menu-btn {
width: 54px;
height: 54px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.48);
color: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.36);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background .2s, border-color .2s, transform .2s;
}

.event-menu-btn:hover {
background: rgba(0,0,0,.58);
border-color: rgba(255,255,255,.55);
transform: translateY(-1px);
}

.event-menu-btn svg {
width: 24px;
height: 24px;
}

/* -- Global timeline menu panel ----------------------------- */
.timeline-menu-panel {
position: fixed;
top: 0;
left: 0;
right: auto;
height: 100dvh;
width: min(420px, 88vw);
background: rgba(14,14,14,.84);
border-right: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 120;
transform: translateX(-102%);
transition: transform .28s ease;
}

.timeline-menu-panel.is-open {
transform: translateX(0);
}

.timeline-menu-panel-inner {
height: 100%;
padding: 1.2rem 1.2rem 1.8rem;
display: flex;
flex-direction: column;
}

.timeline-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}

.timeline-menu-title {
font-size: 1.2rem;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
margin: 0;
display: inline-flex;
align-items: center;
min-height: 38px;
max-width: calc(100% - 54px);
}

.timeline-menu-title .custom-logo-link {
display: inline-flex;
align-items: center;
line-height: 1;
}

.timeline-menu-title .custom-logo {
display: block;
max-height: 34px;
width: auto;
}

.timeline-menu-site-title {
display: inline-block;
font-size: 1rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.timeline-menu-close {
width: 38px;
height: 38px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.22);
cursor: pointer;
}

.timeline-menu-nav {
overflow: auto;
padding-right: .3rem;
}

.timeline-menu-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .52rem;
}

.timeline-menu-list li {
margin: 0;
}

.timeline-menu-list li > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: .8rem 1rem;
border-radius: .7rem;
text-decoration: none;
color: rgba(255,255,255,.92);
background: rgba(14,14,14,.85);
border: 1px solid rgba(255,255,255,.2);
font-size: .95rem;
font-weight: 700;
letter-spacing: .04em;
transition: background .2s, border-color .2s, color .2s, transform .18s;
}

.timeline-menu-list li > a:hover {
background: rgba(200,169,110,.22);
border-color: rgba(200,169,110,.72);
color: #fff;
transform: translateY(-1px);
}

.timeline-menu-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
opacity: 0;
transition: opacity .2s ease;
z-index: 110;
}

.timeline-menu-backdrop.is-open {
opacity: 1;
}

/* -- Description panel ------------------------------------- */
.event-description-panel {
position: absolute;
left: 1.5rem;
right: auto;
bottom: calc(var(--strip-height) + 1.25rem);
top: 1.25rem;
width: min(76ch, 46vw);
max-width: calc(100% - 4rem);
max-height: none;
z-index: 20;
background: var(--tl-panel-bg);
backdrop-filter: blur(var(--tl-panel-blur)) saturate(1.5);
-webkit-backdrop-filter: blur(var(--tl-panel-blur)) saturate(1.5);
overflow-y: auto;
overflow-x: hidden;
padding: 3.6rem 2.25rem 2rem;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 22px 50px rgba(0,0,0,.38);
transform: translateX(-112%);
transition: transform var(--tl-transition);
visibility: hidden;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(200,169,110,.88) rgba(255,255,255,.14);
-webkit-overflow-scrolling: touch;
}

.event-description-panel::-webkit-scrollbar {
width: 12px;
}

.event-description-panel::-webkit-scrollbar-track {
background: rgba(255,255,255,.12);
border-radius: 999px;
margin-block: 2.75rem .75rem;
}

.event-description-panel::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(210,180,120,.95), rgba(168,138,82,.92));
border-radius: 999px;
border: 2px solid rgba(0,0,0,.25);
min-height: 48px;
}

.event-description-panel::-webkit-scrollbar-thumb:hover {
background: rgba(200,169,110,1);
}

.event-description-panel.has-overflow:not(.is-scrolled-bottom)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3rem;
pointer-events: none;
background: linear-gradient(to top, rgba(12,12,12,.94) 15%, transparent);
}

.event-description-panel.is-open {
transform: translateX(0);
visibility: visible;
}

.event-description-close {
position: absolute;
top: .75rem;
right: .75rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.85);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: background .2s;
}

.event-description-close:hover {
background: rgba(255,255,255,.25);
}

.panel-title {
font-size: clamp(1rem, 2vw, 1.4rem);
color: #fff;
margin-bottom: 1rem;
}

.panel-body {
font-size: clamp(.85rem, 1.2vw, 1rem);
color: rgba(232,228,222,.9);
line-height: 1.75;
max-width: 68ch;
}

.panel-body p:last-child {
margin-bottom: 0;
}

@media (min-width: 1400px) {
.event-description-panel {
left: 1.5rem;
top: 1.5rem;
bottom: calc(var(--strip-height) + 1.5rem);
width: min(84ch, 52vw);
max-width: calc(100% - 5.5rem);
padding: 3.8rem 2.6rem 2.2rem;
}
}

@media (max-width: 900px) {
.event-description-panel {
left: 0;
right: 0;
top: 0;
bottom: var(--strip-height);
width: auto;
max-width: none;
max-height: none;
padding: 3rem 1rem 1rem;
border-radius: 0;
border-left: none;
border-right: none;
transform: translateX(-100%);
}
}

@media (max-width: 640px) {
.event-description-panel {
padding: 2.75rem .9rem .95rem;
}
}

/* Phone / narrow portrait: full-height text overlay above timeline strip */
@media (max-width: 900px) and (orientation: portrait) {
.event-description-panel {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: var(--strip-height);
width: 100%;
max-width: none;
min-height: 0;
padding:
	calc(2.85rem + env(safe-area-inset-top, 0px))
	calc(.65rem + env(safe-area-inset-right, 0px))
	calc(1.15rem + env(safe-area-inset-bottom, 0px))
	calc(.85rem + env(safe-area-inset-left, 0px));
border-radius: 0;
border: none;
box-shadow: none;
z-index: 210;
overflow-y: scroll;
transform: translateX(-100%);
}

.event-description-panel .panel-title {
font-size: clamp(1.12rem, 4.8vw, 1.38rem);
margin-bottom: .85rem;
padding-right: 2.75rem;
}

.event-description-panel .panel-body {
font-size: 1rem;
line-height: 1.68;
max-width: none;
padding-right: .15rem;
}

.event-description-panel::-webkit-scrollbar {
width: 10px;
}

.event-description-panel::-webkit-scrollbar-track {
margin-block: 2.5rem .5rem;
background: rgba(255,255,255,.18);
}

.event-description-panel::-webkit-scrollbar-thumb {
border-width: 2px;
min-height: 56px;
}
}

.media-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: .9rem;
font-style: italic;
}

/* ===========================================================
   STRIP NAV
   =========================================================== */
.timeline-strip-nav {
flex: 0 0 var(--strip-height);
height: var(--strip-height);
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--strip-bg);
border-top: 1px solid var(--strip-border);
z-index: 30;
overflow: hidden;
margin-bottom: .65rem;
}

.timeline-media-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 2.4vw, 28px);
background: rgba(0,0,0,.88);
z-index: 320;
opacity: 0;
transition: opacity .22s ease;
pointer-events: none;
}

.timeline-media-modal.is-open {
opacity: 1;
pointer-events: auto;
}

.timeline-media-modal[hidden] {
display: none !important;
}

.timeline-media-modal-dialog {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.timeline-media-modal-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
pointer-events: none;
}

.timeline-media-modal-content.has-video-controls {
justify-content: center;
gap: .75rem;
padding-bottom: max(.35rem, env(safe-area-inset-bottom));
}

.timeline-media-modal-content.has-video-controls video {
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: auto;
max-height: none;
order: 0;
}

.timeline-media-modal-content img,
.timeline-media-modal-content video,
.timeline-media-modal-toolbar,
.timeline-video-clip-controls,
.timeline-media-modal-credit {
pointer-events: auto;
}

.timeline-media-modal-credit {
position: absolute;
left: max(.9rem, env(safe-area-inset-left));
bottom: max(.9rem, env(safe-area-inset-bottom));
z-index: 8;
max-width: min(70vw, 720px);
padding: .46rem .78rem;
border-radius: .48rem;
background: rgba(0,0,0,.62);
border: 1px solid rgba(255,255,255,.24);
color: rgba(255,255,255,.95);
font-size: .9rem;
line-height: 1.3;
letter-spacing: .01em;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
backdrop-filter: blur(4px);
pointer-events: auto;
}

.timeline-media-modal-content.has-video-controls .timeline-media-modal-credit {
position: static;
left: auto;
bottom: auto;
order: 1;
align-self: stretch;
width: min(1080px, calc(100vw - 2rem));
max-width: none;
margin: 0 auto;
flex: 0 0 auto;
white-space: normal;
overflow: visible;
text-overflow: unset;
}

.timeline-media-modal-credit[hidden] {
display: none !important;
}

.timeline-media-modal-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(.65rem, 2vw, 1rem);
width: min(1080px, calc(100vw - 2rem));
flex: 0 0 auto;
order: 2;
}

.timeline-media-modal-nav.is-in-video-toolbar {
flex: 0 0 auto;
align-items: center;
gap: .65rem;
border-radius: .7rem;
background: rgba(14,14,14,.85);
border: 1px solid rgba(255,255,255,.2);
padding: .55rem .7rem;
box-sizing: border-box;
backdrop-filter: none;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-nav-btn {
width: 38px;
height: 38px;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-nav-btn svg {
width: 18px;
height: 18px;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-counter {
font-size: .8rem;
font-weight: 700;
line-height: 1;
min-width: 0;
}

.timeline-media-modal-footer {
position: absolute;
left: 50%;
bottom: max(.9rem, env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 29;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(.65rem, 2vw, 1.15rem);
flex-wrap: nowrap;
max-width: calc(100vw - 2rem);
pointer-events: none;
}

.timeline-media-modal-footer[hidden] {
display: none !important;
}

.timeline-media-modal-footer > * {
pointer-events: auto;
}

.timeline-media-modal-content img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 0;
}

.timeline-media-modal-content video {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: #000;
border-radius: 0;
}

.timeline-media-modal-content video.is-clickable {
cursor: pointer;
}

.timeline-video-clip-controls {
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: none;
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: .65rem;
margin-top: 0;
padding: .55rem .7rem;
border-radius: .7rem;
background: rgba(14,14,14,.85);
border: 1px solid rgba(255,255,255,.2);
position: relative;
z-index: 6;
pointer-events: auto;
}

.timeline-video-clip-btn {
height: 38px;
width: 38px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.48);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
pointer-events: auto;
touch-action: manipulation;
}

.timeline-video-clip-btn:hover {
background: rgba(200,169,110,.2);
border-color: rgba(200,169,110,.7);
transform: translateY(-1px);
}

.timeline-video-clip-btn svg {
width: 18px;
height: 18px;
display: block;
}

.timeline-video-clip-seek {
width: 100%;
accent-color: var(--tl-accent);
}

.timeline-video-clip-time {
min-width: 110px;
text-align: right;
font-size: .8rem;
font-weight: 700;
letter-spacing: .03em;
color: rgba(255,255,255,.92);
}

@media (max-width: 640px) {
.timeline-media-modal-toolbar {
flex-wrap: wrap;
width: calc(100vw - 1rem);
}

.timeline-media-modal-nav.is-in-video-toolbar {
width: auto;
justify-content: center;
padding: .5rem .55rem;
gap: .45rem;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-nav-btn {
width: 38px;
height: 38px;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-nav-btn svg {
width: 18px;
height: 18px;
}

.timeline-media-modal-nav.is-in-video-toolbar .timeline-media-modal-counter {
font-size: .8rem;
min-width: 0;
}

.timeline-video-clip-controls {
width: 100%;
grid-template-columns: repeat(2, auto) 1fr;
gap: .45rem;
padding: .5rem .55rem;
}

.timeline-video-clip-time {
grid-column: 1 / -1;
text-align: left;
min-width: 0;
}
}

.timeline-media-modal-close {
position: absolute;
top: max(.8rem, env(safe-area-inset-top));
right: max(.8rem, env(safe-area-inset-right));
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.62);
color: #fff;
border: 1px solid rgba(255,255,255,.38);
z-index: 30;
pointer-events: auto;
cursor: pointer;
}

.timeline-media-modal-nav {
position: static;
transform: none;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .65rem;
padding: .35rem .45rem;
border-radius: 999px;
background: rgba(0,0,0,.62);
border: 1px solid rgba(255,255,255,.24);
backdrop-filter: blur(4px);
pointer-events: auto;
}

.timeline-media-modal-nav[hidden] {
display: none !important;
}

.timeline-media-modal-nav-btn {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.48);
color: #fff;
border: 1px solid rgba(255,255,255,.35);
cursor: pointer;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.timeline-media-modal-nav-btn:hover:not(:disabled) {
background: rgba(0,0,0,.92);
transform: scale(1.04);
}

.timeline-media-modal-nav-btn svg {
width: 22px;
height: 22px;
}

.timeline-media-modal-nav-btn:disabled {
opacity: .35;
cursor: default;
}

.timeline-media-modal-counter {
font-size: 1.02rem;
font-weight: 700;
color: rgba(255,255,255,.95);
min-width: 3.2rem;
text-align: center;
}

@media (max-width: 640px) {
.timeline-media-modal-footer {
gap: .5rem;
max-width: calc(100vw - 1rem);
}

.timeline-media-modal-credit {
max-width: min(65vw, 420px);
font-size: .82rem;
padding: .4rem .62rem;
}

.timeline-media-modal-content.has-video-controls .timeline-media-modal-credit {
width: calc(100vw - 1rem);
max-width: none;
font-size: .84rem;
line-height: 1.35;
}

.timeline-media-modal-nav {
gap: .45rem;
padding: .25rem .35rem;
}

.timeline-media-modal-nav-btn {
width: 40px;
height: 40px;
}

.timeline-media-modal-nav-btn svg {
width: 20px;
height: 20px;
}

.timeline-media-modal-counter {
font-size: .9rem;
min-width: 2.8rem;
}
}

body.memory-share-open {
   overflow: hidden;
}

.memory-share-modal {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: clamp(12px, 2.6vw, 30px);
   background: rgba(0,0,0,.8);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   z-index: 335;
   opacity: 0;
   transition: opacity .22s ease;
   pointer-events: none;
}

.memory-share-modal.is-open {
   opacity: 1;
   pointer-events: auto;
}

.memory-share-modal[hidden] {
   display: none !important;
}

.memory-share-modal-dialog {
   position: relative;
   width: min(760px, 100%);
   max-height: min(92vh, 900px);
   overflow: auto;
   padding: 2.2rem 1.2rem 1.3rem;
   border-radius: 16px;
   background: rgba(15,15,15,.95);
   border: 1px solid rgba(255,255,255,.18);
   box-shadow: 0 24px 72px rgba(0,0,0,.48);
}

.memory-share-modal-close {
   position: absolute;
   top: .7rem;
   right: .7rem;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(255,255,255,.08);
   color: #fff;
   border: 1px solid rgba(255,255,255,.26);
   cursor: pointer;
   transition: background .2s ease;
}

.memory-share-modal-close:hover {
   background: rgba(255,255,255,.18);
}

.memory-share-modal-body {
   display: grid;
   gap: .7rem;
   max-width: 700px;
   margin: 0 auto;
}

.memory-share-title {
   margin: 0;
   font-size: clamp(1.3rem, 2.6vw, 1.7rem);
   color: #fff;
}

.memory-share-intro {
   margin: 0;
   font-size: .92rem;
   line-height: 1.45;
   color: rgba(232,228,222,.88);
}

.memory-share-form {
   display: grid;
   gap: .48rem;
   padding: .9rem;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,.13);
   background: rgba(255,255,255,.04);
}

.memory-share-label {
   font-size: .84rem;
   font-weight: 700;
   letter-spacing: .02em;
   color: rgba(255,255,255,.86);
}

.memory-share-input,
.memory-share-textarea {
   width: 100%;
   padding: .72rem .8rem;
   border-radius: .5rem;
   border: 1px solid rgba(255,255,255,.2);
   background: rgba(255,255,255,.07);
   color: #fff;
   font-family: inherit;
   font-size: .95rem;
}

.memory-share-textarea {
   min-height: 160px;
   resize: vertical;
   line-height: 1.5;
}

.memory-share-counter {
   margin: -.1rem 0 .2rem;
   text-align: right;
   font-size: .78rem;
   color: rgba(255,255,255,.6);
}

.memory-share-field-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: .6rem;
}

.memory-share-hint,
.memory-share-file-hint {
   margin: .1rem 0 .2rem;
   font-size: .8rem;
   color: rgba(255,255,255,.68);
}

.memory-share-file-list {
   margin: 0 0 .35rem;
   padding: .45rem .62rem;
   list-style: none;
   border-radius: .55rem;
   border: 1px solid rgba(255,255,255,.15);
   background: rgba(255,255,255,.04);
   display: grid;
   gap: .22rem;
}

.memory-share-file-list[hidden] {
   display: none !important;
}

.memory-share-file-list-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
   font-size: .8rem;
   color: rgba(236,235,231,.95);
   line-height: 1.35;
}

.memory-share-file-name {
   min-width: 0;
   flex: 1;
   word-break: break-word;
}

.memory-share-file-remove {
   flex: 0 0 auto;
   border: 1px solid rgba(255,255,255,.28);
   border-radius: 999px;
   background: rgba(255,255,255,.08);
   color: rgba(255,255,255,.9);
   font-size: .72rem;
   font-weight: 700;
   line-height: 1;
   padding: .36rem .62rem;
   cursor: pointer;
}

.memory-share-file-remove:hover {
   background: rgba(255,255,255,.2);
}

.memory-share-input-file {
   padding: .62rem;
   line-height: 1.2;
}

.memory-share-hp {
   position: absolute;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
}

.memory-share-submit {
   margin-top: .45rem;
   padding: .8rem 1.4rem;
   border-radius: 999px;
   border: 1.5px solid rgba(200,169,110,.68);
   background: rgba(200,169,110,.16);
   color: #f5dfb0;
   font-weight: 700;
   font-family: inherit;
   cursor: pointer;
   transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.memory-share-submit:hover:not(:disabled) {
   background: rgba(200,169,110,.26);
   transform: translateY(-1px);
}

.memory-share-submit:disabled {
   opacity: .7;
   cursor: default;
}

.memory-share-form-message {
   margin: .25rem 0 0;
   font-size: .86rem;
   color: #bbf7d0;
}

.memory-share-form-message.is-error {
   color: #fecaca;
}

.memory-share-submitted-state {
   display: grid;
   gap: .6rem;
   text-align: center;
   padding: clamp(2.2rem, 6vw, 3.2rem) 1rem clamp(1.8rem, 4vw, 2.4rem);
   max-width: 520px;
   margin: 0 auto;
}

.memory-share-submitted-state[hidden] {
   display: none !important;
}

.memory-share-submitted-title {
   margin: 0;
   font-size: clamp(1.16rem, 2.2vw, 1.4rem);
   font-weight: 800;
   color: #f5dfb0;
}

.memory-share-submitted-text {
   margin: 0;
   font-size: .92rem;
   line-height: 1.45;
   color: rgba(241,248,245,.9);
}

.memory-share-modal.is-submitted .memory-share-modal-dialog {
   width: min(560px, 100%);
   max-height: min(62vh, 600px);
}

.memory-share-modal.is-redirecting {
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
}

.memory-share-modal.is-redirecting .memory-share-modal-dialog {
   display: none;
}

.memory-share-success-overlay {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
   background: rgba(8,8,8,.95);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   opacity: 1;
   transition: opacity .9s ease, backdrop-filter .9s ease;
   z-index: 345;
}

.memory-share-success-overlay[hidden] {
   display: none;
}

.memory-share-success-overlay.is-fading {
   opacity: 0;
   backdrop-filter: blur(0);
   -webkit-backdrop-filter: blur(0);
}

.memory-share-success-dialog {
   width: min(680px, 92vw);
   padding: 2rem 2.25rem 1.85rem;
   border-radius: 16px;
   background: rgba(17,17,17,.95);
   border: 1px solid rgba(255,255,255,.2);
   box-shadow: 0 26px 80px rgba(0,0,0,.45);
   display: grid;
   gap: 1.15rem;
}

.memory-share-success-message {
   margin: 0;
   text-align: center;
   font-size: clamp(1.35rem, 3.6vw, 1.75rem);
   line-height: 1.35;
   font-weight: 700;
   color: #f5dfb0;
}

.memory-share-success-progress {
   height: 16px;
   border-radius: 999px;
   overflow: hidden;
   background: rgba(255,255,255,.16);
   border: 1px solid rgba(255,255,255,.2);
}

.memory-share-success-progress-bar {
   display: block;
   width: 0;
   height: 100%;
   background: linear-gradient(90deg, #c8a96e 0%, #22c55e 100%);
   transition: width .12s linear;
}

.memory-share-success-countdown {
   display: none;
}

@media (max-width: 640px) {
   .memory-share-modal-dialog {
      padding: 1.95rem .9rem 1rem;
   }

   .memory-share-field-row {
      grid-template-columns: 1fr;
   }

   .memory-share-success-dialog {
      width: min(680px, calc(100vw - 1.5rem));
      padding: 1.55rem 1.15rem 1.35rem;
      border-radius: 14px;
      gap: 1rem;
   }

   .memory-share-success-message {
      font-size: clamp(1.25rem, 5.2vw, 1.55rem);
      line-height: 1.3;
   }

   .memory-share-success-progress {
      height: 14px;
   }

   .memory-share-submitted-title {
      font-size: clamp(1.2rem, 5vw, 1.45rem);
   }
}

@media (max-width: 640px) {
.media-item .media-image-open-badge {
width: 74px;
height: 74px;
}

.media-item .media-image-open-badge svg {
width: 24px;
height: 24px;
}

.media-item .media-image-open-label {
font-size: .56rem;
}
}

.timeline-strip-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .8rem;
padding: .68rem 1rem .46rem;
}

.timeline-strip-title {
margin: 0;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
}

.timeline-strip-help-inline {
font-size: .84rem;
font-weight: 500;
letter-spacing: .03em;
text-transform: none;
color: rgba(255,255,255,.7);
margin-left: .45rem;
}

.timeline-strip-help {
margin: 0;
font-size: .86rem;
letter-spacing: .03em;
color: rgba(255,255,255,.66);
line-height: 1.3;
max-width: 66ch;
}

.timeline-strip-main {
display: flex;
align-items: center;
flex: 1;
min-height: 0;
}

.strip-arrow {
flex: 0 0 var(--strip-arrow-w);
width: var(--strip-arrow-w);
display: flex;
align-items: center;
justify-content: center;
background: rgba(200,169,110,.08);
color: rgba(255,255,255,.9);
border: none;
cursor: pointer;
transition: color .2s, background .2s, transform .2s;
}

.strip-arrow:hover:not(:disabled) {
color: #fff;
background: rgba(200,169,110,.24);
transform: scale(1.02);
}

.strip-arrow:disabled {
opacity: .35;
cursor: default;
}

.strip-arrow svg {
width: 42px;
height: 42px;
stroke-width: 2.8;
}

.strip-viewport {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}

.strip-viewport::-webkit-scrollbar {
display: none;
}

.strip-track {
display: flex;
align-items: center;
height: 100%;
gap: 6px;
padding: 10px 10px;
}

.strip-card {
flex: 0 0 var(--strip-card-w);
width: var(--strip-card-w);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 8px;
border-radius: 10px;
background: none;
border: 2px solid transparent;
cursor: pointer;
opacity: .5;
transition: opacity .25s, border-color .25s, background .25s;
overflow: hidden;
}

.strip-card:hover {
opacity: .85;
background: rgba(255,255,255,.05);
}

.strip-card.is-active {
opacity: 1;
border-color: var(--tl-accent);
background: rgba(200,169,110,.08);
}

.strip-card-thumb {
position: relative;
width: 100%;
flex: 0 0 auto;
aspect-ratio: 4 / 3;
min-height: 84px;
overflow: hidden;
border-radius: 2px;
background: #2a2a2a;
}

.strip-card-thumb.is-portrait::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--thumb-bg-image);
background-size: cover;
background-position: center;
filter: blur(10px);
transform: scale(1.08);
opacity: .88;
}

.strip-card-thumb.is-portrait::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 100%);
}

.strip-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.strip-card-thumb.is-portrait img {
position: relative;
z-index: 1;
object-fit: contain;
}

.strip-card-no-thumb {
width: 100%;
height: 100%;
display: block;
background: #2a2a2a;
}

.strip-card-video-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.45);
color: rgba(255,255,255,.9);
}

.strip-card-label {
font-size: .95rem;
font-weight: 700;
color: rgba(255,255,255,.68);
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: center;
}

.strip-card.is-active .strip-card-label {
color: var(--tl-accent);
}

.strip-card-title {
display: none;
font-size: .82rem;
font-weight: 700;
line-height: 1.25;
color: rgba(255,255,255,.9);
width: 100%;
text-align: center;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-wrap: balance;
}

.timeline-outer.is-strip-expanded {
--strip-height: min(34dvh, 340px);
--strip-card-w: clamp(220px, 19vw, 320px);
--strip-arrow-w: 96px;
}

.timeline-outer.is-strip-expanded .event-title-overlay {
padding-bottom: 1rem;
}

.timeline-outer.is-strip-expanded .timeline-strip-nav {
padding-top: .85rem;
}

.timeline-outer.is-strip-expanded .timeline-strip-head {
padding-top: 0;
padding-bottom: 0;
}

.timeline-outer.is-strip-expanded .timeline-strip-main {
padding-bottom: .2rem;
}

.timeline-outer.is-strip-expanded .strip-track {
align-items: stretch;
gap: 8px;
padding: 8px 10px;
}

.timeline-outer.is-strip-expanded .strip-card {
gap: 8px;
padding: 10px;
opacity: .72;
}

.timeline-outer.is-strip-expanded .strip-card-thumb {
aspect-ratio: 16 / 10;
min-height: 130px;
}

.timeline-outer.is-strip-expanded .strip-card-label {
font-size: 1rem;
}

.timeline-outer.is-strip-expanded .strip-card-title {
display: -webkit-box;
}

.no-events {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-style: italic;
font-size: .78rem;
}

@media (max-width: 1024px) {
:root {
--strip-height: 160px;
--strip-card-w: 132px;
--strip-arrow-w: 76px;
}

.timeline-strip-nav {
margin-bottom: .45rem;
}

.event-title {
font-size: clamp(1.8rem, 4.4vw, 3.3rem);
}

.timeline-strip-help {
font-size: .78rem;
}
}

@media (max-width: 900px) {
.event-title-overlay {
inset: auto 0 0 0;
padding: 4.6rem 1.5rem 1.45rem;
}

.timeline-outer.is-strip-expanded {
--strip-height: min(40dvh, 360px);
--strip-card-w: min(56vw, 280px);
--strip-arrow-w: 74px;
}

.timeline-outer.is-strip-expanded .event-title-overlay {
padding-bottom: .95rem;
}

.timeline-outer.is-strip-expanded .strip-card-thumb {
min-height: 116px;
}

.event-title-inline {
font-size: clamp(1.25rem, 4.2vw, 1.95rem);
}

.event-date-chip {
font-size: 1.02rem;
padding: .52rem 1.25rem;
letter-spacing: .08em;
}

.event-description-btn {
font-size: .9rem;
padding: .55rem .95rem;
}
}

@media (max-width: 767px) {
:root {
--strip-height: 184px;
}

.timeline-strip-head {
display: none;
}

.timeline-strip-main {
flex: 1;
min-height: 0;
}

.strip-track {
padding: 6px 8px;
}

.event-heading-row {
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}

.event-date-chip {
margin-bottom: 0;
}

.event-meta-row {
gap: .75rem;
}

.event-description-btn {
font-size: .82rem;
padding: .45rem .75rem;
gap: .35rem;
}

.event-description-btn svg {
width: 16px;
height: 16px;
}
}

@media (max-width: 640px) {
:root {
--strip-height: 170px;
--strip-card-w: 112px;
--strip-arrow-w: 62px;
}

.event-title {
font-size: clamp(1.45rem, 6vw, 2.2rem);
}

.event-title-overlay {
inset: auto 0 0 0;
padding: 3.4rem 1rem 1rem;
}

.event-date-chip {
font-size: .88rem;
padding: .45rem .9rem;
margin-bottom: .4rem;
}

.event-top-actions {
top: .75rem;
left: .75rem;
gap: .6rem;
}

.media-credit {
top: 4.5rem;
}

.timeline-strip-main {
min-height: 0;
}

.timeline-strip-help-inline {
display: none;
}

.timeline-strip-title {
font-size: .9rem;
}

.timeline-strip-help {
font-size: .66rem;
line-height: 1.25;
max-width: 100%;
}

.event-meta-row {
margin-top: .45rem;
}

.event-menu-btn {
width: 42px;
height: 42px;
}

.event-logo-slot {
height: 42px;
min-width: 88px;
padding: .25rem .55rem;
}

.event-logo-slot .custom-logo {
max-height: 30px;
}

.event-menu-btn svg {
width: 20px;
height: 20px;
}

.timeline-menu-panel {
width: 100vw;
}

.media-nav-btn {
width: 44px;
height: 44px;
}

.media-nav-btn svg {
width: 24px;
height: 24px;
}

.media-nav-counter {
font-size: 1.15rem;
}

.strip-track {
gap: 5px;
padding: 7px 6px;
}

.strip-card {
padding: 6px;
gap: 5px;
}

.strip-card-label {
font-size: .78rem;
}

.timeline-outer.is-strip-expanded {
--strip-height: min(36dvh, 220px);
--strip-card-w: min(60vw, 190px);
--strip-arrow-w: 58px;
}

.timeline-outer.is-strip-expanded .event-title-overlay {
padding-bottom: .8rem;
}

.timeline-outer.is-strip-expanded .timeline-strip-nav {
padding-top: .2rem;
}

.timeline-outer.is-strip-expanded .strip-track {
gap: 8px;
padding: 7px 6px;
}

.timeline-outer.is-strip-expanded .strip-card-title {
font-size: .78rem;
}

.panel-body {
font-size: .9rem;
}

/* Move focus button to bottom-right corner so it doesn't cover text */
.media-item .media-image-focus {
top: auto;
left: auto;
bottom: .65rem;
right: .65rem;
transform: none;
width: 40px;
height: 40px;
}
.media-item .media-image-focus svg {
width: 22px;
height: 22px;
}
.media-item .media-image-focus:hover {
transform: scale(1.06);
}
.media-item .media-image-focus[aria-pressed="true"] {
transform: none;
}
}

@media (max-width: 380px) {
:root {
--strip-height: 124px;
--strip-card-w: 96px;
--strip-arrow-w: 54px;
}

.timeline-strip-title {
font-size: .82rem;
}

.timeline-strip-help {
font-size: .6rem;
}
}

/* -- WP admin toolbar safe viewport ------------------------ */
body.admin-bar .timeline-outer {
height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
body.admin-bar .timeline-outer {
height: calc(100dvh - 46px);
}
}

/* -- Better fit on smaller screens ------------------------- */
@media (max-width: 768px) {
.media-item img,
.media-item video {
object-fit: contain;
background: #111;
}
}

/* ===========================================================
   LANDSCAPE PHONES  (any width, max-height ≤ 500px)
   =========================================================== */
@media (orientation: landscape) and (max-height: 500px) {

/* Restore cover so images fill the frame without black bars */
.media-item img,
.media-item video {
object-fit: cover;
background: transparent;
}

.media-item.is-portrait img {
object-fit: contain;
}

/* Compact strip variables */
:root {
--strip-height: 76px;
--strip-card-w: 76px;
--strip-arrow-w: 44px;
}

.timeline-outer.is-strip-expanded {
--strip-height: 100px;
--strip-card-w: 92px;
--strip-arrow-w: 48px;
}

/* Hide the AJATELG header row – reclaims ~36px */
.timeline-strip-head {
display: none;
}

/* Tighter overlay padding */
.event-title-overlay {
padding: 2.2rem .75rem .5rem;
}

.timeline-outer.is-strip-expanded .event-title-overlay {
padding-bottom: .4rem;
}

/* Top-left action bar – keep out of image area */
.event-top-actions {
top: .35rem;
left: .35rem;
gap: .3rem;
}

.event-menu-btn {
width: 32px;
height: 32px;
}

.event-menu-btn svg {
width: 18px;
height: 18px;
}

.event-logo-slot {
height: 32px;
min-width: 64px;
padding: .2rem .4rem;
}

.event-logo-slot .custom-logo {
max-height: 22px;
}

.event-logo-placeholder {
font-size: .68rem;
}

/* Date chip + inline title smaller */
.event-date-chip {
font-size: .78rem;
padding: .3rem .7rem;
margin-bottom: .3rem;
}

.event-title-inline {
font-size: clamp(.9rem, 2.8vw, 1.2rem);
}

/* Description button */
.event-description-btn {
font-size: .8rem;
padding: .35rem .65rem;
}

/* Media-nav buttons */
.media-nav-btn {
width: 32px;
height: 32px;
}

.media-nav-btn svg {
width: 18px;
height: 18px;
}

.media-nav-counter {
font-size: .85rem;
}

/* Video play button */
.media-item.is-video .media-play-center {
width: 52px;
height: 52px;
}

.media-item.is-video .media-play-center svg {
width: 22px;
height: 22px;
}

/* Focus button: bottom-right corner */
.media-item .media-image-focus {
top: auto;
left: auto;
bottom: .5rem;
right: .5rem;
transform: none;
width: 34px;
height: 34px;
}

.media-item .media-image-focus svg {
width: 18px;
height: 18px;
}

.media-item .media-image-focus:hover {
transform: scale(1.06);
}

.media-item .media-image-focus[aria-pressed="true"] {
transform: none;
}

/* Strip cards – ultra-compact */
.strip-track {
gap: 4px;
padding: 5px 4px;
}

.strip-card {
padding: 4px;
gap: 3px;
}

.strip-card-thumb {
min-height: 44px;
}

.strip-card-label {
font-size: .66rem;
}

/* Description panel: full width above strip in landscape */
.event-description-panel {
left: 0;
right: 0;
top: 0;
bottom: var(--strip-height);
width: auto;
max-width: none;
max-height: none;
border-radius: 0;
border-left: none;
border-right: none;
transform: translateX(-100%);
}

.event-description-panel.is-open {
transform: translateX(0);
}

/* Menu panel full width */
.timeline-menu-panel {
width: 100vw;
}
}