/**
 * GV YouTube — front-end styles.
 *
 * Self-contained and namespaced (gvyt-*). All colours/metrics are custom
 * properties on :root, so a theme can override any of them without touching
 * this file, e.g.:  :root { --gvyt-accent:#8b1e1e; --gvyt-radius:4px; }
 */
:root {
	--gvyt-white:      #ffffff;
	--gvyt-ink:        #1f2a2a;
	--gvyt-muted:      #7a8080; /* card date / secondary text */
	--gvyt-accent:     #476f6f; /* pills, play icon, links */
	--gvyt-rule:       #e2e6e6;
	--gvyt-muted-bg:   #f4f6f6;
	--gvyt-radius:     12px;
	--gvyt-pill:       999px;
	--gvyt-shadow:     0 4px 16px rgba(0, 0, 0, 0.08);
	--gvyt-live:       #ff5a5a; /* pulse dot */
	--gvyt-live-bar:   #b23b3b; /* live announcement bar */
	--gvyt-btn-bg:     #476f6f;
	--gvyt-btn-fg:     #ffffff;
}

/* ---------- Announcement bar ---------- */
.gvyt-announce {
	background: var(--gvyt-live-bar); color: var(--gvyt-white);
	text-align: center; padding: 0.7rem 1rem; font-size: 0.85rem; font-weight: 600;
	letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center;
	gap: 0.75rem; flex-wrap: wrap;
}
.gvyt-announce a { color: var(--gvyt-white); text-decoration: underline; font-weight: 700; }
.gvyt-announce__dot {
	width: 9px; height: 9px; border-radius: var(--gvyt-pill); background: var(--gvyt-white);
	display: inline-block;
}

/* ---------- Live button (template tag) ---------- */
.gvyt-live-btn {
	display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gvyt-btn-bg);
	color: var(--gvyt-btn-fg); text-transform: uppercase; font-weight: 700; font-size: 0.8rem;
	letter-spacing: 0.08em; padding: 0.6rem 1.35rem; border-radius: var(--gvyt-pill);
	text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.gvyt-live-btn:hover { color: var(--gvyt-btn-fg); transform: translateY(-2px); box-shadow: 0 6px 16px rgb(0 0 0 / 0.18); }
.gvyt-live-btn__dot {
	width: 9px; height: 9px; border-radius: var(--gvyt-pill); background: var(--gvyt-live);
	display: inline-block;
}

/* ---------- Pulse ---------- */
@keyframes gvyt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.6); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 90, 90, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); }
}
@media (prefers-reduced-motion: no-preference) {
	.gvyt-live-btn__dot,
	.gvyt-announce__dot { animation: gvyt-pulse 1.6s ease-out infinite; }
}

/* ---------- Generic button ---------- */
.gvyt-btn {
	display: inline-block; font: inherit; cursor: pointer; border: 0;
	background: var(--gvyt-btn-bg); color: var(--gvyt-btn-fg); text-decoration: none;
	font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
	padding: 0.7rem 1.6rem; border-radius: var(--gvyt-pill);
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.gvyt-btn:hover { color: var(--gvyt-btn-fg); transform: translateY(-2px); box-shadow: 0 6px 16px rgb(0 0 0 / 0.18); }

/* ---------- Sermon / video grid ---------- */
.gvyt-grid { display: grid; grid-template-columns: repeat(var(--gvyt-cols, 4), 1fr); gap: var(--gvyt-gap, 1.5rem); margin-top: 2rem; transition: opacity 0.2s ease; }
.gvyt-sermon { background: var(--gvyt-white); border-radius: var(--gvyt-radius); box-shadow: var(--gvyt-shadow); overflow: hidden; display: block; cursor: pointer; text-decoration: none; color: inherit; }
.gvyt-sermon:link,
.gvyt-sermon:visited,
.gvyt-sermon:hover,
.gvyt-sermon:focus { color: inherit; text-decoration: none; }
.gvyt-sermon__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--gvyt-muted-bg); }
.gvyt-sermon__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gvyt-sermon__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--gvyt-accent); }
.gvyt-sermon__play span {
	width: 54px; height: 54px; border-radius: var(--gvyt-pill); background: rgba(255, 255, 255, 0.85);
	display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease;
}
.gvyt-sermon:hover .gvyt-sermon__play span { transform: scale(1.08); background: rgba(255, 255, 255, 0.98); }
.gvyt-sermon__title { text-align: center; font-weight: 700; font-size: var(--gvyt-title-size, 0.875rem); color: var(--gvyt-ink); padding: 1rem 0.9rem 0.35rem; margin: 0; }
.gvyt-sermon__date { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gvyt-muted); margin: 0; padding: 0 0.9rem 1rem; }

