/*
 * DEVORA stage 6, family 2: the Explore our volcanoes map page (docs/stage-6/20-map-and-regions.md 3A, 6b.9). Loaded
 * only on a page that renders one of its classes (functions.php devora_css_families(), "map"), and in the editor. The
 * region pages have their own file, region.css (split 30 Sep review: each page downloaded the other's rules). The
 * region map block's own structure and look are in devora-site blocks/region-map/style.css (RM1 to RM9), loaded with
 * the block. Tags here: RC1 to RC4 and MV1. Paths are relative to this file.
 */

/* === Map page === */

/* RC1. Region cards grid (1203:8593): four across at 312 with 12 between from 1024, two from 600 (no frame draws the
 *      tablet: inferred), one below 600 (1195:15065). Post Template's grid takes one column count, so the steps are here;
 *      the doubled class outranks core's generated container rule. */
@media (width < 1024px) {
	.devora-region-cards__grid.devora-region-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 600px) {
	.devora-region-cards__grid.devora-region-cards__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Each item is a one-cell grid its card stretches to fill (RC2), so when one card in a row grows past its ratio (a
 * two-line title at 1024, text spacing), the row's cards stay the same height. */
.devora-region-cards__grid > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* RC2. The region card (Region Card 1162:43981, 1203:8594; mobile 1167:15161): square (4:3 below 600, 353 x 265), radius
 *      card, a 1px overlay border, the photo covering it under the region-card shading (a top scrim added to Figma's
 *      gradient so the white badge row and title pass over sky: 7.9, Liz 30 Sep), the texts at the top and Explore at the
 *      foot, 24 inside. With no photo the card shows Figma's grey paper (04694384, darkened in the file as Figma paints
 *      it). Post Featured Image cannot hold content or a scrim, and a Group has no aspect ratio. The card is a one-cell
 *      grid that the content fills, and nothing clips it (the photo and the shading round their own corners), so the
 *      ratio is a minimum: a title that needs more room (WCAG text spacing, a 320 phone) grows the card rather than
 *      being cut off (1.4.10, 1.4.12; 30 Sep review). */
.devora-region-card {
	position: relative;
	isolation: isolate;
	display: grid;
	place-self: stretch;
	aspect-ratio: 1;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--card);
	background: var(--wp--preset--color--primary-strong) url("../images/region-card-texture.webp") center / cover;
}
@media (width < 600px) {
	.devora-region-card { aspect-ratio: 4 / 3; }
}
.devora-region-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: var(--wp--preset--gradient--region-card);
	pointer-events: none;
}
/* Below 768 the title is 22 to 23.2px, normal-size text, so it needs 4.5:1, not the 3:1 of the 24px and up titles:
 * the phone and tablet shading holds 62% down past a two-line title (it measured 4.36 to 4.46 at 320, 360 and 480 with
 * the desktop stops; 30 Sep review). */
@media (width < 768px) {
	.devora-region-card::before { background: var(--wp--preset--gradient--region-card-small); }
}
.devora-region-card > .devora-region-card__image {
	position: absolute;
	inset: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: inherit;
}
.devora-region-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The card's flow layout gives its second child the 24 blockGap as a top margin; the photo, first, is out of flow, so
 * that margin pushed the content 24 down and its Explore button onto the card's foot (30 Sep review). */
.devora-region-card > .devora-region-card__content {
	position: relative;
	z-index: 2;
	margin-block: 0;
}
.devora-region-card__content > * { margin-block: 0; }
/* The title keeps the Texts group's 12 above it (the badge to title gap, 1162:43973), and takes the card-title line
 * height (36 at 1440, as the Facts values), not the heading element's 32. */
.devora-region-card .wp-block-heading {
	margin-inline: 0;
	margin-block-end: 0;
	line-height: var(--wp--custom--line-height--card-title);
}
.devora-region-card:hover .wp-block-heading {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* RC3. Explore, the card's one link (stretched over the card by HM12), drawn as the Primary button: Read More has no
 *      button style. The same fill, label, padding and hover as the theme's button element (accent-strong with white,
 *      4.61:1; decor-6 on hover); hovering anywhere on the card hovers the button. The :hover and :focus pair outranks
 *      the global link hover colour. */
.devora-region-card a.devora-region-card__link,
.devora-region-card a.devora-region-card__link:is(:hover, :focus) {
	display: inline-block;
	width: fit-content;
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--button--font-size);
	font-weight: 800;
	line-height: var(--wp--custom--button--line-height);
	text-decoration: none;
}
.devora-region-card:hover a.devora-region-card__link,
.devora-region-card a.devora-region-card__link:is(:hover, :focus-visible) { background-color: var(--wp--preset--color--decor-6); }

/* RC4. The card badge (1162:43973): a 40 circle in the region colour, the number in its paired label colour, ExtraBold,
 *      at the headline size with a floor at 18.67 (custom.region.badgeNumber), so it is always large bold text (3:1):
 *      region 7 reaches 4.22:1 (design-tokens regionsNote), which would fail at the headline's 18 on a phone. Figma draws
 *      16 (question 7.13). The colour custom properties come from the site plugin's badge filter on the bound Paragraph. */
.devora-region-card .devora-region-badge {
	display: grid;
	place-items: center;
	width: var(--wp--custom--region--badge);
	height: var(--wp--custom--region--badge);
	border-radius: 50%;
	background-color: var(--devora-region, var(--wp--preset--color--primary));
	color: var(--devora-region-label, var(--wp--preset--color--white));
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--region--badge-number);
	font-weight: 800;
	line-height: 1;
}

/* MV1. Visiting (3A.4, not drawn): the article block sits in the Map band, whose column is the wide 1284, so its text
 *      and media are held to the 852 prose column, starting at the band's left edge under the section headings. The
 *      band's constrained layout sets the section's own width and centring, so the limit goes on its children. */
.devora-band--map > .devora-article > * { max-width: var(--wp--custom--width--prose); }