/* ============================================================
   Pillar Tabs for Elementor
   Sizing runs off CSS variables so the Elementor Style tab can
   override everything without fighting specificity.
   ============================================================ */

.pt-tabs{
	--pt-rail-w: 280px;
	--pt-rail-pad: 26px;
	--pt-gap: 34px;
	--pt-tab-gap: 4px;
	--pt-col-gap: 36px;
	--pt-fade: 260ms;
	--pt-divider-c: #E5E7EB;
	--pt-divider-w: 1px;
	--pt-coltitle-line: #E5E7EB;
	--pt-row-line: #E9EBEF;

	display: flex;
	align-items: stretch;
	gap: var(--pt-gap);
}

.pt-tabs *,
.pt-tabs *::before,
.pt-tabs *::after{ box-sizing: border-box; }

/* ---------------- rail ---------------- */
.pt-rail{
	flex: 0 0 var(--pt-rail-w);
	width: var(--pt-rail-w);
	max-width: 100%;
	padding-right: var(--pt-rail-pad);
	border-right: var(--pt-divider-w) solid var(--pt-divider-c);
}
.pt--no-divider .pt-rail{ border-right: 0; }

.pt-rail__eyebrow{
	margin: 0 0 22px;
	padding-left: 18px;
	color: #8B94A3;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.pt-rail__list{
	display: flex;
	flex-direction: column;
	gap: var(--pt-tab-gap);
}

/* ---------------- tab button ---------------- */
.pt-tab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	border: 0;
	border-radius: 10px;
	background-color: transparent;
	color: #0F172A;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .18s ease, color .18s ease;
}

.pt-tab:hover{
	background-color: #EAF2FE;
	color: #1A73E8;
}
.pt-tab.is-active{
	background-color: #EAF2FE;
	color: #1A73E8;
}
.pt-tab:focus{ outline: none; }
.pt-tab:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pt-tab__label{
	color: inherit;
	text-decoration: none;
}
a.pt-tab__label:hover{ color: inherit; }
a.pt-tab__label:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Arrow only shows on the tab the pointer is actually on, which is
   why the default open tab sits flat until you touch the rail. */
.pt-tab__arrow{
	display: inline-flex;
	align-items: center;
	flex: none;
	color: #1A73E8;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease;
}
.pt-tab__arrow svg{
	width: 16px;
	height: 16px;
	display: block;
}
.pt-tab:hover .pt-tab__arrow,
.pt-tab:focus-visible .pt-tab__arrow{
	opacity: 1;
	transform: none;
}
.pt--no-arrow .pt-tab__arrow{ display: none; }

/* ---------------- panels ---------------- */
.pt-panels{
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	align-content: start;
}

/* Every panel shares one grid cell, so the block is as tall as the
   tallest tab and nothing shifts when you switch. */
.pt-panel{
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--pt-fade) ease, visibility 0s linear var(--pt-fade);
}
.pt-panel.is-active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--pt-fade) ease, visibility 0s;
}
.pt-panel[hidden]{ display: block; }

/* Fit-each-tab mode: only the open panel takes up space. */
.pt--fluid .pt-panels{ display: block; }
.pt--fluid .pt-panel{ display: none; }
.pt--fluid .pt-panel.is-active{
	display: block;
	animation: pt-fade-in var(--pt-fade) ease both;
}
@keyframes pt-fade-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* ---------------- panel head ---------------- */
.pt-panel__head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.pt-panel__title{
	margin: 0;
	color: #111827;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
}

.pt-panel__all{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: #1A73E8;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease;
}
.pt-panel__all-arrow{
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	margin-left: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: none !important;
	transform: none !important;
}
.pt-panel__all:hover .pt-panel__all-arrow{ transform: none !important; }

/* Optional CTA shown after the left tab labels. It intentionally reuses
   pt-panel__all so the existing View All style controls apply to it. */
.pt-rail__all-wrap{ margin: 14px 18px 0; }
.pt-rail__all{ width: max-content; max-width: 100%; }

/* ---------------- columns ---------------- */
.pt-cols{
	display: grid;
	grid-template-columns: repeat(var(--pt-cols, 3), minmax(0, 1fr));
	gap: var(--pt-col-gap);
}

.pt-col{ min-width: 0; }

.pt-col__title{
	margin: 0 0 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pt-coltitle-line);
	color: #8B94A3;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.pt-col__list{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-col__row{
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--pt-row-line);
}
.pt--no-last-line .pt-col__row:last-child{ border-bottom: 0; }

.pt-col__item{
	display: block;
	padding: 9px 0;
	color: #374151;
	font-size: 14.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .16s ease;
}
a.pt-col__item:hover{ color: #1A73E8; }

/* ============================================================
   STACKED LAYOUT
   Rail moves above the panel and becomes a scrolling row.
   ============================================================ */
@media (max-width: 1024px){
	.pt--stack-tablet{ flex-direction: column; gap: 24px; }

	.pt--stack-tablet .pt-rail{
		flex: 0 0 auto;
		width: 100%;
		padding-right: 0;
		padding-bottom: 16px;
		border-right: 0;
		border-bottom: var(--pt-divider-w) solid var(--pt-divider-c);
	}
	.pt--stack-tablet.pt--no-divider .pt-rail{ border-bottom: 0; }

	.pt--stack-tablet .pt-rail__eyebrow{ padding-left: 0; margin-bottom: 14px; }

	.pt--stack-tablet .pt-rail__list{
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pt--stack-tablet .pt-rail__list::-webkit-scrollbar{ display: none; }

	.pt--stack-tablet .pt-tab{
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.pt--stack-tablet .pt-tab__arrow{ display: none; }
	.pt--stack-tablet .pt-rail__all-wrap{ margin-left: 0; margin-right: 0; }

	.pt--stack-tablet .pt-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px){
	.pt--stack-mobile{ flex-direction: column; gap: 24px; }

	.pt--stack-mobile .pt-rail{
		flex: 0 0 auto;
		width: 100%;
		padding-right: 0;
		padding-bottom: 16px;
		border-right: 0;
		border-bottom: var(--pt-divider-w) solid var(--pt-divider-c);
	}
	.pt--stack-mobile.pt--no-divider .pt-rail{ border-bottom: 0; }

	.pt--stack-mobile .pt-rail__eyebrow{ padding-left: 0; margin-bottom: 14px; }

	.pt--stack-mobile .pt-rail__list{
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pt--stack-mobile .pt-rail__list::-webkit-scrollbar{ display: none; }

	.pt--stack-mobile .pt-tab{
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.pt--stack-mobile .pt-tab__arrow{ display: none; }
	.pt--stack-mobile .pt-rail__all-wrap{ margin-left: 0; margin-right: 0; }

	.pt--stack-tablet .pt-cols,
	.pt--stack-mobile .pt-cols{ grid-template-columns: minmax(0, 1fr); }

	.pt-panel__head{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ---------------- accessibility ---------------- */
@media (prefers-reduced-motion: reduce){
	.pt-tab,
	.pt-tab__arrow,
	.pt-panel,
	.pt-col__item,
	.pt-panel__all-arrow{
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}
