/* =========================================================================
   Video Gallery — styles
   Theme: calm clinical palette to match an orthopedic practice site.
   Drop this file at: /wp-content/themes/your-theme/assets/video-gallery.css
   ========================================================================= */

:root {
	--vg-ink:        #1A2B3C;   /* deep navy - headings, primary text */
	--vg-ink-soft:   #5B6B7C;   /* muted slate - secondary text */
	--vg-accent:     #0E7C7B;   /* clinical teal - primary accent */
	--vg-accent-dark:#0A5F5E;
	--vg-bg:         #F6F8F8;   /* soft cool white - section bg */
	--vg-card-bg:    #FFFFFF;
	--vg-border:     #E3E8EA;
	--vg-radius:     12px;
	--vg-shadow:     0 4px 18px rgba(26, 43, 60, 0.08);
	--vg-shadow-hover: 0 10px 28px rgba(26, 43, 60, 0.14);
}

.video-gallery-page * {
	box-sizing: border-box;
}

.vg-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Hero ------------------------------------------------------------- */

.vg-hero {
	background: linear-gradient(135deg, var(--vg-ink) 0%, #213B4E 100%);
	padding: 64px 24px 56px;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Fallback: nudges the whole gallery body down so the hero title clears a
   sticky/fixed site header. Adjust 90px to match your theme's actual header
   height if the title is still tucked under the menu (inspect the header
   element in DevTools to find its exact height). */
.video-gallery-page {
	padding-top: 90px;
}

@media (max-width: 768px) {
	.video-gallery-page {
		padding-top: 70px;
	}
}

.vg-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.vg-hero__title {
	color: #fff;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}

.vg-hero__subtitle {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
}

/* ---- Gallery section ---------------------------------------------------*/

.vg-gallery-section {
	background: var(--vg-bg);
	padding: 56px 0 72px;
}

.vg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

@media (max-width: 980px) {
	.vg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.vg-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Card ---------------------------------------------------------------*/

.vg-card {
	display: flex;
	flex-direction: column;
	background: var(--vg-card-bg);
	border: 1px solid var(--vg-border);
	border-radius: var(--vg-radius);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	text-align: left;
	font-family: inherit;
	box-shadow: var(--vg-shadow);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	width: 100%;
}

.vg-card:hover,
.vg-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--vg-shadow-hover);
}

.vg-card:focus-visible {
	outline: 3px solid var(--vg-accent);
	outline-offset: 2px;
}

.vg-card__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0c1820;
	overflow: hidden;
}

.vg-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.vg-card:hover .vg-card__thumb img {
	transform: scale(1.04);
}

.vg-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 25, 35, 0.18);
	transition: background 0.22s ease;
}

.vg-card:hover .vg-card__play {
	background: rgba(15, 25, 35, 0.32);
}

.vg-card__play svg {
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
	transition: transform 0.22s ease;
}

.vg-card:hover .vg-card__play svg {
	transform: scale(1.08);
}

.vg-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.vg-card__title {
	color: var(--vg-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vg-card__date {
	color: var(--vg-ink-soft);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ---- Load more ---------------------------------------------------------*/

.vg-loadmore-wrap {
	text-align: center;
	margin-top: 40px;
}

.vg-loadmore-btn {
	background: #fff;
	border: 1.5px solid var(--vg-accent);
	color: var(--vg-accent-dark);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 12px 30px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.vg-loadmore-btn:hover {
	background: var(--vg-accent);
	color: #fff;
}

/* ---- Empty state ---------------------------------------------------------*/

.vg-empty {
	text-align: center;
	padding: 48px 20px;
	color: var(--vg-ink-soft);
	font-size: 1.05rem;
}

.vg-empty a {
	color: var(--vg-accent-dark);
	font-weight: 600;
	text-decoration: underline;
}

/* ---- Subscribe CTA -------------------------------------------------------*/

.vg-subscribe-cta {
	text-align: center;
	margin-top: 48px;
}

.vg-subscribe-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #CC1F1A;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 13px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.vg-subscribe-btn:hover {
	background: #A8120E;
	transform: translateY(-2px);
	color: #fff;
}

/* ---- Modal / Lightbox ----------------------------------------------------*/

.vg-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.vg-modal.is-open {
	display: flex;
}

.vg-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 16, 22, 0.88);
}

.vg-modal__content {
	position: relative;
	width: 100%;
	max-width: 960px;
	z-index: 1;
}

.vg-modal__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.vg-modal__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vg-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
}

.vg-modal__close:hover {
	color: var(--vg-accent);
}

@media (max-width: 600px) {
	.vg-modal__close {
		top: -40px;
		right: 0;
		font-size: 1.9rem;
	}
}

/* ---- Page content (Gutenberg content below gallery, if any) ------------ */

.vg-page-content {
	padding: 32px 0 0;
}

/* ---- Reduced motion ------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	.vg-card,
	.vg-card__thumb img,
	.vg-card__play,
	.vg-card__play svg,
	.vg-loadmore-btn,
	.vg-subscribe-btn {
		transition: none !important;
	}
	.vg-card:hover {
		transform: none;
	}
}