/*
 * The card.
 *
 * This file has no per-field rules and no coordinates. Every position, size, font and colour is
 * inline on the element, produced by ME_GC_Render from the same ME_GC_Layout placement list the
 * PDF draws — so the preview and the print cannot drift apart by editing a stylesheet.
 *
 * Sizes arrive in `cqw`: percent of the card's own width, the unit the spec is written in, so the
 * card scales to any container without a second set of numbers.
 *
 * The card's `aspect-ratio` is inline too, because each design has its own page size — portrait,
 * landscape or square — and a fixed ratio here would flatten them all to one shape.
 */

.me-gc-card {
	container-type: inline-size;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #EDE3DD;
	box-shadow: 0 24px 60px rgba(60, 30, 20, 0.22);
	color: #1B1412;
}

.me-gc-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Something to look at while the artwork arrives.
 *
 * No JavaScript and no state to clear: ::before is generated ahead of every child, so the
 * artwork paints straight over it the moment it has bytes, and the card's own text is readable
 * the whole time. Nothing can get stuck half-loaded, because nothing is ever switched off.
 *
 * The sweep stops after a dozen passes. Past that the image is not slow, it is missing, and an
 * animation that never ends is a worse answer than a calm panel — on the dashboard there are six
 * of these on screen at once.
 */
.me-gc-card:not(.is-empty)::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%),
		#EDE3DD;
	background-size: 220% 100%, 100% 100%;
	background-repeat: no-repeat;
	animation: me-gc-card-wait 1.2s linear 12;
}

@keyframes me-gc-card-wait {
	from { background-position: -120% 0, 0 0; }
	to   { background-position:  220% 0, 0 0; }
}

/* A sweep nobody asked for, on a card that is already there. */
@media (prefers-reduced-motion: reduce) {
	.me-gc-card:not(.is-empty)::before {
		animation: none;
	}
}

/* It has no business on paper, and it would print as a pale wash over the artwork. */
@media print {
	.me-gc-card::before {
		display: none;
	}
}

/*
 * One rule for every text field.
 *
 * `line-height: 1` without exception: the PDF puts the baseline at
 * `(1 − (ascent + descent)) / 2 + ascent` below the box top, which is what a browser does at line
 * height 1 and at no other value. A field's own line height belongs to the *stacking* between
 * fields, and the layout has already folded that into these coordinates.
 *
 * `white-space: nowrap` because the PDF does not wrap either. A field that outgrows its box is a
 * layout problem to see in the preview, not something to paper over with a second line the print
 * will not have.
 */
.me-gc-card__f {
	position: absolute;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	margin: 0;
}

/*
 * Graphics. PHP writes position and size inline, but the editor creates these elements in the
 * browser when you pick a picture — without this they are statically positioned and drop to the
 * bottom of the card, which looks like the image simply did not appear.
 */
.me-gc-card__img {
	position: absolute;
	object-fit: contain;
	pointer-events: none;
}

.me-gc-card__v {
	pointer-events: none;
}

.me-gc-card__v.is-hidden {
	visibility: hidden;
}

/*
 * The dashed box marks a code that has not been issued yet; the printed card never shows it.
 * Drawn as an `outline`, which takes up no space — a border with padding would push everything
 * below it to a position it will not occupy in print.
 */
.me-gc-card.is-preview [data-gc-type="code"] {
	outline: 1px dashed rgba(243, 228, 214, 0.35);
	outline-offset: 0.9cqw;
	border-radius: 3px;
}

/* No artwork yet: show the text on a neutral ground rather than a broken image. */
.me-gc-card.is-empty {
	background: repeating-linear-gradient(45deg, #f0f0f1, #f0f0f1 8px, #e8e8ea 8px, #e8e8ea 16px);
}