/* ---------- Filters ---------- */
.gvyt-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 62rem; margin: 0 auto 1.5rem; }
.gvyt-filter-pill {
	font: inherit; cursor: pointer; border: 1px solid var(--gvyt-rule); background: var(--gvyt-white);
	color: var(--gvyt-accent); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.01em;
	padding: 0.5rem 1.25rem; min-width: 3.5rem; text-align: center; border-radius: var(--gvyt-pill);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gvyt-filter-pill:hover { border-color: var(--gvyt-accent); }
.gvyt-filter-pill.is-active { background: var(--gvyt-accent); color: var(--gvyt-white); border-color: var(--gvyt-accent); }
.gvyt-select-wrap { display: none; }
.gvyt-select {
	display: block; width: 100%; max-width: 26rem; margin: 0 auto 1.5rem;
	font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--gvyt-accent);
	padding: 0.65rem 1rem; border: 1px solid var(--gvyt-rule); border-radius: var(--gvyt-radius);
	background: var(--gvyt-white);
}

/* ---------- Load More ---------- */
.gvyt-loadmore-wrap { text-align: center; margin-top: 2.5rem; }

/* ---------- Empty state ---------- */
.gvyt-empty { max-width: 960px; margin: 0 auto; padding: 2.5rem; text-align: center; background: var(--gvyt-muted-bg); border: 1px solid var(--gvyt-rule); border-radius: var(--gvyt-radius); }
.gvyt-empty strong { display: block; color: var(--gvyt-ink); font-size: 1.1rem; margin-bottom: 0.5rem; }

/* ---------- Live page ---------- */
.gvyt-live-embed {
	position: relative; width: 100%; max-width: 960px; margin: 0 auto;
	aspect-ratio: 16 / 9; border-radius: var(--gvyt-radius); overflow: hidden;
	box-shadow: var(--gvyt-shadow); background: #000;
}
.gvyt-live-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gvyt-live-nowline { text-align: center; margin-top: 1.25rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gvyt-live-bar); }
.gvyt-live-offline {
	max-width: 720px; margin: 0 auto; padding: 3.5rem 2rem; text-align: center; border-radius: var(--gvyt-radius);
	background: var(--gvyt-muted-bg); border: 1px solid var(--gvyt-rule);
}
.gvyt-live-offline__badge {
	display: inline-block; text-transform: uppercase; font-weight: 700; font-size: 0.75rem;
	letter-spacing: 0.1em; color: #fff; background: #9aa0a0; padding: 0.35rem 0.9rem; border-radius: var(--gvyt-pill);
}
.gvyt-live-offline__title { margin: 1rem 0 0; }
.gvyt-live-offline__note { max-width: 46rem; margin: 1rem auto 0; }
.gvyt-live-offline__schedule { margin-top: 1.25rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gvyt-accent); }
.gvyt-live-offline .gvyt-btn { margin-top: 2rem; }

/* ---------- Video lightbox ---------- */
.gvyt-lightbox {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
	padding: 1.5rem; background: rgba(0, 0, 0, 0.88);
	opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
}
.gvyt-lightbox.is-open { opacity: 1; visibility: visible; }
.gvyt-lightbox__inner { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; }
.gvyt-lightbox__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--gvyt-radius); background: #000; }
.gvyt-lightbox__close {
	position: absolute; top: -2.75rem; right: 0; width: 40px; height: 40px;
	background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.gvyt-lightbox__close:hover { opacity: 0.8; }
.gvyt-noscroll { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.gvyt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.gvyt-grid { grid-template-columns: 1fr; }
	.gvyt-filters { display: none; }
	.gvyt-select-wrap { display: block; }
}