/**
 * Finewerk Custom Cards
 *
 * Scoped, BEM-style styles for the multi-type card grid. All custom properties
 * are namespaced with --fw-cc- to avoid collisions.
 *
 * Card model
 * ----------
 * Every card is a flex column: a fixed-height top section (type-specific) and a
 * flexible bottom section (shared title + description). The top is a clipped,
 * rounded positioning context so type-specific content stays inside the card
 * shape. Column count is fixed here (max 3 desktop, 2 tablet, 1 mobile) and is
 * intentionally not user-configurable so it can never exceed three per row.
 *
 * Interactions
 * ------------
 *   CTA      - CSS only. :hover / :focus-within recolors the panel + button.
 *   Slider   - three word lanes; JS clones words and sets --fw-cc-lane-shift,
 *              the loop itself is a CSS marquee. Middle lane runs in reverse.
 *   Preview  - CSS only. :hover / :focus-within opens the folder and fans the
 *              three images up and out.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-custom-cards {
	font-family: var(--fw-font-body);
}

.finewerk-custom-cards :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-custom-cards :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-custom-cards {
	--fw-cc-duration: 400ms;
	--fw-cc-lane-duration: 26s;
	display: block;
	width: 100%;
}

.finewerk-custom-cards,
.finewerk-custom-cards *,
.finewerk-custom-cards *::before,
.finewerk-custom-cards *::after {
	box-sizing: border-box;
}

/* ---------- Grid ---------- */

.finewerk-custom-cards__list {
	--fw-cc-columns: 3;
	--fw-cc-col-gap: 24px;
	--fw-cc-row-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	column-gap: var(--fw-cc-col-gap);
	row-gap: var(--fw-cc-row-gap);
	width: 100%;
}

/* Fixed one-third basis so full rows fill the width and any incomplete final
   row is centered as a group by the list's justify-content. */
.finewerk-custom-cards__card {
	--fw-cc-top-height: 260px;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(
		(100% - (var(--fw-cc-columns) - 1) * var(--fw-cc-col-gap)) / var(--fw-cc-columns)
	);
	min-width: 0;
	min-height: 460px;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ececec;
	border-radius: 24px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
	transition: background-color var(--fw-cc-duration) ease,
		border-color var(--fw-cc-duration) ease,
		box-shadow var(--fw-cc-duration) ease;
}

/* ---------- Sections ---------- */

.finewerk-custom-cards__top {
	position: relative;
	flex: 0 0 auto;
	height: var(--fw-cc-top-height, 260px);
	overflow: hidden;
	border-radius: 16px;
	background-color: transparent;
}

.finewerk-custom-cards__bottom {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 20px 4px 4px;
}

.finewerk-custom-cards__title {
	display: block;
	margin: 0 0 10px;
	font-family: var(--fw-font-title);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.15;
	color: #141414;
	overflow-wrap: anywhere;
	transition: color var(--fw-cc-duration) ease;
}

.finewerk-custom-cards__description {
	display: block;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #8a8a8a;
	/* Long content wraps normally and never overflows the card. */
	overflow-wrap: anywhere;
	transition: color var(--fw-cc-duration) ease;
}

/* Keyboard focus must be clearly identifiable on interactive descendants. */
.finewerk-custom-cards__card :focus-visible {
	outline: 2px solid #141414;
	outline-offset: 3px;
}

/* ==========================================================================
   Image card
   ========================================================================== */

.finewerk-custom-cards__card--image .finewerk-custom-cards__top {
	background-color: #f1f1f1;
}

.finewerk-custom-cards__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
   CTA card
   ========================================================================== */

.finewerk-custom-cards__card--cta .finewerk-custom-cards__top {
	background-color: #f1f1f1;
	transition: background-color var(--fw-cc-duration) ease;
}

.finewerk-custom-cards__cta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.finewerk-custom-cards__cta-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.finewerk-custom-cards__cta-logo-wrap {
	display: inline-flex;
	align-items: center;
	min-height: 1px;
}

.finewerk-custom-cards__cta-logo {
	display: block;
	width: 120px;
	height: auto;
	max-width: 100%;
}

