/* =========================================================
   FA Luxury Transport — Services ([fa_services] shortcode)
   Reuses color/font/container tokens from header-footer.css
   ========================================================= */

.fa-services,
.fa-services * {
	box-sizing: border-box;
}

/* This shortcode is dropped into normal page content — break out to the
   full viewport width the same way [fa_fleet] does (see fleet.css for the
   full explanation); services.js measures the real offset at runtime and
   overrides this calc() fallback. */
.fa-services {
	width: 100%;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: none;
}

.fa-services__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
}

/* Section rhythm for the standalone grid (the Services landing page) only —
   not the list layout, which is embedded inside the homepage's own
   "What We Offer" section and already sits inside that section's padding.
   Giving both variants the same vertical padding would double it up on the
   homepage. Matches the 80/60/48 rhythm used by .fa-car-single__amenities
   etc. in car-single.css. */
.fa-services--grid,
.fa-services--featured {
	padding: 80px 0;
}

/* -----------------------------------------------------------
   Shared heading (optional — only rendered when eyebrow/title/
   subtitle atts are passed to the shortcode)
   ----------------------------------------------------------- */

.fa-services__heading {
	max-width: 640px;
	margin: 0 0 48px;
}

.fa-services__eyebrow {
	margin: 0 0 12px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.fa-services__title {
	margin: 0 0 16px;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.25;
}

.fa-services__subtitle {
	margin: 0;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 16px;
	line-height: 1.6;
}

/* -----------------------------------------------------------
   Grid layout (Services landing page)
   ----------------------------------------------------------- */

.fa-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.fa-services__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	transition: border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		transform var(--fa-dur-base) var(--fa-ease-out-quart),
		box-shadow var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services__card:hover {
	border-color: rgba(161, 124, 43, 0.4);
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* The title is the card's only link; its ::after stretches over the whole
   card so the entire card is still one click target while a screen reader
   hears just the service name. The card (position: relative, above) is the
   containing block, so nothing between the link and the card may be
   positioned.

   !important: Astra's ".ast-single-post .entry-content a" rule (applied to
   every singular Page, not just blog posts, despite the class name) sets
   text-decoration and link color at higher specificity than a single class
   selector can win without it. Same fix, same reasoning, as the
   full-bleed !important block in testimonial.css. Also applies to
   .fa-services__row further below. */
.fa-services__card-title-link {
	color: inherit !important;
	text-decoration: none !important;
}

.fa-services__card-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The focus ring is drawn on the stretched ::after, so it wraps the whole
   card instead of only the title text. */
.fa-services__card-title-link:focus {
	outline: none;
}

.fa-services__card-title-link:focus-visible::after {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

/* Entrance: cards fade+rise in with a stagger as the grid scrolls into
   view, matching .fa-fleet__card in fleet.css. Scoped behind .is-enhanced
   so a visitor without JS simply sees every card immediately. */
@keyframes fa-services-card-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

.fa-services.is-enhanced .fa-services__card {
	opacity: 0;
}

/* opacity: 1 is set on the item itself and the animation uses `backwards`
   rather than `both`. With `both` the finished animation keeps overriding
   the card's transform, which silently disabled the :hover lift once a card
   had revealed. */
.fa-services.is-enhanced .fa-services__card.is-visible {
	opacity: 1;
	animation: fa-services-card-in var(--fa-dur-slow) var(--fa-ease-out-quart) backwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

.fa-services__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 377 / 221;
	background: var(--fa-bg-dark);
}

.fa-services__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--fa-dur-slow) var(--fa-ease-out-quart);
}

.fa-services__card:hover .fa-services__image {
	transform: scale(1.06);
}

/* Circular medallion, not a square chip — a deliberate, restrained echo of
   the brand's own ring-bordered crest logo (see the header/footer mark),
   so the one icon on every card ties back to the brand rather than reading
   as a generic UI chip. The double ring (border + box-shadow) is the same
   crest device at a smaller scale. */
.fa-services__icon-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(11, 11, 13, 0.8);
	border: 1px solid var(--fa-gold);
	box-shadow: 0 0 0 3px rgba(161, 124, 43, 0.18);
}

.fa-services__icon-badge .fa-icon {
	width: 20px;
	height: 20px;
	color: var(--fa-gold);
}

.fa-services__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.fa-services__card-eyebrow {
	margin: 0 0 8px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.fa-services__card-title {
	margin: 0 0 12px;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
}

.fa-services__card-excerpt {
	margin: 0 0 auto;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	line-height: 1.6;
}

.fa-services__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--fa-border);
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fa-services__card-cta-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services__card:hover .fa-services__card-cta-icon {
	transform: translateX(3px);
}

/* -----------------------------------------------------------
   List layout (homepage "What We Offer" replacement)
   ----------------------------------------------------------- */

.fa-services__list {
	display: flex;
	flex-direction: column;
}

.fa-services__row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--fa-border);
	text-decoration: none !important;
	transition: padding-left var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services__row:first-child {
	border-top: 1px solid var(--fa-border);
}

.fa-services__row:hover {
	padding-left: 12px;
}

.fa-services__row:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-services.is-enhanced .fa-services__row {
	opacity: 0;
}

