/* -------------------------------------------------------------------------
   The itygr card system (5.1.12) — three standalone "sticker" cards
   (Window/Product/Short) plus a Card Grid wrapper (inc/custom-editor.php's
   vf_ce_render_card_window()/_product()/_short()/_grid()). Ported from a
   hand-delivered CSS/markup spec — visual language kept exactly as
   supplied (cream paper, thick ink outline, one lime accent, Manrope);
   only the class prefix changed, from itygr-card-* to vf-pb-card-* to
   match every other block's own naming in this file.

   Rotation is NOT handled here the way the original spec did (five fixed
   itygr-rot-a..d/-flat utility classes) — it's the Style group's own
   existing 'rotation' field instead (vf_ce_apply_block_style() in
   inc/custom-editor.php, already available on every block type as a
   real degree value, not a fixed set of five). That's why there's no
   --rot custom property or rotation utility class below: the inline
   transform:rotate(...) these cards pick up already comes from the same
   place a Heading's or Image's tilt would.
   ---------------------------------------------------------------------- */

:root {
	--vf-card-ink: #16211E;
	--vf-card-paper: #FFFDF7;
	--vf-card-body: #3D4742;
	--vf-card-muted: #5C6660;
	--vf-card-lime: #D6F24A;
	--vf-card-red: #F0442E;
	--vf-card-yellow: #FFC93C;
	--vf-card-green: #3FB56B;
	--vf-card-blue: #4C7DF0;
	--vf-card-border: 5px;
	--vf-card-shadow: 0 26px 42px rgba(18, 32, 25, .22);
	--vf-card-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- shared shell ------------------------------------------------ */

.vf-pb-card {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--vf-card-font);
	filter: drop-shadow(var(--vf-card-shadow));
}

.vf-pb-card__body {
	position: relative;
	background: var(--vf-card-paper);
	border: var(--vf-card-border) solid var(--vf-card-ink);
	border-radius: 26px;
	overflow: hidden;
}

.vf-pb-card a { text-decoration: none; color: inherit; }

/* Rotation itself is inline transform:rotate() on the Style-group wrapper
   DIV vf_ce_apply_block_style() puts AROUND this article (.vf-pb-bs, a
   generic wrapper shared by every block type) — not a class or property
   on .vf-pb-card itself. :has() is what scopes the effects below to just
   that wrapper-around-a-card case, the same technique the Container/
   Columns drag-resize handle already uses in this file to find its own
   target through an optional intervening .vf-pb-bs. */
.vf-pb-bs:has(> .vf-pb-card) {
	transition: transform .25s ease;
}
@media (hover: hover) {
	.vf-pb-bs:has(> .vf-pb-card):hover {
		transform: rotate(0deg) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vf-pb-bs:has(> .vf-pb-card) { transition: none; }
}
/* Rotation reads as a distracting, hard-to-tap tilt at phone widths —
   matching the original spec's own "disabled under 782px" behavior. */
@media (max-width: 782px) {
	.vf-pb-bs:has(> .vf-pb-card) { transform: none !important; }
}

/* ---- window card --------------------------------------------------- */

.vf-pb-card--window { padding-top: 22px; }

.vf-pb-card__clip {
	position: absolute;
	top: 0;
	left: 50%;
	width: 96px;
	height: 34px;
	margin-left: -48px;
	border: 9px solid var(--vf-card-blue);
	border-radius: 18px;
	box-sizing: border-box;
	transform: rotate(-8deg);
	z-index: 3;
}

.vf-pb-card__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 22px;
}

.vf-pb-card__light {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 3px solid var(--vf-card-ink);
	box-sizing: border-box;
}
.vf-pb-card__light--r { background: var(--vf-card-red); }
.vf-pb-card__light--y { background: var(--vf-card-yellow); }
.vf-pb-card__light--g { background: var(--vf-card-green); }

.vf-pb-card__shot {
	position: relative;
	margin: 0 18px;
	aspect-ratio: 16 / 9;
	border: 4px solid var(--vf-card-ink);
	border-radius: 16px;
	overflow: hidden;
	background: #EFEADC;
}
.vf-pb-card__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vf-pb-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 26px 26px;
}

.vf-pb-card__footer-title {
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1;
	color: var(--vf-card-ink);
	margin: 0;
}

