/* ==========================================================================
   Shared: FAQ — template-parts/sections/faq.php
   Figma: Home "Section - VehicleFleetPricing" 519:32495, FAQ 519:50889, FAQ Tablet 519:50912, FAQ Mobile 519:44819
   ========================================================================== */
.faq { background: #fff; }
.faq .container { display: flex; flex-direction: column; gap: 50px; }

.faq__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq__head .eyebrow { justify-content: center; }
.faq__title { margin-top: 12px; line-height: 48px; }
.faq__lead {
	margin-top: 38px; max-width: 760px;
	font-family: var(--ff-text); font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: -.3px; color: var(--c-blue-60);
}

.faq__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.faq--aside .faq__body { grid-template-columns: 440px minmax(0, 1fr); }

/* Blue contact card */
.faq-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
	min-height: 515px; padding: 28px;
	border-radius: 4px; background: var(--c-blue); color: #fff;
}
.faq-card__squares { position: absolute; top: -4.7px; right: -3px; width: 96px; height: 97px; object-fit: cover; opacity: .15; pointer-events: none; }
.faq-card__main { position: relative; display: flex; flex-direction: column; gap: 20px; }
.faq-card__title { padding-bottom: 16px; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: -1px; color: #fff; }
.faq-card__text { font-family: var(--ff-text); font-weight: 300; font-size: 16px; line-height: 24px; color: var(--c-on-dark); }
.faq-card__contacts { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.faq-card__contacts li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; }
.faq-card__label { font-weight: 500; font-size: 12px; line-height: 14px; letter-spacing: .5px; color: var(--c-on-dark); }
.faq-card__value { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 17px; line-height: 24px; color: #fff; transition: color .2s; overflow-wrap: anywhere; }
.faq-card__value .tk-icon { width: 14px; height: 14px; flex: none; color: var(--c-orange); }
.faq-card__value:hover { color: var(--c-orange); }
.faq-card__foot { position: relative; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .12); }
.faq-card__foot .btn { min-height: 48px; }

/* Accordion panel */
.faq__panel { padding: 28.8px; background: #fff; border: .8px solid var(--c-bg-soft); border-radius: 2px; }
.faq__list { display: flex; flex-direction: column; gap: 18px; }
.faq-item__q { margin: 0; font: inherit; }
.faq-item__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; padding: 0 0 12.8px; text-align: left;
	border-bottom: .8px solid rgba(49, 43, 182, .12);
	font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: -1px; color: var(--c-blue);
	transition: color .2s;
}
.faq-item__trigger:hover { color: var(--c-orange); }
.faq-item__icon {
	position: relative; flex: none; width: 24px; height: 24px;
}
.faq-item__icon::before { /* circle */
	content: ""; position: absolute; inset: 1.2px; border-radius: 50%;
	background: rgba(255, 116, 37, .2);
	transition: background-color .3s var(--ease-out);
}
.faq-item__icon::after { /* plus: horizontal bar + vertical bar via box-shadow-free gradient */
	content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
	transform: translate(-50%, -50%);
	background:
		linear-gradient(currentColor, currentColor) center / 10px 1.25px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.25px 10px no-repeat;
	color: var(--c-orange);
	transition: transform .35s var(--ease-out), color .3s;
}
.faq-item.is-open .faq-item__icon::before { background: rgba(49, 43, 182, .12); }
.faq-item.is-open .faq-item__icon::after {
	color: var(--c-blue);
	background: linear-gradient(currentColor, currentColor) center / 10px 1.25px no-repeat;
	transform: translate(-50%, -50%) rotate(180deg);
}
.faq-item__panel { overflow: hidden; transition: height .35s var(--ease-out); }
.js .faq-item:not(.is-open) > .faq-item__panel { height: 0; }
.faq-item__a { padding-top: 14px; max-width: 657px; }
.faq-item__a, .faq-item__a p { font-family: var(--ff-text); font-weight: 300; font-size: 14px; line-height: 19.5px; color: rgba(49, 43, 182, .7); }
.faq-item__a p + p { margin-top: 8px; }
.faq-item__a a { color: var(--c-orange); text-decoration: underline; }

/* ---------- Tablet: accordion first, card below ---------- */
@media (max-width: 1199px) {
	.faq .container { gap: 40px; }
	.faq__title { line-height: 44px; }
	.faq__lead { margin-top: 32px; }
	.faq--aside .faq__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.faq__panel { order: 1; }
	.faq-card { order: 2; min-height: 0; }
	.faq-card__main { gap: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.faq .container { gap: 32px; }
	.faq__title { font-size: 30px; line-height: 32px; letter-spacing: -1.2px; }
	.faq__lead { margin-top: 20px; }
	.faq__panel { padding: 20px 16px; }
	.faq__list { gap: 16px; }
	.faq-item__trigger { letter-spacing: -.6px; }
	.faq-card { padding: 24px 20px; }
}