.finewerk-custom-cards__cta-tag {
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background-color: #fff;
	color: #141414;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.finewerk-custom-cards__cta-text {
	margin: 0 0 auto;
	font-family: var(--fw-font-title);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.05;
	color: #141414;
	overflow-wrap: anywhere;
}

.finewerk-custom-cards__cta-button {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 18px 24px;
	border: 0;
	border-radius: 40px;
	background-color: #111;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fw-cc-duration) ease,
		color var(--fw-cc-duration) ease;
}

.finewerk-custom-cards__cta-button--static {
	cursor: default;
}

.finewerk-custom-cards__cta-button:hover,
.finewerk-custom-cards__cta-button:focus-visible {
	background-color: #000;
	color: #fff;
}

/* ==========================================================================
   Slider card
   ========================================================================== */

.finewerk-custom-cards__slider {
	--fw-cc-word-gap: 20px;
	--fw-cc-lane-gap: 16px;
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* The three lanes are ambient background motion: never interactive. */
.finewerk-custom-cards__lanes {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	row-gap: var(--fw-cc-lane-gap);
	pointer-events: none;
	user-select: none;
}

/* Optional soft edge fade on each lane. */
.finewerk-cc-slider-fade--yes .finewerk-custom-cards__lane {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 10%,
		#000 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 10%,
		#000 90%,
		transparent 100%
	);
}

.finewerk-custom-cards__lane {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.finewerk-custom-cards__lane-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
}

/* Animation only runs once JS has measured and marked the lane ready. */
.finewerk-custom-cards__lane.is-fw-cc-ready .finewerk-custom-cards__lane-track {
	animation-name: finewerk-custom-cards-marquee;
	animation-duration: var(--fw-cc-lane-duration, 26s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Top and bottom lanes move left; the middle lane reverses to move right. */
.finewerk-custom-cards__lane--middle.is-fw-cc-ready .finewerk-custom-cards__lane-track {
	animation-direction: reverse;
}

@keyframes finewerk-custom-cards-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(var(--fw-cc-lane-shift, 0px), 0, 0);
	}
}

.finewerk-custom-cards__lane-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: var(--fw-cc-word-gap);
	/* Keep a gap between the end of one group and the start of the next. */
	padding-right: var(--fw-cc-word-gap);
}

.finewerk-custom-cards__word {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: 999px;
	background-color: #f1f1f1;
	color: #141414;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

/* Centered logo, layered above the lanes so words never obscure it. */
.finewerk-custom-cards__slider-logo-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	pointer-events: none;
	line-height: 0;
}

