/**
 * PAGE MODULE — element rules
 *
 * What every <page-module> looks like before any variant takes over.
 *   <page-module>                     generic wrapper
 *   <page-module class='X'>           variants (rendered by templates/modules/X.php)
 *
 * Includes the chrome variants — page-header, page-intro, module-reminder —
 * which use the page-module element but aren't authorable modules.
 *
 * Per-module rules (the X variants) live in styles/page-modules/<name>.css
 * and are stitched together by styles/modules.css.
 */

/* ===== BASE ===== */

page-module {
	--dev-border-width: 0px;
	--above-block: 0.7em;
	--below-block: 1.2em;

	display: block;
	padding-block: var(--module-block-padding);
	padding-inline: var(--gutter);
	grid-column: 1 / -1;
	min-width: 0;

	@media (width >= 1000px) {
		padding-inline: 0;
		grid-column: 3 / -3;
	}

	&.clear {
		padding-block: 0;
	}

	.section-heading {
		text-wrap: balance;
    	max-width: 42ch;
	}

	/* The slot directly after a section-heading — currently filled by
	   <keyboard-gate>, the wrapper around focus-greedy content (video,
	   interactive). Any future wrapper that takes this position can opt
	   in by adding the .media-slot class. */
	.section-heading + .media-slot {
		margin-top: var(--above-block);
	}
}

.page-section.section-group[data-emphasis="focused"] {
	padding-block: 6rem;
}

/* ===== FIGURE PATTERN =====
   Shared by any module that wraps content in <figure><figcaption>… —
   currently figure and mermaid-chart. Per-module CSS owns the figure
   contents (image sizing, mermaid svg, etc.); the caption treatment
   stays consistent here. */

page-module figure figcaption {
	background-color: var(--fill-secondary);
	padding: 0.5em;

	a {
		color: var(--ink-secondary);
	}
}

/* ===== CHROME =====
   Rendered by components, not by templates/modules. They use the
   <page-module> element for layout consistency but aren't authorable. */

/* Any section that holds the page-header chrome bleeds up under the
   sticky .site-header so the section's fill (default or paletted via
   a [data-palette] ancestor) meets the header without a seam. The
   background-color is on the section so the bleed area picks up any
   palette override on its scope. */
.page-section:has(> page-module.page-header) {
	margin-top: calc(-1 * var(--site-header-height));
	padding-top: 45px;
	background-color: var(--fill-primary);
}

page-module.page-header {
	/* Hero-scale: bigger floor and ceiling than the default module token */
	padding-block: clamp(60px, 12vh, 100px);
	padding-inline: var(--gutter);

	.meta-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.last-updated {
		color: var(--ink-secondary);
	}

	.completed-on {
		color: var(--ink-secondary);
		margin: 0;

		&::before {
			content: '|';
			margin-inline-end: 0.5rem;
			opacity: 0.5;
		}
	}

	.visibility-status {
		display: inline-block;
		padding: 0.1em 0.5em;
		border-radius: 999px;
		border: 1px solid currentColor;
		font-size: 0.8em;
		line-height: 1.4;
		text-transform: lowercase;

		&[data-visibility='public'] {
			color: var(--ink-success, seagreen);
		}

		&[data-visibility='unlisted'] {
			color: var(--ink-secondary);
		}

		&[data-visibility='in-progress'] {
			color: var(--ink-warning, darkorange);
		}

		&[data-visibility='archived'] {
			color: var(--ink-secondary);
			opacity: 0.7;
		}
	}

	@media (width > 1000px) {
		padding-inline: 0;
	}
}

#intro {
	border-top: 1px solid rgb(0 0 0 / 0.05);
	border-bottom: 1px solid rgb(0 0 0 / 0.05);
}

page-module.page-intro {
	padding-block: 2em;
	padding-inline: var(--gutter);

	@media (width > 1000px) {
		padding-inline: 0;
	}
}

page-module.module-reminder {
	background: var(--fill-secondary);
	padding-inline: var(--gutter);
	padding-block: 2em;

	&.mobile-only {
		display: block;
	}

	@media (width > 700px) {
		&.mobile-only {
			display: none;
		}
	}
}