/* Trailview Kleis Widgets. Colours follow the Trailview design guide; most can be changed in each widget's Style tab. */

.tvk {
	--tvk-card-bg: #fff;
	--tvk-radius: 16px;
	--tvk-date: #660011;
	--tvk-title: #2B2523;
	--tvk-muted: #6B6563;
	--tvk-rule: #A6A09E;
	--tvk-a1: #F5B746;
	--tvk-a2: #660011;
	--tvk-a3: #A6A09E;
	--tvk-gap: 24px;
	--tvk-cols: 4;
	--tvk-card-w: 260px;
	--tvk-btn: #660011;
	--tvk-btn-hover: #3D0009;
	--tvk-focus: #1F5FCC;
	--tvk-media-w: 45%;
}
.tvk *,
.tvk *::before,
.tvk *::after { box-sizing: border-box; }
.tvk :focus-visible { outline: 3px solid var(--tvk-focus); outline-offset: 2px; }

/* ---------- Editor notes ---------- */
.tvk-editor-note,
.tvk-calendar-placeholder {
	padding: 16px 20px;
	border: 2px dashed var(--tvk-rule, #A6A09E);
	border-radius: 8px;
	color: #6B6563;
	font-size: 15px;
	background: #F0EFEC;
	margin-top: 8px;
}
.tvk-calendar-placeholder { display: flex; flex-direction: column; gap: 4px; }
.tvk-calendar-placeholder strong { color: var(--tvk-date); }

/* ---------- Strip and grid ---------- */
.tvk-layout--grid .wp-block-kleis-events-template,
.tvk-layout--grid .tvk-scroller {
	display: grid;
	grid-template-columns: repeat(var(--tvk-cols), minmax(0, 1fr));
	gap: var(--tvk-gap);
}
.tvk-layout--strip .wp-block-kleis-events-template,
.tvk-layout--strip .tvk-scroller {
	display: flex;
	gap: var(--tvk-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	padding: 4px 4px 16px;
	margin: 0 -4px;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--tvk-rule) transparent;
	-webkit-overflow-scrolling: touch;
}
.tvk-layout--strip .wp-block-kleis-events-template > *,
.tvk-layout--strip .tvk-scroller > * {
	flex: 0 0 var(--tvk-card-w);
	max-width: 100%;
	scroll-snap-align: start;
}
.tvk-natural-height .wp-block-kleis-events-template,
.tvk-natural-height .tvk-scroller { align-items: start; }

.tvk-nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.tvk .tvk-nav__btn {
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tvk-btn); color: #fff; cursor: pointer;
}
.tvk .tvk-nav__btn:hover { background: var(--tvk-btn-hover); }
.tvk .tvk-nav__btn[disabled] { opacity: .35; cursor: default; background: var(--tvk-btn); }
.tvk .tvk-nav__btn svg { width: 20px; height: 20px; }
.tvk-no-overflow .tvk-nav { display: none; }

/* ---------- Cards (shared) ---------- */
.tvk .tvk-day,
.tvk .tvk-card,
.tvk .tvk-sermon {
	margin: 0;
	background: var(--tvk-card-bg);
	border-radius: var(--tvk-radius);
	box-shadow: 0 2px 12px rgba(43, 37, 35, .10);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.tvk-flat .tvk-day,
.tvk-flat .tvk-card,
.tvk-flat .tvk-sermon { box-shadow: none; border: 1px solid #E2DFDB; }
.tvk-accent .tvk-day,
.tvk-accent .tvk-card,
.tvk-accent .tvk-sermon { border-top: 4px solid var(--tvk-a1); }
.tvk-accent .wp-block-kleis-events-template > :nth-child(3n+2),
.tvk-accent .tvk-scroller > :nth-child(3n+2) { border-top-color: var(--tvk-a2); }
.tvk-accent .wp-block-kleis-events-template > :nth-child(3n+3),
.tvk-accent .tvk-scroller > :nth-child(3n+3) { border-top-color: var(--tvk-a3); }
.tvk .tvk-day > *,
.tvk .tvk-card > *,
.tvk .tvk-card__body > *,
.tvk .tvk-row > * { margin: 0 !important; }

/* Date tile: big day number beside weekday and month */
.tvk .tvk-date {
	display: grid !important;
	grid-template-columns: auto 1fr;
	gap: 2px 12px !important;
	align-items: center;
}
.tvk .tvk-date > * { margin: 0 !important; line-height: 1.3; }
.tvk .tvk-date .wp-block-kleis-event-day { grid-row: 1 / 3; grid-column: 1; font-size: 34px; font-weight: 600; line-height: 1 !important; color: var(--tvk-date); }
.tvk .tvk-date .wp-block-kleis-event-day.is-range { font-size: 26px; }
.tvk .tvk-date .wp-block-kleis-event-weekday { grid-row: 1; grid-column: 2; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tvk-date); }
.tvk .tvk-date .wp-block-kleis-event-month-year { grid-row: 2; grid-column: 2; font-size: 15px; color: var(--tvk-muted); }

/* Day schedule (every event that day) */
.tvk .wp-block-kleis-event-day-schedule { display: flex; flex-direction: column; gap: 12px; }
.tvk .kleis-event-day-schedule__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--tvk-title); }
.tvk .kleis-event-day-schedule__title a { color: var(--tvk-title); text-decoration: none; }
.tvk .kleis-event-day-schedule__title a:hover { text-decoration: underline; }
.tvk .kleis-event-day-schedule__time { font-size: 15px; color: var(--tvk-muted); }

