/**
 * Portfolio Carousel — front-end styles.
 *
 * This renders as a MODULE, not a section: no background, no side padding and
 * no chrome unless the instance asks for it. Every tunable is a custom property
 * so the shortcode and the Beaver Builder module can override per instance.
 *
 * COLOURS ARE !important, deliberately. Beaver Builder's row/column "Text
 * Color" emits
 *   .fl-builder-content .fl-node-xxx *:not(input)...:not(.fl-menu-mobile-toggle)
 *     { color: inherit; }
 * and :not() carries the specificity of its argument, so that lone
 * :not(.fl-menu-mobile-toggle) makes the whole selector (0,3,10) — it beats any
 * sane selector here and forces every span, button and <p> in the module to
 * inherit. Backgrounds are untouched by it, which is why a pill could end up
 * black-on-black while its background obeyed the settings perfectly.
 * Customising still works the documented way: set the custom property, e.g.
 * `.pfc { --pfc-tag-ink: orange !important; }`.
 *
 * Selectors are deliberately over-specific. Themes and page builders ship rules
 * like `.fl-module ul li { display: list-item; width: auto; flex: 0 1 auto; }`
 * (specificity 0,1,2) which beat a lone `.pfc__slide` and collapse every card
 * to its content width. Scoping through `.pfc` keeps the layout intact.
 *
 * RESPONSIVE TIERS. Gap, side padding, card height and cards-per-view each have
 * three inline values — -desktop, -tablet, -mobile — and the property actually
 * used is resolved HERE, in the media queries below, never inline. An inline
 * custom property wins over a media query at computed-value time, so setting the
 * resolved property inline would freeze the desktop value on every screen size.
 * Breakpoints are 992px and 768px, matching Beaver Builder's own defaults.
 */

