/* ==========================================================================
   TBC Sermons — module styles

   Colour and type are read from the Elementor kit's own custom properties, so
   Site Settings stays the single source of truth: retune a token there and
   these blocks follow. Every var carries the tbc-website value as a fallback,
   so the module still renders correctly if the kit stylesheet is ever missing.

   The kit defines its properties on the `.elementor-kit-<id>` body class, which
   every element on the page inherits from.
   ========================================================================== */
.tbc-sermons {
	--tbc-s-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--tbc-s-shadow: 0 18px 40px -28px rgba(20, 51, 15, 0.5);
	--tbc-s-hatch: repeating-linear-gradient(135deg, rgba(20, 51, 15, 0.07) 0 1px, transparent 1px 9px);
}

.tbc-sermons *,
.tbc-sermons *::before,
.tbc-sermons *::after {
	box-sizing: border-box;
}

/* Astra underlines links inside content. Every link here is a card, a title or
   a button, and none of them want a rule under them. */
.tbc-sermons a {
	text-decoration: none;
}

/* --- Heading row --------------------------------------------------------- */
.tbc-sermons .tbc-sermons-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 26px;
}
.tbc-sermons .tbc-sermons-head__title {
	margin: 0;
	font-family: var(--e-global-typography-tbch32-font-family, "EB Garamond"), serif;
	font-size: var(--e-global-typography-tbch32-font-size, 32px);
	font-weight: var(--e-global-typography-tbch32-font-weight, 500);
	line-height: var(--e-global-typography-tbch32-line-height, 1.15em);
	color: var(--e-global-color-primary, #14330F);
}
.tbc-sermons .tbc-sermons-head__date {
	margin: 0;
	font-family: var(--e-global-typography-tbcchp-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcchp-font-size, 11px);
	font-weight: var(--e-global-typography-tbcchp-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcchp-letter-spacing, 1.54px);
	line-height: var(--e-global-typography-tbcchp-line-height, 1.4em);
	text-transform: uppercase;
	color: var(--e-global-color-tbcinkm, #6C7266);
}

/* --- Sermon cards -------------------------------------------------------- */
.tbc-sermons .tbc-sermons-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 26px;
}

/* The whole card lifts, and the graphic inside it stays still — the same
   treatment the built page gives these cards, and shallower than the ministry
   cards elsewhere on the site. */
.tbc-sermons .tbc-sermon-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--e-global-color-tbccard, #FFFFFF);
	border: 1px solid var(--e-global-color-tbcrule, rgba(20, 51, 15, 0.14));
	transition: transform 200ms var(--tbc-s-ease), box-shadow 200ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-sermon-card:hover,
.tbc-sermons .tbc-sermon-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--tbc-s-shadow);
}

/* The graphic is a 9:16 poster shown in a 2:3 window, anchored to the top:
   at 3:4 the crop cuts through the scripture reference on the poster. */
.tbc-sermons .tbc-sermon-card__media {
	display: block;
	line-height: 0;
}
.tbc-sermons .tbc-sermon-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: 50% 0;
}

/* Shown when a record has no graphic yet — keeps the row even rather than
   letting one card collapse to its text. */