.fa-services.is-enhanced .fa-services__row.is-visible {
	opacity: 1;
	animation: fa-services-card-in var(--fa-dur-slow) var(--fa-ease-out-quart) backwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

.fa-services__row-number {
	flex-shrink: 0;
	color: var(--fa-gold);
	font-family: var(--fa-font-serif);
	font-size: 20px;
	font-weight: 500;
	width: 48px;
}

.fa-services__row-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fa-services__row-title {
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 22px;
	font-weight: 500;
}

.fa-services__row-desc {
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	line-height: 1.6;
}

.fa-services__row-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--fa-gold);
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services__row:hover .fa-services__row-icon {
	transform: translateX(4px);
}

/* -----------------------------------------------------------
   Featured layout (homepage "What We Offer"): one large card beside
   a stack of compact rows. Any number of services works: the stack
   simply grows or is absent.
   ----------------------------------------------------------- */

.fa-services__featured-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

.fa-services__card--featured .fa-services__body {
	padding: 32px;
}

.fa-services__card--featured .fa-services__card-title {
	font-size: 30px;
}

.fa-services__card--featured .fa-services__card-excerpt {
	margin-bottom: 0;
	font-size: 16px;
}

/* Two-class selectors below: Astra's ".entry-content ul" (class + element)
   would otherwise beat a single class and bring back its list bullets and
   left margin. */
.fa-services .fa-services__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 auto;
	padding: 0;
	list-style: none;
}

.fa-services .fa-services__chip {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	line-height: 1.4;
}

.fa-services__compact {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 16px;
}

.fa-services__card--compact {
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 16px 20px 16px 16px;
}

.fa-services__card--compact:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.fa-services__media--thumb {
	flex: 0 0 120px;
	width: 120px;
	aspect-ratio: 4 / 3;
}

.fa-services__card--compact .fa-services__body {
	padding: 0;
}

.fa-services__card--compact .fa-services__card-title {
	margin: 0 0 6px;
	font-size: 20px;
}

.fa-services__card--compact .fa-services__card-excerpt {
	margin: 0;
}

.fa-services__compact-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--fa-gold);
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services__card--compact:hover .fa-services__compact-icon {
	transform: translateX(4px);
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */

@media (max-width: 1279px) {
	.fa-services--grid,
	.fa-services--featured {
		padding: 60px 0;
	}

	.fa-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.fa-services__featured-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fa-services__compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.fa-services--grid,
	.fa-services--featured {
		padding: 48px 0;
	}

	.fa-services__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fa-services__body,
	.fa-services__card--featured .fa-services__body {
		padding: 24px;
	}

	.fa-services__card--featured .fa-services__card-title {
		font-size: 26px;
	}

	.fa-services__compact {
		grid-template-columns: 1fr;
	}

	.fa-services__card--compact {
		gap: 16px;
		padding: 14px 16px 14px 14px;
	}

	.fa-services__media--thumb {
		flex-basis: 96px;
		width: 96px;
	}

	.fa-services__card--compact .fa-services__body {
		padding: 0;
	}

	.fa-services__row {
		gap: 16px;
	}

	.fa-services__row-title {
		font-size: 18px;
	}
}

/* -----------------------------------------------------------
   Closing CTA band ([fa_services_cta] shortcode) — the Services
   landing page's equivalent of the Fleet page's hand-built Spectra
   CTA band ("Not Sure Which to Choose?"), built here in PHP/CSS
   instead so it stays in version control and can't be lost to a
   Spectra block edit. Same visual language as
   .fa-car-single__cta / .fa-service-single__cta.
   ----------------------------------------------------------- */

.fa-services-cta {
	width: 100%;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: none;
	background: var(--fa-black);
	padding: 80px 0;
}

.fa-services-cta__inner {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
	text-align: center;
}

.fa-services-cta__eyebrow {
	margin: 0 0 12px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.fa-services-cta__title {
	margin: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.3;
}

.fa-services-cta__title em {
	color: var(--fa-gold);
}

.fa-services-cta__subtitle {
	margin: 20px 0 0;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 15px;
	line-height: 1.6;
}

.fa-services-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.fa-services-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none !important;
	transition: background var(--fa-dur-base) var(--fa-ease-out-quart),
		color var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-services-cta__btn:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-services-cta__btn--solid {
	background: var(--fa-gold);
	color: var(--fa-black);
}

.fa-services-cta__btn--solid:hover {
	background: #8f6c24;
}

/* Black text/icon, not white — white-on-#25d366 measures 1.98:1 (a live
   Lighthouse audit flagged the identical combination on
   .fa-service-single__btn--whatsapp and the sitewide .fa-whatsapp-fab),
   well under the 4.5:1 WCAG AA minimum. Black on this green measures
   roughly 10.6:1. */
.fa-services-cta__btn--whatsapp {
	background: #25d366;
	color: var(--fa-black);
}

.fa-services-cta__btn--whatsapp:hover {
	background: #1ebe57;
}

@media (max-width: 1279px) {
	.fa-services-cta {
		padding: 60px 0;
	}

	.fa-services-cta__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.fa-services-cta {
		padding: 48px 0;
	}

	.fa-services-cta__title {
		font-size: 24px;
	}

	.fa-services-cta__actions {
		flex-direction: column;
	}
}