/* ═══════════════════════════════════════════════════════════
   CMD Flip Card Widget — Stylesheet v1.4.0

   v1.4.0 — Safari macOS: delay + gap fixes
   ─────────────────────────────────────────
   Problem 1 (delay / flash before back appears):
     Safari doesn't pre-promote 3D layers until the transform
     actually fires. Fix: translateZ(0.1px) on both faces forces
     GPU layer promotion at paint time, eliminating the delay.

   Problem 2 (spaces / gaps inside cards):
     overflow:visible (set in v1.3.0) stopped clipping backgrounds
     to border-radius, causing colour bleed at corners.
     Fix: restore overflow:hidden on faces BUT pair it with
     translateZ(0.1px). In Safari, when a preserve-3d child has
     its OWN transform (even a trivial one), Safari treats it as
     a composited layer and NO LONGER flattens the parent's
     preserve-3d context — so both fixes coexist.

   Reference: webkit.org/blog/5610/ + caniuse #transform-3d
═══════════════════════════════════════════════════════════ */

/* ── Card container ───────────────────────────────────────── */
.cmd-flip-card {
	height: 520px;
	-webkit-perspective: 1200px;
	        perspective: 1200px;
	cursor: pointer;
	border-radius: 6px;
	display: block;
	/* No overflow:hidden here — still would flatten preserve-3d in Safari */
}

/* ── Rotating inner wrapper ───────────────────────────────── */
.cmd-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
	        transition:         transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
	/* GPU layer for the rotating wrapper */
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	will-change: transform;
}

/* ── Flipped state (touch / keyboard) ────────────────────── */
.cmd-flip-card.cmd-is-flipped .cmd-flip-inner {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

/* ── Shared front / back faces ────────────────────────────── */
.cmd-flip-front,
.cmd-flip-back {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	border-radius: inherit;
	overflow: hidden; /* restored — safe because translateZ(0.1px) below prevents Safari flattening */
	/*
	 * translateZ(0.1px) — the key Safari fix for BOTH issues:
	 *   1. Forces GPU layer promotion at paint time → no delay/flash
	 *   2. Gives each face its own compositing layer → Safari keeps
	 *      the parent's preserve-3d context intact despite overflow:hidden
	 * Using 0.1px (not 0) ensures Safari treats this as a genuine
	 * 3D transform and not a 2D-equivalent no-op.
	 */
	-webkit-transform: translateZ(0.1px);
	        transform: translateZ(0.1px);
	will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
   FRONT FACE
───────────────────────────────────────────────────────────── */
.cmd-flip-front {
	background: #212121;
	/* translateZ(0.1px) inherited from shared rule above */
}

/* Background image layer */
.cmd-flip-front-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	-webkit-filter: brightness(42%);
	        filter: brightness(42%);
	-webkit-transform: scale(1) translateZ(0);
	        transform: scale(1) translateZ(0);
	-webkit-transition:
		-webkit-filter   0.4s ease,
		-webkit-transform 0.4s ease;
	        transition:
		filter   0.4s ease,
		transform 0.4s ease;
	will-change: filter, transform;
}

/* Hover zoom — desktop only */
@media (hover: hover) and (pointer: fine) {
	.cmd-flip-card:hover .cmd-flip-front-bg {
		-webkit-filter: brightness(30%);
		        filter: brightness(30%);
		-webkit-transform: scale(1.04) translateZ(0);
		        transform: scale(1.04) translateZ(0);
	}
}

/* Gradient overlay */
.cmd-flip-front-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(22, 32, 84, 0.18)  0%,
		rgba(22, 32, 84, 0.00) 30%,
		rgba(10, 14, 40, 0.70) 62%,
		rgba(10, 14, 40, 0.95) 100%
	);
	pointer-events: none;
}

/* Front content layout */
.cmd-flip-front-content {
	position: absolute;
	inset: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	        flex-direction: column;
	padding: 26px 26px 28px;
}

/* Main title */
.cmd-front-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

/* Bottom content area */
.cmd-front-bottom {
	margin-top: auto;
}

/* Description */
.cmd-front-desc {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.80);
	margin: 0 0 18px;
}

/* ─────────────────────────────────────────────────────────────
   BACK FACE
───────────────────────────────────────────────────────────── */
.cmd-flip-back {
	background-color: #162054;
	border: none;
	/*
	 * Back face starts at rotateY(180deg).
	 * Must include translateZ(0.1px) from shared rule so we stack it here.
	 * The shared rule sets translateZ(0.1px); we override with the full value.
	 */
	-webkit-transform: rotateY(180deg) translateZ(0.1px);
	        transform: rotateY(180deg) translateZ(0.1px);
}

/* Back content wrapper */
.cmd-flip-back-content {
	position: absolute;
	inset: 0;
	padding: 30px 26px 24px;
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	        flex-direction: column;
	overflow-y: auto;
}

/* Back header */
.cmd-back-header {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	-webkit-flex-shrink: 0;
	        flex-shrink: 0;
}

.cmd-back-title {
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.1;
	margin: 0;
}

/* Description */
.cmd-back-desc {
	font-size: 13.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.70);
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	        flex: 1;
	margin: 0 0 18px;
}

/* Chips label */
.cmd-back-chips-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	margin: 0 0 9px;
}

/* Chips list */
.cmd-back-chips {
	list-style: none;
	display: -webkit-box;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	-webkit-flex-shrink: 0;
	        flex-shrink: 0;
}

/* Individual chip */
.cmd-back-chip {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid rgba(69, 191, 177, 0.30);
	background: rgba(69, 191, 177, 0.12);
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   INTERACTION MODES
───────────────────────────────────────────────────────────── */

/* Desktop: CSS :hover drives the flip */
@media (hover: hover) and (pointer: fine) {
	.cmd-flip-card:hover .cmd-flip-inner {
		-webkit-transform: rotateY(180deg);
		        transform: rotateY(180deg);
	}

	/* Keyboard-toggled: stays flipped even after mouse leaves */
	.cmd-flip-card.cmd-is-flipped .cmd-flip-inner {
		-webkit-transform: rotateY(180deg);
		        transform: rotateY(180deg);
	}
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY — FOCUS STYLES (WCAG 2.2 AA)
───────────────────────────────────────────────────────────── */

.cmd-flip-front:focus-visible {
	outline: 3px solid #45BFB1;
	outline-offset: 3px;
	border-radius: inherit;
}

.cmd-flip-front:focus-visible .cmd-flip-front-bg {
	-webkit-filter: brightness(30%);
	        filter: brightness(30%);
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cmd-flip-inner {
		-webkit-transition: none !important;
		        transition: none !important;
	}

	.cmd-flip-front-bg {
		-webkit-transition: none !important;
		        transition: none !important;
	}

	.cmd-flip-card.cmd-is-flipped .cmd-flip-front {
		visibility: hidden;
	}

	.cmd-flip-card.cmd-is-flipped .cmd-flip-back {
		-webkit-transform: rotateY(0deg) translateZ(0.1px);
		        transform: rotateY(0deg) translateZ(0.1px);
	}
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cmd-flip-card { height: 480px; }
}

@media (max-width: 767px) {
	.cmd-flip-card { height: 460px; }
	.cmd-front-title { font-size: 24px; }
	.cmd-back-title  { font-size: 20px; }
}