.tbc-sermons .tbc-sermon-card__well {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	background-color: var(--e-global-color-tbcwell, #E7E4DA);
	background-image: var(--tbc-s-hatch);
}

.tbc-sermons .tbc-sermon-card__well span {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--e-global-color-tbcinkm, #6C7266);
}
.tbc-sermons .tbc-sermon-card__body {
	padding: 22px 24px 26px;
}
.tbc-sermons .tbc-sermon-card__service {
	margin: 0 0 10px;
	font-family: var(--e-global-typography-tbclbl-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbclbl-font-size, 11px);
	font-weight: var(--e-global-typography-tbclbl-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbclbl-letter-spacing, 2.4px);
	line-height: var(--e-global-typography-tbclbl-line-height, 1.4em);
	text-transform: uppercase;
	color: var(--e-global-color-tbcg600, #4A7A38);
}

/* The card title is the kit's h3. Elementor exposes custom tokens as variables
   but not the theme-style headings, so this one carries its own values. */
.tbc-sermons .tbc-sermon-card__title {
	margin: 0 0 8px;
	font-family: "EB Garamond", serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--e-global-color-primary, #14330F);
}
.tbc-sermons .tbc-sermon-card__preacher {
	margin: 0 0 18px;
	font-family: var(--e-global-typography-tbcmeta-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcmeta-font-size, 14px);
	font-weight: var(--e-global-typography-tbcmeta-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcmeta-letter-spacing, 0.6px);
	line-height: var(--e-global-typography-tbcmeta-line-height, 1.5em);
	color: var(--e-global-color-tbcinkm, #6C7266);
}
.tbc-sermons .tbc-sermon-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tbc-sermons .tbc-sermon-btn {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--e-global-color-tbcrulm, rgba(20, 51, 15, 0.22));
	border-radius: 2px;
	background: var(--e-global-color-tbcpapr, #F4F2EC);
	color: var(--e-global-color-primary, #14330F);
	font-family: var(--e-global-typography-tbcchp-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcchp-font-size, 11px);
	font-weight: var(--e-global-typography-tbcchp-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcchp-letter-spacing, 1.54px);
	line-height: var(--e-global-typography-tbcchp-line-height, 1.4em);
	text-transform: uppercase;
	transition: background 180ms var(--tbc-s-ease), color 180ms var(--tbc-s-ease), border-color 180ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-sermon-btn:hover,
.tbc-sermons .tbc-sermon-btn:focus {
	background: var(--e-global-color-primary, #14330F);
	border-color: var(--e-global-color-primary, #14330F);
	color: var(--e-global-color-tbcpapr, #F4F2EC);
}

/* --- Series rows ---------------------------------------------------------
   These sit on the dark band, so their colours are the on-dark set: cream
   titles, mid green for the reference and the preacher, faint green for meta.
   ---------------------------------------------------------------------- */
.tbc-sermons .tbc-series-row {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 44px;
	padding: 34px 0;
	border-top: 1px solid var(--e-global-color-tbcruld, rgba(237, 239, 231, 0.16));
}
.tbc-sermons .tbc-series__title {
	margin: 0 0 8px;
	font-family: var(--e-global-typography-tbch30-font-family, "EB Garamond"), serif;
	font-size: var(--e-global-typography-tbch30-font-size, 30px);
	font-weight: var(--e-global-typography-tbch30-font-weight, 500);
	line-height: var(--e-global-typography-tbch30-line-height, 1.15em);
	color: var(--e-global-color-tbccrem, #EDEFE7);
}
.tbc-sermons .tbc-series__preacher {
	margin: 0 0 6px;
	font-family: var(--e-global-typography-tbcser-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcser-font-size, 14px);
	font-weight: var(--e-global-typography-tbcser-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcser-letter-spacing, 1.12px);
	line-height: var(--e-global-typography-tbcser-line-height, 1.4em);
	color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-series__count {
	margin: 0;
	font-family: var(--e-global-typography-tbcplce-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcplce-font-size, 13px);
	font-weight: var(--e-global-typography-tbcplce-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcplce-letter-spacing, 0.78px);
	line-height: var(--e-global-typography-tbcplce-line-height, 1.4em);
	color: var(--e-global-color-tbcinkf, #7E8C74);
}
.tbc-sermons .tbc-series-row__messages {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 20px;
}
.tbc-sermons .tbc-message {
	padding-left: 16px;
	border-left: 1px solid var(--e-global-color-tbcruld, rgba(237, 239, 231, 0.16));
	transition: border-color 180ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-message:hover,
.tbc-sermons .tbc-message:focus-within {
	border-left-color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-message__title {
	margin: 0 0 6px;
	font-family: var(--e-global-typography-tbcmsg-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcmsg-font-size, 15px);
	font-weight: var(--e-global-typography-tbcmsg-font-weight, 400);
	line-height: var(--e-global-typography-tbcmsg-line-height, 1.35em);
	color: var(--e-global-color-tbccrem, #EDEFE7);
}

/* The underline is painted by the ancestor <a>, so clearing it on the inner
   span does nothing — it has to be cleared on the link itself. */
.tbc-sermons .tbc-message__title a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-message__title a:hover,
.tbc-sermons .tbc-message__title a:focus {
	color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-message__ref {
	margin: 0 0 8px;
	font-family: var(--e-global-typography-tbcrefi-font-family, "EB Garamond"), serif;
	font-size: var(--e-global-typography-tbcrefi-font-size, 15px);
	font-weight: var(--e-global-typography-tbcrefi-font-weight, 400);
	font-style: italic;
	line-height: var(--e-global-typography-tbcrefi-line-height, 1.35em);
	color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-message__date {
	margin: 0;
	font-family: var(--e-global-typography-tbcmini-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcmini-font-size, 12px);
	font-weight: var(--e-global-typography-tbcmini-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcmini-letter-spacing, 0.96px);
	line-height: var(--e-global-typography-tbcmini-line-height, 1.4em);
	color: var(--e-global-color-tbcinkf, #7E8C74);
}

/* Editors only — visitors get an HTML comment instead. */
.tbc-sermons .tbc-sermons-note {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed var(--e-global-color-tbcrulm, rgba(20, 51, 15, 0.22));
	background: var(--e-global-color-tbcwash, rgba(20, 51, 15, 0.06));
	font-family: var(--e-global-typography-tbcmeta-font-family, "Jost"), sans-serif;
	font-size: 14px;
	color: var(--e-global-color-tbcinkm, #6C7266);
}

/* --- Home: poster cards on the dark band ---------------------------------
   No card surface here. The frame warms and the poster eases in behind it on
   hover — the same treatment framed media gets elsewhere on the site — and
   there is no button, because the poster itself is the link.
   ---------------------------------------------------------------------- */
.tbc-sermons--poster .tbc-sermons-grid {
	gap: 40px 28px;
}
.tbc-sermons .tbc-poster-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The band's own heading row, on the dark ground: cream title at the kit's h2
   size, and the "all sermons" link in accent caps to its right. */
.tbc-sermons--poster .tbc-sermons-head {
	align-items: flex-end;
	margin: 0 0 44px;
}

.tbc-sermons.tbc-sermons--poster .tbc-sermons-head__title {
	font-family: "EB Garamond", serif;
	font-size: 44px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.2px;
	color: var(--e-global-color-tbccrem, #EDEFE7);
}

.tbc-sermons .tbc-sermons-head__link {
	font-family: var(--e-global-typography-accent-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 13px);
	font-weight: var(--e-global-typography-accent-font-weight, 400);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, 2.1px);
	text-transform: uppercase;
	color: var(--e-global-color-tbcg400, #9DBE85);
	transition: color 180ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-sermons-head__link:hover,
.tbc-sermons .tbc-sermons-head__link:focus {
	color: var(--e-global-color-accent, #CFE3B8);
}

/* On the light Sermons page the same link takes the ink colours. */
.tbc-sermons.tbc-sermons--card .tbc-sermons-head__link {
	color: var(--e-global-color-tbcg600, #4A7A38);
}
/* The service line carries the hour and the service name, so it reads at the
   bar size (13px) rather than the small label size — at 11px it sat alone above
   the poster looking like a stray caption. */
.tbc-sermons .tbc-poster-card__label {
	margin: 0;
	font-family: var(--e-global-typography-tbcbar-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcbar-font-size, 13px);
	font-weight: var(--e-global-typography-tbcbar-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcbar-letter-spacing, 1.8px);
	line-height: var(--e-global-typography-tbcbar-line-height, 1.4em);
	text-transform: uppercase;
	color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-poster-card__media {
	display: block;
	line-height: 0;
	overflow: hidden;
	border: 1px solid var(--e-global-color-tbcruld, rgba(237, 239, 231, 0.16));
	transition: border-color 200ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-poster-card__media:hover,
.tbc-sermons .tbc-poster-card__media:focus-visible {
	border-color: var(--e-global-color-tbcg400, #9DBE85);
}
.tbc-sermons .tbc-poster-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 300ms var(--tbc-s-ease);
}

.tbc-sermons .tbc-poster-card__media:hover .tbc-poster-card__img,
.tbc-sermons .tbc-poster-card__media:focus-visible .tbc-poster-card__img {
	transform: scale(1.03);
}
.tbc-sermons .tbc-poster-card__well {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	line-height: normal;
	background-color: var(--e-global-color-tbcwshd, rgba(237, 239, 231, 0.05));
	background-image: repeating-linear-gradient(135deg, rgba(237, 239, 231, 0.06) 0 1px, transparent 1px 9px);
}

.tbc-sermons .tbc-poster-card__well span {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--e-global-color-tbcinkf, #7E8C74);
}
.tbc-sermons .tbc-poster-card__title {
	margin: 0;
	font-family: var(--e-global-typography-tbcstat-font-family, "EB Garamond"), serif;
	font-size: var(--e-global-typography-tbcstat-font-size, 26px);
	font-weight: var(--e-global-typography-tbcstat-font-weight, 500);
	line-height: var(--e-global-typography-tbcstat-line-height, 1.2em);
	color: var(--e-global-color-tbccrem, #EDEFE7);
}
.tbc-sermons .tbc-poster-card__meta {
	margin: 0;
	font-family: var(--e-global-typography-tbcmeta-font-family, "Jost"), sans-serif;
	font-size: var(--e-global-typography-tbcmeta-font-size, 14px);
	font-weight: var(--e-global-typography-tbcmeta-font-weight, 400);
	letter-spacing: var(--e-global-typography-tbcmeta-letter-spacing, 0.6px);
	line-height: var(--e-global-typography-tbcmeta-line-height, 1.5em);
	color: var(--e-global-color-tbcmut, #A9B3A0);
}

/* --- Breakpoints ---------------------------------------------------------
   Matching the kit's own viewports: tablet below 1025px, mobile below 768px.
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tbc-sermons .tbc-sermons-grid {
		grid-template-columns: repeat(2, 1fr);
	}
.tbc-sermons .tbc-series-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
.tbc-sermons .tbc-series-row__messages {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.tbc-sermons .tbc-sermons-grid {
		grid-template-columns: 1fr;
	}
.tbc-sermons .tbc-series-row {
		padding: 28px 0;
	}
.tbc-sermons .tbc-series-row__messages {
		grid-template-columns: 1fr;
	}
.tbc-sermons .tbc-sermon-card__title {
		font-size: 22px;
	}
}

/* The band heading follows the kit's own h2 steps down the breakpoints. */
@media (max-width: 1024px) {
	.tbc-sermons.tbc-sermons--poster .tbc-sermons-head__title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.tbc-sermons.tbc-sermons--poster .tbc-sermons-head__title {
		font-size: 29px;
	}

	.tbc-sermons--poster .tbc-sermons-head {
		margin-bottom: 32px;
	}
}