/**
 * Page-scoped styles for Video Center (templates/page-video-center.php) and
 * Media Gallery (templates/page-media-gallery.php). Reuses design tokens
 * from assets/css/base.css — no colors are hardcoded outside those tokens
 * except where the source spec calls for a literal value already used
 * elsewhere in the theme (e.g. #0A1133 dark band).
 *
 * @package PearlIMS
 */

/* =====================================================================
 * Shared: filter pills (Video Center + Media Gallery use the same look)
 * =================================================================== */
.pim-vc-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pim-vc-pill{
	display:inline-flex; align-items:center; gap:6px; font:600 13.5px/1 var(--pim-font);
	padding:9px 16px; border-radius:999px; border:1px solid var(--pim-border-2);
	background:#fff; color:#4A5169; cursor:pointer; transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.pim-vc-pill:hover{ border-color:var(--pim-blue); color:var(--pim-blue); }
.pim-vc-pill.is-active{ background:var(--pim-blue); border-color:var(--pim-blue); color:#fff; }
.pim-vc-pill.is-active:hover{ color:#fff; }

/* =====================================================================
 * Video Center — hero + featured video
 * =================================================================== */



.pim-vc-featured{ display:flex; flex-wrap:wrap; gap:32px; }
.pim-vc-featured__media{ display:block; flex:2 1 300px; min-width:min(300px,100%); text-decoration:none; }
.pim-vc-featured__thumb{
	position:relative; display:flex; align-items:center; justify-content:center;
	aspect-ratio:16/9; border-radius:16px; border:1px solid rgba(255,255,255,.12); overflow:hidden;
}
.pim-vc-featured__thumb img{ width:100%; height:100%; object-fit:cover; }
.pim-vc-featured__tag{ position:absolute; top:16px; left:16px; background:transparent; color:#A8B2D4; }
.pim-vc-featured__play{
	position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:999px;
	display:flex; align-items:center; justify-content:center; background:var(--pim-blue); color:#fff;
	box-shadow:0 12px 30px rgba(27,63,224,.5); pointer-events:none;
}
.pim-vc-featured__copy{ flex:1 1 240px; min-width:min(240px,100%); align-self:center; }
.pim-vc-featured__kicker{ display:block; font:600 11px/1 var(--pim-font-mono); letter-spacing:.08em; color:#9FB4FF; text-transform:uppercase; }
.pim-vc-featured__title{ margin:12px 0 0; font-weight:800; font-size:24px; line-height:1.25; color:#fff; letter-spacing:-.01em; }
.pim-vc-featured__desc{ margin:10px 0 0; font-size:15px; line-height:1.6; color:#A8B2D4; }

/* =====================================================================
 * Video Center — sticky filter/search bar
 * =================================================================== */
.pim-vc-filterbar{ position:sticky; top:70px; z-index:20; background:#fff; border-bottom:1px solid #F0F2F8; }
.pim-vc-filterbar__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px var(--pim-gutter); }
.pim-vc-search{ display:flex; align-items:center; gap:10px; border:1px solid var(--pim-border-2); border-radius:11px; padding:9px 14px; min-width:min(200px,100%); background:transparent; }
.pim-vc-search svg{ flex:none; color:#9298AE; }
.pim-vc-search input{ flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:14.5px; color:var(--pim-text); }

/* =====================================================================
 * Video Center — grid + card anatomy
 * =================================================================== */
.pim-vc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }

.pim-video-card{ display:block; text-decoration:none; }
.pim-video-card__thumb{
	position:relative; display:flex; align-items:center; justify-content:center;
	aspect-ratio:16/9; border-radius:14px; border:1px solid var(--pim-border); overflow:hidden;
}
.pim-video-card__play{
	position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:999px;
	display:flex; align-items:center; justify-content:center; background:rgba(27,63,224,.92); color:#fff;
	transition:transform .18s ease, background-color .18s ease;
}
.pim-video-card:hover .pim-video-card__play{ transform:scale(1.06); background:var(--pim-blue); }
.pim-video-card__duration{
	position:absolute; right:10px; bottom:10px; background:rgba(12,19,49,.8); color:#fff;
	font:600 11px/1 var(--pim-font-mono); padding:5px 8px; border-radius:6px;
}
.pim-video-card__title{ display:block; margin-top:14px; font-weight:700; font-size:16.5px; line-height:1.35; color:var(--pim-text); }
.pim-video-card__cat{ display:block; margin-top:6px; font-size:13.5px; color:#7C86A8; }
.pim-video-card:hover .pim-video-card__title{ color:var(--pim-blue); }
.pim-video-card--sample{ cursor:default; }
.pim-video-card--sample:hover .pim-video-card__play{ transform:none; background:rgba(27,63,224,.92); }
.pim-video-card--sample:hover .pim-video-card__title{ color:var(--pim-text); }

.pim-vc-grid[aria-busy="true"]{ opacity:.5; pointer-events:none; }

.pim-vc-empty{ margin:32px 0 0; padding:32px; text-align:center; border:1px dashed var(--pim-border-strong); border-radius:14px; color:var(--pim-text-muted); font-size:15px; }

/* =====================================================================
 * Media Gallery — hero
 * =================================================================== */



.pim-mg-pills{ display:flex; flex-wrap:wrap; gap:10px; }

/* =====================================================================
 * Media Gallery — masonry grid + tiles
 * =================================================================== */
.pim-mg-grid{ column-count:3; column-gap:16px; }
@media (max-width:900px){ .pim-mg-grid{ column-count:2; } }
@media (max-width:560px){ .pim-mg-grid{ column-count:1; } }
.pim-mg-grid[aria-busy="true"]{ opacity:.5; pointer-events:none; }

.pim-gallery-tile{
	position:relative; display:flex; align-items:flex-end; break-inside:avoid; margin-bottom:16px;
	border-radius:14px; border:1px solid var(--pim-border); overflow:hidden; text-decoration:none;
	background:#fff; transition:transform .18s ease, box-shadow .18s ease;
}
.pim-gallery-tile:hover{ transform:translateY(-3px); box-shadow:var(--pim-shadow-md); }
.pim-gallery-tile--sample{ cursor:default; }
.pim-gallery-tile--sample:hover{ transform:none; box-shadow:none; }
.pim-gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pim-gallery-tile__placeholder{ position:absolute; inset:0; width:100%; height:100%; }
.pim-gallery-tile__tag{
	position:relative; z-index:1; margin:0 0 10px 10px; display:inline-block;
	font:600 10px/1 var(--pim-font-mono); color:#7C86A8; background:#fff;
	border:1px dashed #C3CBE6; border-radius:6px; padding:5px 8px;
}

.pim-mg-empty{ margin:0; padding:32px; text-align:center; border:1px dashed var(--pim-border-strong); border-radius:14px; color:var(--pim-text-muted); font-size:15px; }

/* =====================================================================
 * Lightbox modal (Media Gallery only, markup rendered once in the template)
 * =================================================================== */
.pim-lightbox{
	display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center;
	background:rgba(7,12,38,.92); padding:40px;
}
.pim-lightbox.is-open{ display:flex; }
.pim-lightbox img{
	max-width:min(1100px,90vw); max-height:85vh; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5);
	object-fit:contain;
}
.pim-lightbox__close,
.pim-lightbox__nav{
	position:absolute; display:flex; align-items:center; justify-content:center; cursor:pointer;
	background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
	border-radius:999px; transition:background-color .16s ease;
}
.pim-lightbox__close:hover,
.pim-lightbox__nav:hover{ background:rgba(255,255,255,.18); }
.pim-lightbox__close{ top:24px; right:24px; width:44px; height:44px; font-size:24px; line-height:1; }
.pim-lightbox__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px; line-height:1; }
.pim-lightbox__nav--prev{ left:24px; }
.pim-lightbox__nav--next{ right:24px; }

body.pim-modal-locked{ overflow:hidden; }

@media (max-width:640px){
	.pim-lightbox{ padding:16px; }
	.pim-lightbox__nav{ width:44px; height:44px; font-size:24px; }
	.pim-lightbox__close{ top:12px; right:12px; }
	.pim-lightbox__nav--prev{ left:12px; }
	.pim-lightbox__nav--next{ right:12px; }
}