.pfc {
	--pfc-gap-desktop: 22px;
	--pfc-gap: var(--pfc-gap-desktop, 22px);
	--pfc-pad-x-desktop: 0px;
	--pfc-pad-x: var(--pfc-pad-x-desktop, 0px);
	--pfc-card-h-desktop: 460px;
	--pfc-card-h: var(--pfc-card-h-desktop, 460px);
	--pfc-per-desktop: 3.5;
	--pfc-per: var(--pfc-per-desktop, 3.5);

	--pfc-card-w: 360px;
	--pfc-card-max: none;
	--pfc-ratio: 3/4;
	--pfc-radius: 2px;
	--pfc-section-bg: transparent;

	--pfc-eyebrow: #2f7a52;
	--pfc-heading: #10201a;
	--pfc-intro: #4a5c53;
	--pfc-tag-bg: rgba(255, 255, 255, 0.9);
	--pfc-tag-ink: #0b2a1e;
	--pfc-title: #ffffff;
	--pfc-link: #a6f0bc;
	--pfc-link-rule: rgba(166, 240, 188, 0.5);
	--pfc-scrim: linear-gradient(0deg, rgba(6, 20, 13, 0.92) 0%, rgba(6, 20, 13, 0.15) 42%, rgba(6, 20, 13, 0) 62%);
	--pfc-hover: #6be08a;
	--pfc-placeholder: linear-gradient(135deg, #123c29 0%, #0b2a1e 100%);

	--pfc-arrow-bg: transparent;
	--pfc-arrow-ink: #10201a;
	--pfc-arrow-border: #cfc7ad;
	--pfc-arrow-hover-bg: #0b2a1e;
	--pfc-arrow-hover-ink: #a6f0bc;
	--pfc-arrow-size: 44px;
	--pfc-dot: #cfc7ad;
	--pfc-dot-active: #0b2a1e;
	--pfc-dot-w: 34px;
	--pfc-dot-h: 4px;

	--pfc-eyebrow-size: 12px;
	--pfc-heading-size: 34px;
	--pfc-intro-size: 15px;
	--pfc-title-size: 20px;
	--pfc-desc-size: 13px;
	--pfc-tag-size: 11px;
	--pfc-link-size: 12px;

	background: var(--pfc-section-bg, transparent);
	box-sizing: border-box;

	/*
	 * Side padding belongs HERE, not on the track, header and dots separately.
	 * On the track it is invisible anyway — mandatory scroll snapping pulls
	 * scrollLeft to the first slide's snap position, which equals the track's
	 * padding-left — so the cards sat flush while the arrows and dots stayed
	 * indented by it. One padded wrapper gives all three the same edges.
	 */
	padding: 0 var(--pfc-pad-x);
}

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

/* ---------- Reset theme leakage ---------- */

.pfc ul.pfc__track,
.pfc .pfc__track > .pfc__slide {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
	background: none;
	border: 0;
}

.pfc .pfc__track > .pfc__slide::before,
.pfc .pfc__track > .pfc__slide::marker {
	content: none;
}

.pfc .pfc__card,
.pfc .pfc__card * {
	float: none;
	text-align: left;
}

/*
 * Anything that sits on the card carries its own colour, stated as its own
 * element type for the extra specificity. These must NOT be left to inherit:
 * the pill sits on a light chip while the title sits on a dark scrim, so they
 * need opposite colours, and whichever one loses its own declaration becomes
 * invisible against its own background.
 */
.pfc .pfc__card span.pfc__tag {
	color: var(--pfc-tag-ink, #0b2a1e) !important;
}

.pfc .pfc__card span.pfc__name,
.pfc .pfc__card span.pfc__desc {
	color: var(--pfc-title, #ffffff) !important;
}

.pfc .pfc__card span.pfc__link {
	color: var(--pfc-link, #a6f0bc) !important;
}

/*
 * The card is usually an <a>, and themes colour content links. Anchoring the
 * card's own colour here means everything inside it inherits from US, not from
 * the theme's link colour, before the per-element rules below even run.
 */
.pfc .pfc__slide .pfc__card,
.pfc .pfc__slide a.pfc__card:link,
.pfc .pfc__slide a.pfc__card:visited,
.pfc .pfc__slide a.pfc__card:hover,
.pfc .pfc__slide a.pfc__card:focus {
	color: var(--pfc-title, #ffffff) !important;
	text-decoration: none;
}

/* ---------- Header ---------- */

.pfc .pfc__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}

.pfc .pfc__head-main {
	flex: 1 1 420px;
	min-width: 0;
}

.pfc .pfc__head .pfc__eyebrow {
	display: block;
	font-size: var(--pfc-eyebrow-size, 12px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pfc-eyebrow, #2f7a52) !important;
	margin: 0 0 14px;
}

.pfc .pfc__head .pfc__heading {
	margin: 0;
	font-size: var(--pfc-heading-size, 34px);
	line-height: 1.15;
	font-weight: 400;
	color: var(--pfc-heading, #10201a) !important;
	max-width: 20ch;
}

.pfc .pfc__head .pfc__intro {
	flex: 0 1 340px;
	margin: 0;
	font-size: var(--pfc-intro-size, 15px);
	line-height: 1.6;
	color: var(--pfc-intro, #4a5c53) !important;
}

/* ---------- Sector filters ---------- */

.pfc .pfc__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.pfc .pfc__filter {
	font-size: var(--pfc-tag-size, 11px);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	font-family: inherit;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid var(--pfc-arrow-border, #cfc7ad);
	background: transparent;
	color: var(--pfc-heading, #10201a) !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pfc .pfc__filter:hover {
	border-color: var(--pfc-arrow-hover-bg, #0b2a1e);
}

.pfc .pfc__filter[aria-pressed="true"] {
	background: var(--pfc-arrow-hover-bg, #0b2a1e);
	border-color: var(--pfc-arrow-hover-bg, #0b2a1e);
	color: var(--pfc-arrow-hover-ink, #a6f0bc) !important;
}

/* ---------- Arrows ---------- */

.pfc .pfc__nav {
	display: flex;
	gap: 10px;
	margin: 0 0 20px;
}

.pfc.pfc--arrows-right .pfc__nav {
	justify-content: flex-end;
}

.pfc.pfc--arrows-center .pfc__nav {
	justify-content: center;
}

.pfc.pfc--arrows-left .pfc__nav {
	justify-content: flex-start;
}

/* In the header row the arrows are one more flex item, not a row of their own. */
.pfc.pfc--arrows-at-header .pfc__head .pfc__nav {
	margin: 0;
	flex: 0 0 auto;
}

/*
 * The glyph is a <span> inside the button, so the button's own `color` only
 * reaches it by inheritance — which a theme rule on `.fl-module span`, or any
 * other descendant selector, outranks. Colouring the span directly settles it.
 */
.pfc .pfc__nav .pfc__arrow,
.pfc .pfc__nav .pfc__arrow > span {
	color: var(--pfc-arrow-ink, #10201a) !important;
}

.pfc .pfc__arrow {
	width: var(--pfc-arrow-size, 44px);
	height: var(--pfc-arrow-size, 44px);
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid var(--pfc-arrow-border, #cfc7ad);
	background: var(--pfc-arrow-bg, transparent);
	color: var(--pfc-arrow-ink, #10201a) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--pfc-arrow-size, 44px) * 0.41);
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pfc .pfc__nav .pfc__arrow:hover,
.pfc .pfc__nav .pfc__arrow:focus-visible,
.pfc .pfc__nav .pfc__arrow:hover > span,
.pfc .pfc__nav .pfc__arrow:focus-visible > span {
	color: var(--pfc-arrow-hover-ink, #a6f0bc) !important;
}

.pfc .pfc__arrow:hover,
.pfc .pfc__arrow:focus-visible {
	background: var(--pfc-arrow-hover-bg, #0b2a1e);
	border-color: var(--pfc-arrow-hover-bg, #0b2a1e);
}

.pfc .pfc__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.pfc .pfc__arrow[disabled]:hover {
	background: var(--pfc-arrow-bg, transparent);
	color: var(--pfc-arrow-ink, #10201a) !important;
	border-color: var(--pfc-arrow-border, #cfc7ad);
}

/* ---------- Viewport & track ---------- */

.pfc .pfc__viewport {
	position: relative;
}

/*
 * Overlaid arrows sit on the card edges. The nav itself must not swallow clicks
 * across the whole track, so only the buttons take pointer events back.
 */
.pfc.pfc--arrows-at-overlay .pfc__viewport .pfc__nav {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	pointer-events: none;
	z-index: 3;
}

.pfc.pfc--arrows-at-overlay .pfc__viewport .pfc__arrow {
	pointer-events: auto;
	background: var(--pfc-tag-bg, rgba(255, 255, 255, 0.9));
	color: var(--pfc-tag-ink, #0b2a1e) !important;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(10, 30, 20, 0.22);
}

.pfc.pfc--arrows-at-overlay .pfc__viewport .pfc__arrow:hover,
.pfc.pfc--arrows-at-overlay .pfc__viewport .pfc__arrow:focus-visible {
	background: var(--pfc-arrow-hover-bg, #0b2a1e);
	color: var(--pfc-arrow-hover-ink, #a6f0bc) !important;
}

.pfc .pfc__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0;
	gap: var(--pfc-gap);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pfc .pfc__track::-webkit-scrollbar {
	display: none;
}

.pfc .pfc__track:focus-visible {
	outline: 2px solid var(--pfc-hover, #6be08a);
	outline-offset: 2px;
}

/*
 * Drag to scroll. `grab` only where a mouse is actually driving: on touch the
 * native scroll already does this and a grab cursor means nothing.
 */
@media (hover: hover) and (pointer: fine) {
	.pfc.pfc--drag .pfc__track {
		cursor: grab;
	}

	.pfc.pfc--drag .pfc__track.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		scroll-behavior: auto;
	}

	/* A drag that ends on a card must not also follow its link. */
	.pfc.pfc--drag .pfc__track.is-dragging .pfc__card {
		pointer-events: none;
	}
}

.pfc .pfc__track > .pfc__slide {
	/* width, not flex-basis: a theme's `flex: 0 1 auto` on li cannot shrink it. */
	flex: 0 0 auto;
	/*
	 * Fallbacks live inside the calc() on purpose. An unresolved var() voids the
	 * whole declaration at computed-value time — no earlier `width` in the
	 * cascade can rescue it — and the card would drop to content width.
	 */
	width: calc((100% - (var(--pfc-per, 3.5) - 1) * var(--pfc-gap, 22px)) / var(--pfc-per, 3.5));
	max-width: var(--pfc-card-max, none);
	display: flex;
	scroll-snap-align: start;
}

/*
 * Filtered out. This rule is NOT optional: `.pfc .pfc__track > .pfc__slide`
 * sets display:flex at specificity 0,3,0 and beats the browser's own
 * `[hidden] { display: none }`, so a filtered slide would stay on screen.
 */
.pfc .pfc__track > .pfc__slide[hidden] {
	display: none;
}

/* Fixed sizing: every card the same literal width, like the reference design. */
.pfc.pfc--fixed .pfc__track > .pfc__slide {
	width: var(--pfc-card-w, 360px);
	max-width: 88vw;
}

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

@media (max-width: 992px) {
	.pfc {
		--pfc-per: var(--pfc-per-tablet, var(--pfc-per-desktop, 3.5));
		--pfc-gap: var(--pfc-gap-tablet, var(--pfc-gap-desktop, 22px));
		--pfc-card-h: var(--pfc-card-h-tablet, var(--pfc-card-h-desktop, 460px));
	}
}

@media (max-width: 768px) {
	.pfc {
		--pfc-per: var(--pfc-per-mobile, var(--pfc-per-tablet, var(--pfc-per-desktop, 3.5)));
		--pfc-gap: var(--pfc-gap-mobile, var(--pfc-gap-tablet, var(--pfc-gap-desktop, 22px)));
		--pfc-pad-x: var(--pfc-pad-x-mobile, var(--pfc-pad-x-desktop, 0px));
		--pfc-card-h: var(--pfc-card-h-mobile, var(--pfc-card-h-tablet, var(--pfc-card-h-desktop, 460px)));
	}

	/*
	 * Stack on mobile: one card per row, no horizontal scroll at all. The loop
	 * clones have to go with it — a stacked grid would print the deck three
	 * times — and every control is meaningless once nothing scrolls.
	 */
	.pfc.pfc--stack .pfc__track {
		display: grid;
		grid-template-columns: 1fr;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.pfc.pfc--stack .pfc__track > .pfc__slide {
		width: auto;
		max-width: none;
	}

	.pfc.pfc--stack .pfc__track > [data-pfc-clone] {
		display: none;
	}

	.pfc.pfc--stack .pfc__nav,
	.pfc.pfc--stack .pfc__progress,
	.pfc.pfc--stack .pfc__foot {
		display: none;
	}
}

/* ---------- Card ---------- */

.pfc .pfc__card {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: var(--pfc-card-h);
	display: block;
	overflow: hidden;
	border-radius: var(--pfc-radius, 2px);
	background: var(--pfc-placeholder, linear-gradient(135deg, #123c29 0%, #0b2a1e 100%));
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*
 * Ratio mode: the card's height follows its own width, so it stays in
 * proportion at every breakpoint without three fixed heights to maintain.
 */
.pfc.pfc--ratio .pfc__track {
	align-items: flex-start;
}

.pfc.pfc--ratio .pfc__card {
	height: auto;
	aspect-ratio: var(--pfc-ratio, 3/4);
}

.pfc.pfc--shadow .pfc__card {
	box-shadow: 0 18px 40px rgba(10, 30, 20, 0.18);
}

.pfc .pfc__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	max-width: none;
	transition: transform 0.6s ease;
}

.pfc .pfc__card > .pfc__scrim {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--pfc-scrim, linear-gradient(0deg, rgba(6, 20, 13, 0.92) 0%, rgba(6, 20, 13, 0.15) 42%, rgba(6, 20, 13, 0) 62%));
	pointer-events: none;
}

.pfc .pfc__card .pfc__tag {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 40px);
	font-size: var(--pfc-tag-size, 11px);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	background: var(--pfc-tag-bg, rgba(255, 255, 255, 0.9));
	color: var(--pfc-tag-ink, #0b2a1e) !important;
	padding: 6px 12px;
	border-radius: 20px;
}

.pfc .pfc__body {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 14px;
}

.pfc .pfc__text {
	display: block;
	min-width: 0;
}

.pfc .pfc__card .pfc__name {
	display: block;
	color: var(--pfc-title, #ffffff) !important;
	font-size: var(--pfc-title-size, 20px);
	line-height: 1.2;
	font-weight: 400;
	max-width: 15ch;
}

.pfc .pfc__card .pfc__desc {
	display: block;
	margin-top: 6px;
	color: var(--pfc-title, #ffffff) !important;
	opacity: 0.78;
	font-size: var(--pfc-desc-size, 13px);
	line-height: 1.45;
	max-width: 30ch;
}

.pfc.pfc--title-serif .pfc__name {
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

.pfc.pfc--title-sans .pfc__name {
	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.pfc .pfc__card .pfc__link {
	flex: 0 0 auto;
	font-size: var(--pfc-link-size, 12px);
	line-height: 1.2;
	color: var(--pfc-link, #a6f0bc) !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--pfc-link-rule, rgba(166, 240, 188, 0.5));
	padding-bottom: 3px;
	white-space: nowrap;
	transition: border-color 0.2s ease;
}

/* The reference design outlines the card on hover; the image drifts with it. */
.pfc .pfc__card:hover,
.pfc .pfc__card:focus-visible {
	outline: 2px solid var(--pfc-hover, #6be08a);
	outline-offset: -2px;
}

.pfc .pfc__card:hover .pfc__img,
.pfc .pfc__card:focus-visible .pfc__img {
	transform: scale(1.04);
}

.pfc .pfc__card:hover .pfc__link,
.pfc .pfc__card:focus-visible .pfc__link {
	border-bottom-color: var(--pfc-link, #a6f0bc);
}

/* ---------- Progress line, dots, counter ---------- */

.pfc .pfc__progress {
	position: relative;
	height: var(--pfc-dot-h, 4px);
	border-radius: 999px;
	background: var(--pfc-dot, #cfc7ad);
	margin-top: 22px;
	overflow: hidden;
}

.pfc .pfc__progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 100%;
	border-radius: inherit;
	background: var(--pfc-dot-active, #0b2a1e);
	transform: scaleX(0.2);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.pfc .pfc__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.pfc .pfc__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pfc.pfc--dots-center .pfc__dots {
	margin: 0 auto;
}

.pfc.pfc--dots-right .pfc__dots {
	margin-left: auto;
}

.pfc .pfc__dot {
	width: var(--pfc-dot-w, 34px);
	height: var(--pfc-dot-h, 4px);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pfc-dot, #cfc7ad);
	cursor: pointer;
	transition: background 0.2s ease;
}

.pfc .pfc__dot[aria-current="true"] {
	background: var(--pfc-dot-active, #0b2a1e);
}

.pfc .pfc__counter {
	margin: 0 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: var(--pfc-link-size, 12px);
	letter-spacing: 0.06em;
	color: var(--pfc-intro, #4a5c53) !important;
	font-variant-numeric: tabular-nums;
}

.pfc .pfc__counter-now {
	color: var(--pfc-heading, #10201a) !important;
	font-weight: 600;
}

.pfc .pfc__empty {
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--pfc-intro, #4a5c53) !important;
}

/*
 * With the infinite copies in place the track still overflows even when every
 * real card fits, so a swipe could wander into duplicates with no controls to
 * come back with. Nothing to scroll means no scrolling.
 */
.pfc.pfc--static .pfc__track {
	overflow-x: hidden;
}

.pfc.pfc--static .pfc__nav,
.pfc.pfc--static .pfc__progress,
.pfc.pfc--static .pfc__foot {
	display: none;
}

@media (max-width: 600px) {
	/*
	 * A heading sized for desktop (the reference design's 34px) puts one long
	 * word past the edge of a phone. min() caps it by viewport without
	 * overriding the author's size anywhere it already fits.
	 */
	.pfc .pfc__head .pfc__heading {
		font-size: min(var(--pfc-heading-size, 34px), 8vw);
		max-width: none;
	}

	.pfc .pfc__body {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}

	.pfc .pfc__tag {
		top: 14px;
		left: 16px;
	}

	.pfc.pfc--arrows-at-overlay .pfc__viewport .pfc__nav {
		padding: 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfc .pfc__track {
		scroll-behavior: auto;
	}

	.pfc .pfc__img,
	.pfc .pfc__card,
	.pfc .pfc__progress-bar {
		transition: none;
	}
}