/* ARTWORK NOTES -----------
   St. James the Less — tab bar for the full calendar page
   (/parish-life/calendar, article 94). Ticket SOL-30599.
   Linked on Gantry outline 20 (Clarity - Site Grid) as the "Calendar Tabs" CSS row.
   Palette taken from the site's own variables (St. James green #3c653a).
--------------------------- */

.cal-tabs {
	--cal-tab-ink: #3c653a;
	--cal-tab-ink-strong: #ffffff;
	--cal-tab-surface: rgba(60, 101, 58, .08);
	--cal-tab-accent: #3c653a;
	--cal-tab-hairline: rgba(60, 101, 58, .35);
	--cal-tab-radius: 8px;
	width: 100%;
	margin: 0 0 min(1.5vw, 1.5rem);
}

.cal-tabs .cal-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: min(.6vw, .6rem);
	margin: 0 0 min(1.5vw, 1.5rem);
	padding: 0;
}

.cal-tabs .cal-tab {
	flex: 0 1 auto;
	padding: min(.6vw, .6rem) min(1.25vw, 1.25rem);
	border: 1px solid var(--cal-tab-hairline);
	border-radius: var(--cal-tab-radius);
	background: var(--cal-tab-surface);
	color: var(--cal-tab-ink);
	font-family: 'Open Sans', sans-serif;
	font-size: min(1vw, 1rem);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cal-tabs .cal-tab:hover,
.cal-tabs .cal-tab:focus,
.cal-tabs .cal-tab:focus-visible,
.cal-tabs .cal-tab.is-active {
	background: var(--cal-tab-accent);
	border-color: var(--cal-tab-accent);
	color: var(--cal-tab-ink-strong);
}

.cal-tabs .cal-frame {
	width: 100%;
}

.cal-tabs .cal-frame iframe {
	display: block;
	width: 100%;
	border: 1px solid #777;
}

@media screen and (max-width: 50.99rem) {
	.cal-tabs .cal-tablist {
		gap: .5rem;
	}

	.cal-tabs .cal-tab {
		flex: 1 1 45%;
		font-size: 1rem;
		text-align: center;
	}
}