.finewerk-custom-cards__slider-logo {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 22px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Preview card (CSS folder + front-face artwork)
   ==========================================================================
   The folder is a back panel and a front face; the front face is itself split
   into a static bottom face and a top face, both drawing the supplied
   front-face.png artwork. Preview images sit between back and front and, at
   rest, the front face (highest z) hides all but their tops. On hover only the
   top face tilts open — its top edge swings toward the viewer, so perspective
   renders it as a pocket flap that is wider at the top and full width at the
   bottom — and the images rise a short way and fan out, their lower parts
   staying tucked behind the front face like a real pocket. The bottom face
   never moves, so the folder's bottom edge stays put and the back panel never
   peeks out under it.

   Overflow: only the Preview card's top section and preview layer are made
   `overflow: visible` so the risen image stack can escape the (short) top
   section. The card background stays rounded because it is a background-color
   clipped by border-radius, not an overflow clip — so nothing else breaks.
   ========================================================================== */

/* Let the image stack escape the top section on the Preview card only. The
   other card types keep their clipping (image/cta/slider tops stay hidden). */
.finewerk-custom-cards__card--preview .finewerk-custom-cards__top {
	overflow: visible;
}

/* Raise a hovered Preview card (and its overflowing images) above its
   siblings — scoped to hover/focus so no permanent stacking context is kept. */
.finewerk-custom-cards__card--preview:hover,
.finewerk-custom-cards__card--preview:focus-within {
	z-index: 4;
}

.finewerk-custom-cards__preview {
	--fw-cc-prev-separation: 70px;
	--fw-cc-prev-lift: 60px;
	--fw-cc-prev-angle: 48deg;
	--fw-cc-prev-duration: 480ms;
	position: absolute;
	inset: 0;
	/* The whole folder never grows past 225px and stays centered in the top
	   section; below that it is fluid, because every folder part is sized in
	   percentages of this box. */
	max-width: 225px;
	margin-inline: auto;
	overflow: visible;
}

.finewerk-custom-cards__folder-back {
	position: absolute;
	left: 11%;
	right: 11%;
	bottom: 8%;
	height: 66%;
	z-index: 1;
	border-radius: 14px;
	background-color: #e4e4e4;
	pointer-events: none;
}

.finewerk-custom-cards__preview-images {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: visible;
	pointer-events: none;
}

.finewerk-custom-cards__preview-image-wrap {
	position: absolute;
	left: 50%;
	bottom: 26%;
	transform: translate(-50%, 0) rotate(0deg);
	transform-origin: bottom center;
	transition: transform var(--fw-cc-prev-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.finewerk-custom-cards__preview-image {
	display: block;
	width: 150px;
	height: 108px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
	background-color: #cfcfcf;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	/* Decorative visuals, never individual controls. */
	pointer-events: none;
}

/* Rest state: a tight, slightly rotated stack peeking above the folder front. */
.finewerk-custom-cards__preview-image-wrap--1 {
	transform: translate(-50%, 0) rotate(-4deg);
	z-index: 1;
}

.finewerk-custom-cards__preview-image-wrap--2 {
	transform: translate(-50%, -4px) rotate(0deg);
	z-index: 2;
}

.finewerk-custom-cards__preview-image-wrap--3 {
	transform: translate(-50%, 0) rotate(4deg);
	z-index: 3;
}

/* Front face: a wrapper that paints nothing and only positions two faces above
   every preview image (z 4), so the images' lower/tucked parts always stay
   covered. Splitting the face in two is what keeps the hover tilt off the
   folder's bottom edge: only the top face transforms, the bottom face never
   moves and so keeps covering the back panel.

   Both faces draw the same front-face.png at this wrapper's scale and show
   their own band of it — the top face the upper 76%, the bottom face the lower
   36% — so together they read as one continuous face. The 12% band they share
   is hidden behind the top face at rest and is what the tilted top face
   uncovers on hover, instead of the back panel. Each band's background-size is
   100 / (band height), so changing a band height means changing it too.

   A background-color (control-driven) shows only through the artwork's
   transparent rounded corners. No decorative pseudo-element is used, so nothing
   obscures the artwork. */
.finewerk-custom-cards__folder-front {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 8%;
	height: 44%;
	z-index: 4;
	pointer-events: none;
}

.finewerk-custom-cards__folder-front-top,
.finewerk-custom-cards__folder-front-bottom {
	position: absolute;
	left: 0;
	right: 0;
	background-color: #ededed;
	background-image: url("../images/front-face.png");
	background-repeat: no-repeat;
	pointer-events: none;
}

/* The only part that tilts. Rest silhouette is a full rectangle (kept as a
   4-point polygon so the opening shape below animates smoothly). */
.finewerk-custom-cards__folder-front-top {
	top: 0;
	height: 76%;
	z-index: 2;
	background-position: left top;
	background-size: 100% 131.58%; /* 100 / 76 */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transform-origin: bottom center;
	transform: perspective(700px) rotateX(0deg);
	transition: transform var(--fw-cc-prev-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
		clip-path var(--fw-cc-prev-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Never transformed: the folder's bottom edge stays aligned and the back panel
   stays covered while the top face opens. */
.finewerk-custom-cards__folder-front-bottom {
	bottom: 0;
	height: 36%;
	z-index: 1;
	background-position: left bottom;
	background-size: 100% 277.78%; /* 100 / 36 */
	border-radius: 0 0 14px 14px;
}

/* ---------- Preview hover / focus-within ---------- */

/* Opening: the top face's bottom edge is the hinge (transform-origin: bottom
   center). The top edge swings toward the viewer (perspective + a negative
   rotateX of the control's angle), so it is projected nearer and wider than the
   hinge — the flared "folder opening" pocket of the design. The clip-path keeps
   the flap's bottom corners at full width (0 / 100%) so its bottom edge always
   covers the static bottom face and never uncovers the back panel; the top
   corners sit outside the box (-5% / 105%), leaving the flared top edge
   untouched. The static bottom face below is not transformed at all. */
.finewerk-custom-cards__card--preview:hover .finewerk-custom-cards__folder-front-top,
.finewerk-custom-cards__card--preview:focus-within .finewerk-custom-cards__folder-front-top {
	transform: perspective(700px) rotateX(calc(-1 * var(--fw-cc-prev-angle, 48deg))) translateY(4%);
	clip-path: polygon(-5% 0, 105% 0, 100% 100%, 0 100%);
}

.finewerk-custom-cards__card--preview:hover .finewerk-custom-cards__preview-image-wrap--1,
.finewerk-custom-cards__card--preview:focus-within .finewerk-custom-cards__preview-image-wrap--1 {
	transform: translate(calc(-50% - var(--fw-cc-prev-separation)), calc(-1 * var(--fw-cc-prev-lift))) rotate(-14deg);
}

.finewerk-custom-cards__card--preview:hover .finewerk-custom-cards__preview-image-wrap--2,
.finewerk-custom-cards__card--preview:focus-within .finewerk-custom-cards__preview-image-wrap--2 {
	transform: translate(-50%, calc(-1 * (var(--fw-cc-prev-lift) + 16px))) rotate(-2deg);
}

.finewerk-custom-cards__card--preview:hover .finewerk-custom-cards__preview-image-wrap--3,
.finewerk-custom-cards__card--preview:focus-within .finewerk-custom-cards__preview-image-wrap--3 {
	transform: translate(calc(-50% + var(--fw-cc-prev-separation)), calc(-1 * var(--fw-cc-prev-lift))) rotate(14deg);
}

/* ==========================================================================
   Reduced motion: keep the readable final design, drop large movement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.finewerk-custom-cards__card,
	.finewerk-custom-cards__title,
	.finewerk-custom-cards__description,
	.finewerk-custom-cards__cta-button,
	.finewerk-custom-cards__preview-image-wrap,
	.finewerk-custom-cards__folder-front-top {
		transition: none;
	}

	/* Stop the ambient word lanes entirely. */
	.finewerk-custom-cards__lane.is-fw-cc-ready .finewerk-custom-cards__lane-track {
		animation: none !important;
		transform: none !important;
	}

	/* Preview: keep the readable final design — the images still fan out, which
	   is what carries the meaning — but drop the dramatic 3D tilt of the flap
	   entirely, so no big rotateX sweep runs. Image hover positions are already
	   short and are left in place. */
	.finewerk-custom-cards__card--preview:hover .finewerk-custom-cards__folder-front-top,
	.finewerk-custom-cards__card--preview:focus-within .finewerk-custom-cards__folder-front-top {
		transform: none;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: max two per row. Trim preview separation so risen images don't
   collide with the adjacent card while the opening illusion is preserved.
   (Only applied where the responsive controls haven't set their own value.) */
@media (max-width: 1024px) {
	.finewerk-custom-cards__list {
		--fw-cc-columns: 2;
	}

	.finewerk-custom-cards__preview {
		--fw-cc-prev-separation: 56px;
	}
}

/* Mobile: one per row, no horizontal page overflow. */
@media (max-width: 767px) {
	.finewerk-custom-cards__list {
		--fw-cc-columns: 1;
	}

	.finewerk-custom-cards__card {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* CTA: the tag drops above the logo and shrinks hard; top text and button
	   step down a size so the taller head still fits the top section. */
	.finewerk-custom-cards__cta-head {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 12px;
	}

	.finewerk-custom-cards__cta-tag {
		padding: 5px 11px;
		font-size: 0.72rem;
	}

	.finewerk-custom-cards__cta-text {
		font-size: 1.8rem;
	}

	/* Smaller type and padding, still a comfortable ~45px tap target. */
	.finewerk-custom-cards__cta-button {
		margin-top: 16px;
		padding: 14px 20px;
		font-size: 0.95rem;
	}

	/* Narrow the preview fan and images so the stack never reaches the page
	   edge; vertical overflow stays visible, horizontal is kept in check. */
	.finewerk-custom-cards__preview {
		--fw-cc-prev-separation: 44px;
	}

	.finewerk-custom-cards__preview-image {
		width: 128px;
	}
}