/* Brentwood Youtube List — livestream/recording list matching brentwood.ca /live.
   Stacked rows: media column (YouTube thumbnail + red play overlay) on the left,
   body column (title, date, watch link, recording note) on the right. The brand
   red comes from Kadence's global palette so it follows the customizer. */

.bw-yt { --bw-yt-red: var(--global-palette1, #cc0000); background: transparent; }
.bw-yt, .bw-yt * { box-sizing: border-box; }

/* ---- Header ------------------------------------------------------------- */
.bw-yt__header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 0 1rem;
	position: relative;
}
.bw-yt__heading {
	font-size: 1.875rem;
	font-weight: 300;
	line-height: 1.2;
	color: #4b5563;
	margin: 0;
}
/* Right column: brand icon, timezone switcher, then search — top to bottom. */
.bw-yt__header-right {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
}
/* Brand icon + timezone bar share one horizontal row, vertically centered. */
.bw-yt__brandrow {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.bw-yt__brand { color: var(--bw-yt-red); display: inline-flex; }
.bw-yt__brand svg { width: 2rem; height: 2rem; }

.bw-yt__search {
	display: flex;
	align-items: center;
	position: relative;
}
.bw-yt__search-icon {
	position: absolute;
	left: .6rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: #cbd5e1;
	pointer-events: none;
	z-index: 1;
}
.bw-yt__search-icon svg { width: 1rem; height: 1rem; display: block; }
/* High-specificity selector so the left padding (which clears the icon) wins
   over the theme's global input styling. */
.bw-yt .bw-yt__search input[type="search"] {
	width: 14rem;
	max-width: 38vw;
	box-sizing: border-box;
	padding: .4rem .6rem .4rem 2.2rem;
	border: 1px solid #e5e7eb;
	border-radius: .25rem;
	background: #fff;
	font: inherit;
	font-size: .9375rem;
	line-height: 1.4;
}

/* ---- Timezone switcher bar (filled by view.js; hidden without JS) ------- */
.bw-yt__tzbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem 1rem;
	margin: 0;
	font-size: .875rem;
	color: #4b5563;
}
.bw-yt__tzbar:empty { display: none; }
.bw-yt__tz-current { font-weight: 600; }
.bw-yt__tz-toggle {
	border: 1px solid #e5e7eb;
	background: #fff;
	border-radius: .25rem;
	padding: .3rem .7rem;
	font: inherit;
	font-size: .875rem;
	color: #374151;
	cursor: pointer;
}
.bw-yt__tz-toggle:hover { border-color: var(--bw-yt-red); color: var(--bw-yt-red); background: #fff; }

/* ---- List + rows -------------------------------------------------------- */
.bw-yt__list { transition: opacity .2s; }
.bw-yt.is-loading .bw-yt__list { opacity: .45; pointer-events: none; }
.bw-yt__empty { padding: 2rem 0; color: #6b7280; text-align: center; }

.bw-yt__item {
	display: flex;
	flex-direction: column;
	border-bottom: 2px solid #d1d5db;          /* rgb(209 213 219) */
	background-color: rgba(255, 255, 255, .5);  /* white @ 50% */
	transition: background-color .2s;
}
.bw-yt__item:hover { background-color: #fff; } /* full white on hover */
@media (min-width: 768px) {
	.bw-yt__item { flex-direction: row; align-items: stretch; }
}

/* Media column — flex-1 (≈1/3). 16:9 thumbnail, red YouTube play overlay. */
.bw-yt__media {
	position: relative;
	display: block;
	/* mobile (stacked): let width + aspect-ratio set the box height. A flex-basis
	   of 0 here would collapse the media to 0px tall (its <img> is absolutely
	   positioned and contributes no height), making the thumbnail disappear. */
	flex: 0 0 auto;
	overflow: hidden;
	text-decoration: none;
	/* mobile: a centered, narrower thumbnail like the live site */
	width: 60%;
	margin: .75rem auto;
	aspect-ratio: 2 / 1;
	border-radius: .25rem;
	background: #e5e7eb;
}
@media (min-width: 768px) {
	.bw-yt__media {
		flex: 0 0 33.3%;   /* fixed media width; body fills the rest */
		width: auto;
		margin: 0;
		min-height: 150px;
		border-radius: 0;
		/* red accent line on the inner edge, matching the live border-l-4 */
		border-right: 4px solid var(--bw-yt-red);
	}
}
.bw-yt__media img,
.bw-yt__noimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bw-yt__noimg { background: linear-gradient(135deg, #e5e7eb, #d1d5db); }

/* Play overlay: red YouTube glyph on a white notch, centered. */
.bw-yt__play {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.bw-yt__play-bg {
	position: absolute;
	width: 2rem;
	height: 1.4rem;
	background: #fff;
	border-radius: 2px;
}
.bw-yt__play-icon { position: relative; display: inline-flex; color: var(--bw-yt-red); }
.bw-yt__play-icon svg { width: 3rem; height: 3rem; }
@media (min-width: 768px) {
	.bw-yt__play-icon svg { width: 3.75rem; height: 3.75rem; }
}
.bw-yt__media:hover .bw-yt__play-icon { transform: scale(1.06); transition: transform .2s; }

/* Body column — flex-2 (≈2/3). */
.bw-yt__body {
	flex: 2 1 0;
	padding: 1rem 1rem 1.25rem;
}
@media (min-width: 768px) {
	/* larger left gap between the media column and the text, like the live site */
	.bw-yt__body { padding: 1rem 2rem 1rem 5rem; display: flex; flex-direction: column; justify-content: center; }
}
/* Title is an <h3> with no typographic overrides, so it inherits the
   customizer's Heading 3 styles (font, size, weight, colour, line-height). */
.bw-yt__title {
	margin: 0;
}
.bw-yt__date {
	display: flex;
	align-items: center;
	margin-top: .5rem;
	color: #374151;
	/* match the live site's body font (Open Sans) for the date text */
	font-family: "Open Sans Variable", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}
.bw-yt__date-icon { display: inline-flex; color: #6b7280; }
.bw-yt__date-icon svg { width: .9rem; height: 1rem; }
.bw-yt__date span:last-child { padding-left: .5rem; font-weight: 600; }

/* Watch link (left) + recording note (right) on one row. */
.bw-yt__actions { display: flex; align-items: center; margin-top: .5rem; gap: 1rem; }
.bw-yt__links { display: flex; align-items: center; flex-shrink: 0; }
.bw-yt__watch {
	display: inline-flex;
	align-items: center;
	color: var(--bw-yt-red);
	text-decoration: none;
	font-weight: 500;
}
.bw-yt__watch:hover { text-decoration: underline; }
.bw-yt__watch-icon { display: inline-flex; }
.bw-yt__watch-icon svg { width: 1.25rem; height: 1.25rem; }
.bw-yt__watch span:last-child { padding-left: .5rem; }

.bw-yt__note {
	flex: 1;
	font-style: italic;
	font-size: .875rem;
	font-weight: 600;
	color: #6b7280;
}

/* ---- Footer: count + paginator ----------------------------------------- */
.bw-yt__footer {
	display: flex;
	align-items: center;
	margin-top: 1rem;
	gap: 1rem;
}
.bw-yt__count { color: #4b5563; }
.bw-yt__count:empty { display: none; }
.bw-yt__pagination { flex: 1; display: flex; justify-content: center; }

.bw-yt__page {
	width: 2rem; height: 2rem;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 0; background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	cursor: pointer; font: inherit; font-size: .9375rem; color: #374151; padding: 0;
}
.bw-yt__page:hover { color: var(--bw-yt-red); background: #fff; }
.bw-yt__page.is-current { background: var(--bw-yt-red); color: #fff; cursor: default; }
.bw-yt__page svg { width: .55em; height: 1em; }
.bw-yt__page--prev, .bw-yt__page--next { background: var(--bw-yt-red); color: #fff; }
.bw-yt__page--prev { border-radius: .25rem 0 0 .25rem; }
.bw-yt__page--next { border-radius: 0 .25rem .25rem 0; }
.bw-yt__page--prev:hover, .bw-yt__page--next:hover { background: var(--bw-yt-red); color: #fff; opacity: .88; }
.bw-yt__page:disabled { opacity: .45; cursor: default; }

@media (max-width: 640px) {
	.bw-yt__media { width: 75%; }
	.bw-yt__footer { flex-direction: column; align-items: stretch; text-align: center; }
}
@media print {
	.bw-yt__search, .bw-yt__pagination, .bw-yt__brand { display: none !important; }
}