.vf-pb-card__meta {
	display: flex;
	gap: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vf-card-muted);
	white-space: nowrap;
	padding-bottom: 4px;
}

/* ---- product card --------------------------------------------------- */

.vf-pb-card--product .vf-pb-card__body { border-radius: 28px; }

.vf-pb-card__pad { position: relative; padding: 34px 34px 30px; }

.vf-pb-card__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 28px;
}

.vf-pb-card__icon {
	width: 74px;
	height: 74px;
	display: block;
	flex: none;
}

.vf-pb-card__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 3px solid var(--vf-card-ink);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vf-card-ink);
	background: #fff;
}

.vf-pb-card__title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--vf-card-ink);
	margin: 0 0 14px;
}

.vf-pb-card__text {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.58;
	color: var(--vf-card-body);
	text-wrap: pretty;
}

.vf-pb-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 3px solid rgba(22, 33, 30, .14);
}

.vf-pb-card__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--vf-card-ink);
}

.vf-pb-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	background: var(--vf-card-ink);
	color: var(--vf-card-paper);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	transition: background .2s ease;
}
.vf-pb-card__cta:hover { background: #24352F; color: var(--vf-card-paper); }
.vf-pb-card__cta span:last-child { font-size: 17px; line-height: 1; }

/* ---- short card ------------------------------------------------------ */

.vf-pb-card--short { padding: 18px 0 0 18px; }

.vf-pb-card--short .vf-pb-card__body {
	border-radius: 24px;
	padding: 34px 32px 32px;
}

.vf-pb-card__pin {
	position: absolute;
	top: 0;
	left: 34px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--vf-card-red);
	border: 5px solid var(--vf-card-ink);
	box-sizing: border-box;
	z-index: 3;
}

.vf-pb-card__stat {
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .9;
	color: var(--vf-card-ink);
	margin: 0 0 16px;
}

.vf-pb-card__label {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--vf-card-ink);
	margin: 0 0 10px;
}

.vf-pb-card--short .vf-pb-card__text {
	margin: 0;
	max-width: 26ch;
	font-size: 16px;
	line-height: 1.55;
}

/* ---- card grid --------------------------------------------------------
   Auto-fit, not a fixed column count — the point of this layout (per the
   original spec) is that it reflows on its own with nothing to pick. */

.vf-pb-card-grid--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: start;
}
.vf-pb-card-grid--grid.vf-pb-card-grid--gap-small { gap: 28px 20px; }
.vf-pb-card-grid--grid.vf-pb-card-grid--gap-medium { gap: 56px 40px; }
.vf-pb-card-grid--grid.vf-pb-card-grid--gap-large { gap: 80px 56px; }

/* Stack (5.1.13) — cards overlap instead of sitting in clean cells. The
   universal child selector (> *) is deliberate, same reasoning as the
   rotation :has() rule above: a card is either the bare .vf-pb-card
   article or a .vf-pb-bs Style-group wrapper around it, and this has to
   apply the same fixed width + overlap either way. Later children paint
   over earlier ones (normal stacking-order behavior, no z-index needed)
   — reordering a card in the outline is what changes which one is "on
   top." The gap value doubles as the overlap amount here, not a second,
   near-duplicate field. */
.vf-pb-card-grid--stack {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.vf-pb-card-grid--stack > * {
	flex: 0 0 320px;
	width: 320px;
	max-width: 100%;
}
.vf-pb-card-grid--stack.vf-pb-card-grid--gap-small > *:not(:first-child) { margin-left: -30px; }
.vf-pb-card-grid--stack.vf-pb-card-grid--gap-medium > *:not(:first-child) { margin-left: -70px; }
.vf-pb-card-grid--stack.vf-pb-card-grid--gap-large > *:not(:first-child) { margin-left: -120px; }
@media (max-width: 600px) {
	/* An edge-to-edge overlap that reads as playful at desktop width just
	   looks broken once cards are narrower than the overlap itself. */
	.vf-pb-card-grid--stack > *:not(:first-child) { margin-left: 0; margin-top: -20px; }
}

@media (max-width: 782px) {
	.vf-pb-card__pad { padding: 26px 24px 24px; }
	.vf-pb-card--short .vf-pb-card__body { padding: 28px 24px 26px; }
	.vf-pb-card__stat { font-size: 52px; }
}