/* ═══════════════════════════════════════════════════════════════════
   CARD MODAL

   Scrim  black @ 80%
   Card   1080 x 560, #F7F7F7, radius 20, 40px inside
   Image  480 x 480, radius 10, 40 from the card's left and top
   Close  68px circle #E43839, X 24x24 white 2px, inset 30/30
   Title  32px Demi #210202, 490 wide, 30px right of the image
   Body   20px Book #210202, 490 wide, 14px between paragraphs

   The copy column is vertically centred against the image: the drawn
   block runs 123 -> 436 inside a 40..520 content box, which is (480-313)/2
   either side. Same structure as the sister site's card-modal.
   ═══════════════════════════════════════════════════════════════════ */

.card-modal {
	/* --gutter reaches 100px, which as a top AND bottom inset spent 200px of a
	   short screen before the card got a say. Sideways it still reads as the
	   page gutter; vertically 40px is all the scrim needs. */
	--modal-pad-y: min(var(--gutter), 40px);
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--modal-pad-y) var(--gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.card-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.card-modal__scrim {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: .8;
}

.card-modal__card {
	position: relative;
	display: flex;
	gap: 30px;
	width: 100%;
	max-width: 1080px;
	/* 100% of the flex parent's content box, which has already had
	   --modal-pad-y taken off top and bottom. overflow-y is a last resort
	   only - the height rules below are what stop it being reached. */
	max-height: 100%;
	padding: 40px;
	overflow-y: auto;
	border-radius: 20px;
	background: var(--panel);
	transform: translateY(16px) scale(.98);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.card-modal.is-open .card-modal__card { transform: none; }

.card-modal__media {
	flex: 0 0 480px;
	max-width: 480px;
	min-height: 0;
}

/* The square is the design's intent, not a hard promise: 480 tall plus the
   card's 80px of padding needs 560px of screen, so any laptop under ~730px
   tall got a scrollbar and a clipped card. Cap the height at what the screen
   has and let the square crop to landscape - object-fit is cover, so the
   subject holds and only the framing tightens. */
.card-modal__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: calc(100vh - var(--modal-pad-y) * 2 - 80px);
	max-height: calc(100svh - var(--modal-pad-y) * 2 - 80px);
	border-radius: var(--radius);
	object-fit: cover;
}

.card-modal__body {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	max-width: 490px;
}

/* 32px Demi in a 41px box. */
.card-modal__title {
	margin: 0 0 10px;
	padding-right: 78px; /* clear of the 68px close circle plus its inset */
	font-size: clamp(22px, 19.09px + 0.747vw, 32px);
	line-height: 1.28;
	font-weight: 600;
	color: var(--red-ink);
}

.card-modal__text {
	font-size: clamp(18px, 17.42px + 0.149vw, 20px);
	line-height: 26px;
	color: var(--red-ink);
}
.card-modal__text p { margin: 0; }
.card-modal__text p + p { margin-top: 14px; }

/* ── Close button ─────────────────────────────────────── */
.card-modal__close {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 2;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--red);
	transition: background-color .3s ease, transform .3s ease;
}
.card-modal__close:hover {
	background: #c72c2d;
	transform: rotate(90deg);
}
.card-modal__close::before,
.card-modal__close::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 24px;
	height: 2px;
	margin: auto;
	background: var(--white);
}
.card-modal__close::before { transform: rotate(45deg); }
.card-modal__close::after  { transform: rotate(-45deg); }

body.card-modal-open { overflow: hidden; }

/* The card is 1080 wide with a 480 image beside a 490 column; below the
   width where both still fit inside the gutters it stacks. */
@media (max-width: 1139px) {

	.card-modal__card {
		flex-direction: column;
		gap: 24px;
		padding: 30px;
	}
	/* Stacked, the square is measured off the FULL card width, so a 700px-wide
	   card asks for a 700px-tall image and pushes the copy off the bottom.
	   display:contents dissolves the wrapper so the IMAGE is the flex item and
	   shrinks itself - shrinking the wrapper instead leaves the img at its
	   square height, clipped top-anchored, with object-fit never consulted.
	   min-height:0 is what permits the shrink past a replaced child's size. */
	.card-modal__media { display: contents; }
	.card-modal__media img { flex: 0 1 auto; min-height: 0; max-height: none; }
	.card-modal__body  { align-self: stretch; flex: 0 0 auto; max-width: none; }

	.card-modal__close {
		top: 20px;
		right: 20px;
		width: 48px;
		height: 48px;
	}
	.card-modal__close::before,
	.card-modal__close::after { width: 18px; }

	.card-modal__title { padding-right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.card-modal,
	.card-modal__card,
	.card-modal__close { transition: none; }
	.card-modal__card  { transform: none; }
	.card-modal__close:hover { transform: none; }
}