/**
 * lgbt/recent-sermons — sermons GROUPED BY SERVICE DATE. Each date is one
 * light-outlined card; inside, each service (AM/PM) is a row with linked
 * medium pills. Colours = theme.json tokens (no hardcoded palette).
 */

.lgbt-hb-recent { margin: 0 0 var(--wp--preset--spacing--50); }
.lgbt-hb-recent__title { margin: 0 0 var(--wp--preset--spacing--20); }

.lgbt-hb-recent__days {
	display: grid;
	grid-template-columns: 1fr;   /* ONE column — the service-date cards stack as 4 rows (Jason: 4 rows × 1 column) */
	gap: var(--wp--preset--spacing--30);
}

/* one light-outlined card per SERVICE DATE */
.lgbt-hb-recent__daycard {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border-cream, #e0d8c4);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 6px;
	container-type: inline-size;   /* rows adapt to the CARD width (narrow in the 4-up grid) */
}
.lgbt-hb-recent__dayhead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta, #5b6270);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border-cream, #e0d8c4);
}

.lgbt-hb-recent__rows { list-style: none; margin: 0; padding: 0; }
.lgbt-hb-recent__row {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
}
.lgbt-hb-recent__row + .lgbt-hb-recent__row {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--border-cream, #e0d8c4) 60%, transparent);
}

/* The AM / PM chip leads each row (its look: .lgbt-svc-mark--chip in the theme). */
.lgbt-hb-recent__row > .lgbt-svc-mark { flex: 0 0 auto; margin-top: 3px; }

.lgbt-hb-recent__body { flex: 1 1 auto; min-width: 0; }
.lgbt-hb-recent__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
	color: var(--wp--custom--link--title);
	text-decoration: none;
}
.lgbt-hb-recent__name:hover,
.lgbt-hb-recent__name:focus-visible { color: var(--wp--custom--link--hover); }
.lgbt-hb-recent__desc {
	margin: 3px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2, #3d4655);
}

/* linked medium pills → the sermon's individual page */
.lgbt-hb-recent__media {
	flex: 0 0 auto;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.lgbt-hb-recent__tag {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	padding: 5px var(--wp--preset--spacing--20);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	background: color-mix(in srgb, var(--wp--preset--color--gold, #bd8f34) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold, #bd8f34) 34%, transparent);
	transition: background .15s ease, color .15s ease;
}
.lgbt-hb-recent__tag:hover,
.lgbt-hb-recent__tag:focus-visible {
	background: var(--wp--preset--color--gold, #bd8f34);
	color: var(--wp--preset--color--white);
}

/* The church's notes on service dates (D-178, the home page: "No Service: Snow
   Storm", "Special Service"). Not a link, so no hover. A date with only notes is
   a quiet card that differs from a sermon card in more than colour: a cream
   (recessed) surface instead of white, the note in the body font at regular
   weight instead of the bold serif title, no medium pills, and the note's own
   words say what it is. A note on a date that also has a sermon is a row of the
   same look inside that date's card.
   Measured contrast (WCAG 2): note contrast-2 #3d4655 on cream #f7f3ea 8.60:1,
   on white 9.52:1; date meta #5b6270 on cream 5.53:1 (on white 6.13:1, as on a
   sermon card); the AM / PM chip keeps its own white-on-fill colours. */
.lgbt-hb-recent__daycard--notice {
	background: var(--wp--preset--color--cream, #f7f3ea);
}
.lgbt-hb-recent__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-2, #3d4655);
}

/* Narrow cards (the 4-up desktop grid, or a phone): wrap the medium pills below. */
@container (max-width: 340px) {
	.lgbt-hb-recent__row { flex-wrap: wrap; }
	.lgbt-hb-recent__media { flex-basis: 100%; margin-left: var(--wp--preset--spacing--50); margin-top: 2px; }
}