/* Day cards */
.tvk .tvk-day { padding: 24px; gap: 16px; }
.tvk .tvk-day .tvk-date { padding-bottom: 16px; border-bottom: 1px solid var(--tvk-rule); }

/* Event cards */
.tvk .tvk-card .wp-block-kleis-event-image,
.tvk .tvk-card .wp-block-kleis-event-image a { display: block; }
.tvk .tvk-card .wp-block-kleis-event-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.tvk .tvk-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tvk .tvk-card .tvk-date { margin-bottom: 8px !important; }
.tvk .wp-block-kleis-event-title { font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--tvk-title); }
.tvk .wp-block-kleis-event-title a { color: var(--tvk-title); text-decoration: none; }
.tvk .wp-block-kleis-event-title a:hover { text-decoration: underline; }
.tvk .wp-block-kleis-event-time { font-size: 16px; color: var(--tvk-muted); }
.tvk .wp-block-kleis-event-registration-url { margin-top: auto !important; padding-top: 8px; }
.tvk .wp-block-kleis-event-registration-url a {
	display: inline-block; background: var(--tvk-btn); color: #fff; font-size: 16px; font-weight: 600;
	line-height: 1.2; padding: 14px 24px; border-radius: 8px; text-decoration: none;
}
.tvk .wp-block-kleis-event-registration-url a:hover { background: var(--tvk-btn-hover); color: #fff; }

/* Day-by-day list */
.tvk-layout--list .wp-block-kleis-events-template { display: block; }
.tvk .tvk-row {
	display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 8px 32px;
	padding: 20px 0; border-bottom: 1px solid var(--tvk-rule); align-items: start;
}
.tvk .tvk-row:first-child { border-top: 1px solid var(--tvk-rule); }
.tvk .tvk-row .wp-block-kleis-event-day-schedule { gap: 10px; }
.tvk .tvk-row .kleis-event-day-schedule__event { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.tvk .tvk-row .kleis-event-day-schedule__time { order: -1; min-width: 150px; }
@media (max-width: 767px) {
	.tvk .tvk-row { grid-template-columns: 1fr; gap: 12px; }
	.tvk .tvk-row .kleis-event-day-schedule__event { flex-direction: column; gap: 2px; }
	.tvk .tvk-row .kleis-event-day-schedule__time { order: 0; min-width: 0; }
}

/* Empty state */
.tvk .tvk-empty { display: none; margin: 0; color: var(--tvk-muted); }
.tvk-is-empty .tvk-empty { display: block; }
.tvk-is-empty .tvk-events__body,
.tvk-is-empty .tvk-nav { display: none; }
.tvk-hide-empty.tvk-is-empty { display: none; }
.elementor-editor-active .tvk-hide-empty.tvk-is-empty,
.elementor-editor-preview .tvk-hide-empty.tvk-is-empty { display: block; opacity: .7; }

/* ---------- Sermon list ---------- */
.tvk .tvk-sermon__art { display: block; }
.tvk .tvk-sermon__art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.tvk .tvk-sermon__body { padding: 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tvk .tvk-sermon__body > * { margin: 0; }
.tvk .tvk-sermon__title { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; color: var(--tvk-title); }
.tvk a.tvk-sermon__link { color: var(--tvk-title); text-decoration: none; }
.tvk a.tvk-sermon__link:hover { text-decoration: underline; }
.tvk .tvk-sermon__meta { font-size: 15px; color: var(--tvk-muted); margin: 0; }
.tvk a.tvk-sermon__term { color: var(--tvk-muted); text-decoration: underline; text-underline-offset: 3px; }
.tvk a.tvk-sermon__term:hover { color: var(--tvk-date); }
.tvk .tvk-sermon__excerpt { font-size: 16px; color: var(--tvk-title); margin-top: 6px; }

/* ---------- Latest sermon ---------- */
.tvk-latest { display: flex; gap: 48px; align-items: center; }
.tvk-latest--right { flex-direction: row-reverse; }
.tvk-latest--top { flex-direction: column; align-items: stretch; gap: 32px; }
.tvk-latest__media { flex: 0 0 var(--tvk-media-w); min-width: 0; }
.tvk-latest--top .tvk-latest__media { flex-basis: auto; }
.tvk .tvk-latest__art { display: block; border-radius: var(--tvk-radius); overflow: hidden; }
.tvk .tvk-latest__art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.tvk-latest__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tvk .tvk-latest__content > * { margin: 0; }
.tvk .tvk-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tvk-date); }
.tvk .tvk-latest__heading { font-size: 34px; font-weight: 600; line-height: 1.2; color: var(--tvk-title); }
.tvk .tvk-latest__intro { font-size: 18px; color: var(--tvk-title); }
.tvk .tvk-latest__line { font-size: 15px; color: var(--tvk-muted); }
.tvk .tvk-latest__line strong { color: var(--tvk-title); font-weight: 600; }
.tvk a.tvk-latest__link { color: var(--tvk-focus); text-decoration: underline; text-underline-offset: 3px; }
.tvk .tvk-latest__desc { font-size: 16px; color: var(--tvk-title); }
.tvk .tvk-buttons { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 8px; }
.tvk a.tvk-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
	padding: 14px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 1.2;
	text-decoration: none; border: 2px solid var(--tvk-btn);
}
.tvk a.tvk-btn--primary { background: var(--tvk-btn); color: #fff; }
.tvk a.tvk-btn--primary:hover { background: var(--tvk-btn-hover); border-color: var(--tvk-btn-hover); color: #fff; }
.tvk a.tvk-btn--secondary { background: transparent; color: var(--tvk-btn); }
.tvk a.tvk-btn--secondary:hover { background: #F0EFEC; color: var(--tvk-btn-hover); border-color: var(--tvk-btn-hover); }
@media (max-width: 767px) {
	.tvk-latest, .tvk-latest--right { flex-direction: column; align-items: stretch; gap: 24px; }
	.tvk-latest__media { flex-basis: auto; }
	.tvk .tvk-latest__heading { font-size: 28px; }
}

/* ---------- Calendar ---------- */
.tvk-calendar .fc-header-toolbar { flex-wrap: wrap; gap: 12px; }
.tvk-calendar--fixed .fc-dayGridMonth-button,
.tvk-calendar--fixed .fc-listWeek-button { display: none !important; }
.tvk-calendar .fc-daygrid-dot-event { flex-wrap: wrap; align-items: flex-start; }
.tvk-calendar .fc-daygrid-event .fc-event-title,
.tvk-calendar .fc-daygrid-event .fc-event-time { white-space: normal; overflow: visible; }
.tvk-calendar .fc-view-harness:has(> .fc-list) { height: auto !important; padding-bottom: 0 !important; }
.tvk-calendar .fc-view-harness > .fc-list { position: static; }
.tvk-calendar .fc-list .fc-scroller { height: auto !important; overflow: visible !important; }
.tvk-calendar .fc-list-event-title { overflow-wrap: anywhere; }
@media (max-width: 767px) {
	.tvk-calendar .fc-list-table { width: 100%; }
	.tvk-calendar .fc-list-event-time { width: 38%; white-space: normal; }
	.tvk-calendar .fc-list-event-graphic { padding-left: 6px; padding-right: 6px; }
	.tvk-calendar .fc-list-day-cushion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
}