/*
 * [oo_featured_items] -- the ordering catalogue's cards, off the ordering page.
 *
 * A SEPARATE STYLESHEET FROM `order.css`, AND THAT IS THE WHOLE POINT OF THE
 * FILE. `order.css` is 374 KB and `inc/assets.php` deliberately keeps it off a
 * client's own pages; a band of four cards on a home page that dragged the
 * ordering bundle back in would undo that in one shortcode. So the defaults
 * this band needs live here, alone, and a page that renders the shortcode pays
 * for these rules and nothing else.
 *
 * AND A SITE THAT RENAMED EVERY SEAM PAYS FOR NOTHING. `oo_featured_wants_css()`
 * asks whether any class name is still a default one before this is enqueued at
 * all -- the same question `fk_menu_featured` asks of the paper menu's cards,
 * for the same reason: a stylesheet whose selectors match no element on the page
 * is bytes spent on nothing.
 *
 * EVERY DIMENSION IS AN `--oo-*` CUSTOM PROPERTY, which is the rule the whole
 * layer is built on (`fieldkit-order.php`, "APPEARANCE IS STILL THE SITE'S"): a
 * client restyles the band by redeclaring a handful of these rather than by
 * fighting the selectors.
 */

.oo-featured {
	--oo-featured-columns: 4;
	/*
	 * THE SPACING STEPS WITH A FALLBACK, and the fallback is the load-bearing
	 * half. `--oo-s1` .. `--oo-s8` are declared in `order.css`
	 * (ARCHITECTURE-DECISION.md: pick a step, never a number), and `order.css`
	 * is exactly what this band does NOT load on a client's home page. So the
	 * step is named -- a site that redeclares the scale moves this band with the
	 * rest of the layer -- and the number it would have resolved to is written
	 * beside it, so the band is still spaced correctly on a page where the scale
	 * was never declared.
	 */
	--oo-featured-gap: var(--oo-s6, 24px);
	--oo-featured-card-gap: var(--oo-s3, 12px);
	--oo-featured-ratio: 4/3;
	--oo-featured-radius: 10px;
	--oo-featured-title-size: 1.15rem;
	--oo-featured-title-weight: 700;
	--oo-featured-text-size: .95rem;
	--oo-featured-text-opacity: .75;
	--oo-featured-text-leading: 1.5;
	--oo-featured-price-size: 1rem;
	--oo-featured-price-weight: 600;
	--oo-featured-price-gap: 6px;
	--oo-featured-add-gap: var(--oo-s3, 12px);

	display: grid;
	grid-template-columns: repeat(var(--oo-featured-columns), 1fr);
	gap: var(--oo-featured-gap);
}

.oo-featured__card {
	display: flex;
	flex-direction: column;
	gap: var(--oo-featured-card-gap);
	text-decoration: none;
	color: inherit;
}

/*
 * THE BODY IS A COLUMN TOO, so `margin-top: auto` on the Add button has
 * somewhere to push against. Measured on bench-b at 1280 before this: four
 * `add="yes"` cards with descriptions of one, two, two and one lines put their
 * buttons at four different heights, because the only flex column was the card
 * and the button is two elements down inside the body.
 */
.oo-featured__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/*
 * AN EXPLICIT RATIO, NEVER `auto`. WordPress 6.7 writes `sizes="auto"` onto a
 * lazy image, and with an auto ratio the browser reserves no box: the card lays
 * out at the file's full height until the photograph arrives and then collapses.
 * The paper menu's featured cards carry the same note for the same reason.
 */
.oo-featured__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--oo-featured-ratio);
	object-fit: cover;
	border-radius: var(--oo-featured-radius);
}

.oo-featured__title {
	margin: 0 0 var(--oo-featured-price-gap);
	font-size: var(--oo-featured-title-size);
	font-weight: var(--oo-featured-title-weight);
}

/* The title is the link only on an `add="yes"` card, where the card itself
   cannot be one -- a <button> inside an <a> is not valid HTML. Inheriting the
   colour keeps the two card shapes looking the same. */
.oo-featured__title a {
	color: inherit;
	text-decoration: none;
}

.oo-featured__text {
	margin: 0;
	font-size: var(--oo-featured-text-size);
	opacity: var(--oo-featured-text-opacity);
	line-height: var(--oo-featured-text-leading);
}

.oo-featured__price {
	margin: var(--oo-featured-price-gap) 0 0;
	font-size: var(--oo-featured-price-size);
	font-weight: var(--oo-featured-price-weight);
	font-variant-numeric: tabular-nums;
}

/* `margin-top: auto` so the Add button sits on the card's floor whatever the
   description above it does. A row of cards with buttons at four different
   heights is the defect this one declaration prevents. */
.oo-featured__add {
	margin-top: auto;
	padding-top: var(--oo-featured-add-gap);
}

/* Four stepping to two and then one, which divides evenly at every step. The
   paper menu's cards break at the same two widths so a page carrying both
   bands reflows once rather than twice. */
@media (max-width: 1000px) {
	.oo-featured {
		--oo-featured-columns: 2;
	}
}

@media (max-width: 560px) {
	.oo-featured {
		--oo-featured-columns: 1;
	}
}