/**
 * files: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Files to download ----------------------------------------------
 *
 * Built because the Child Development Center made a whole "program" called
 * Registration Forms and Tuition Schedule — the only way the old page builder
 * would let them put two PDFs on a page.
 *
 * The type and size sit with the name rather than after it, because the
 * decision "do I open this now" is made before the tap, usually on a phone.
 * -------------------------------------------------------------------------- */

.cong-files { margin-block: var(--wp--preset--spacing--50); }

.cong-files__head { margin-block-end: var(--wp--preset--spacing--30); }
.cong-files__heading { margin: 0.25rem 0 0; font-size: var(--wp--preset--font-size--xl); line-height: 1.2; }
.cong-files__intro { margin: 0.5rem 0 0; color: var(--wp--preset--color--ink-muted); }

.cong-files__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-files--cols-2 .cong-files__list { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.cong-files--cols-3 .cong-files__list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.cong-files__link {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding: 0.9rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 150ms ease, background 150ms ease;
}

.cong-files__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--leaf);
	color: var(--wp--preset--color--ink);
}

/*
 * The extension as the icon. A generic paperclip tells somebody nothing; the
 * word PDF tells them what will happen when they tap it.
 */
.cong-files__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-inline-size: 3rem;
	padding: 0.35rem 0.5rem;
	background: var(--wp--preset--color--lime-soft);
	border-radius: 0.4rem;
	color: var(--wp--preset--color--leaf);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.cong-files__text { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }

.cong-files__name { font-weight: 600; line-height: 1.3; }

.cong-files__note,
.cong-files__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-files__meta { font-variant-numeric: tabular-nums; }

/* Editor-side list */
.cong-files-control__row {
	position: relative;
	margin-block-end: 12px;
	padding: 10px 12px;
	background: #f0f0f0;
	border-radius: 2px;
}

.cong-files-control__bar { display: flex; align-items: center; gap: 2px; margin-block-end: 6px; }
.cong-files-control__n { margin-inline-end: auto; color: #646970; font-weight: 600; }
.cong-files-control__from { margin: 6px 0 0; color: #646970; font-size: 12px; font-style: italic; }
.cong-files-control__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cong-files-control .components-base-control { margin-block-end: 8px; }