/* Fletcher Tabs - structural base.
   Visual styling is emitted per-instance from the module settings; this
   file only provides safe fallbacks so the tabs work even before the
   instance CSS applies. Intentionally unopinionated on colour. */

.fletcher-tabs { width: 100%; }

.fletcher-tabs__nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 40px;
}

.fletcher-tabs__tab {
	cursor: pointer;
	font: inherit;
	border-radius: 50px;
	padding: 18px;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #f5f5f5;
	color: inherit;
	transition: all .25s ease;
	font-weight: 600;
}

.fletcher-tabs__panel { display: none; }
.fletcher-tabs__panel.is-active { display: block; }

.fletcher-tabs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

@media (max-width: 767px) {
	.fletcher-tabs__grid { grid-template-columns: 1fr; }
}