/**
 * Ilagan Christian Church — theme styles.
 *
 * theme.json owns the palette, type scale and spacing. This file owns what
 * theme.json cannot express: the header, the two-column section layouts, prose
 * rhythm, and the image placeholders.
 *
 * Typographic system, measured against esv.org and adapted:
 *   reading copy  serif, 17px / 1.66, weight 400   — paragraphs and lists
 *   headings      sans, small and quiet            — h2 is 20px, not 32px
 *   hero only     serif, 34–48px, weight 400       — the one large thing
 *   eyebrows      sans, 13px, uppercase, gold
 * The restraint is the point: when headings stop shouting, the reading copy
 * carries the page.
 */

/* ---------------------------------------------------------------- foundation */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--deep);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	text-decoration: none;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* -------------------------------------------------------------------- header */

.icc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--ground) 90%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.icc-header .wp-block-site-logo img {
	display: block;
	height: 42px;
	width: auto;
}

/* The wordmark is set in capitals in a Trajan-style face (Trajan Pro when the
   viewer has it, the self-hosted Cinzel otherwise) and sized to sit level with
   the logo rather than dominate it. Optical centring: capitals have no
   descenders, so the line sits a hair high without the nudge. */
.icc-header .wp-block-site-title {
	white-space: nowrap;
	transform: translateY(1px);
}

@media (max-width: 47.999em) {
	.icc-header .wp-block-site-title {
		font-size: 0.75rem;
		white-space: normal;
		max-width: 12rem;
	}
}

.icc-header .wp-block-navigation {
	gap: clamp(0.85rem, 1.9vw, 1.6rem);
}

.icc-header .wp-block-navigation-item__content {
	padding-block: 0.3rem;
	border-bottom: 1.5px solid transparent;
}

.icc-header .current-menu-item > .wp-block-navigation-item__content,
.icc-header .current_page_parent > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.icc-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	box-shadow: 0 14px 30px rgba(28, 28, 26, 0.09);
	padding: 0.3rem 0;
	min-width: 13.5rem;
}

.icc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 1rem;
	border-bottom: 0;
}

/* -------------------------------------------------------------------- footer */

.icc-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--ground-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.85;
}

.icc-footer a {
	text-decoration: none;
	color: var(--wp--preset--color--ink-soft);
}

.icc-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.icc-footer h2,
.icc-footer h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.85rem;
}

.icc-footer p {
	font-family: var(--wp--preset--font-family--sans);
}

.icc-footer .wp-block-navigation {
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
	font-size: 0.875rem;
}

/* The Explore list runs in two columns. Keeping it a single Navigation block
   means the church still edits one menu in the Site Editor; the grid is what
   splits it, filling left to right. */
.icc-footer__explore .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem 1.5rem;
	align-items: start;
}

.icc-footer .wp-block-site-logo img {
	height: 46px;
	width: auto;
}

/* The footer carries the wordmark as well as the mark, in the same Trajan-style
   face as the header (core/site-title in theme.json), a size larger. */
.icc-footer__brand {
	align-items: center;
	margin-bottom: 1rem;
}

/* The site title renders as a <p>, and `.icc-footer p` above is one element
   more specific than theme.json's `.wp-block-site-title`, so without restating
   it here the footer wordmark quietly falls back to the sans face while the
   header keeps its Trajan-style capitals. */
.icc-footer p.wp-block-site-title,
.icc-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Social marks. Hand-written rather than core's social-links block: the block
   has no Messenger service, and these need to be bigger than its icon sizes go. */
.icc-footer__social {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.icc-footer__social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--wp--preset--color--deep);
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--line);
	transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.icc-footer__social a:hover,
.icc-footer__social a:focus-visible {
	color: var(--wp--preset--color--teal);
	border-color: currentColor;
	transform: translateY(-1px);
}

.icc-footer__social svg {
	width: 22px;
	height: 22px;
	display: block;
}

.icc-footer__legal {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------- prose */

/* One measure for the whole site. theme.json sets contentSize and wideSize to
   the same 80rem the header runs at, so a title, a paragraph, a two-column
   section and the navigation all share one left and right edge on every page.
   Reading copy is deliberately NOT capped to a narrower column: the client
   asked for descriptions to run the full width rather than be cut short.
   Core's constrained layout centres direct children with `margin: auto
   !important`; overriding it with the same weight keeps the left edge fixed
   should a block ever be narrower than the container. */
.entry-content.is-layout-constrained > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-details, .wp-block-separator) {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Headings sit close to what follows and far from what precedes, so a section
   reads as one block rather than an evenly spaced list. */
.entry-content > :is(h2, h3, h4) {
	margin-top: 2.75rem;
	margin-bottom: 0.6rem;
}

.entry-content > h2 {
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.entry-content > :is(h2, h3, h4) + * {
	margin-top: 0;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content li + li {
	margin-top: 0.3rem;
}

.icc-lede,
.is-style-icc-lede {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.is-style-icc-eyebrow,
.icc-eyebrow {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.7rem;
	line-height: 1.5;
}

/* An eyebrow that is also a link is still an eyebrow: the underline turns it
   into a stray piece of body copy above the heading. */
.is-style-icc-eyebrow a,
.icc-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.is-style-icc-eyebrow a:hover,
.icc-eyebrow a:hover {
	color: var(--wp--preset--color--deep);
	text-decoration: underline;
}

.is-style-icc-panel {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
}

.is-style-icc-framed img {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
}

/* ---------------------------------------------------------------------- hero */

.icc-hero {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.icc-times {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
}

.icc-times__item {
	padding: 0.3rem 0;
}

.icc-times__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.icc-times__value {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ------------------------------------------------------------------ sections */

.icc-section {
	padding-block: var(--wp--preset--spacing--70);
}

.icc-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.icc-section--soft {
	background: var(--wp--preset--color--ground-soft);
}

.icc-section--sky {
	background: var(--wp--preset--color--sky-soft);
}

.icc-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.85rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.icc-section__head h2 {
	margin: 0;
}

.icc-section__head p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
}

/* --------------------------------------------------- two-column feature rows */

/* The group block's flow layout adds a top margin to every sibling after the
   first. On a grid container that pushes the second column down, so it is
   cancelled here rather than fought with blockGap on every instance. */
.icc-feature > * + *,
.icc-cols > * + * {
	margin-block-start: 0;
}

/* The esv.org pattern: a picture on one side, a column of copy on the other,
   alternating down the page. Copy fills its column; the grid, not a character
   cap, decides the measure. */
.icc-feature {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.icc-feature + .icc-feature {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.icc-feature__copy > :first-child {
	margin-top: 0;
}

.icc-feature__copy > :last-child {
	margin-bottom: 0;
}

/* On one column the heading should arrive before the picture, whichever side
   the picture takes on a wide screen. Source order stays media-first so the
   desktop flip rules read naturally. */
@media (max-width: 47.999em) {
	.icc-feature__media {
		order: 2;
	}
}

@media (min-width: 48em) {
	.icc-feature {
		grid-template-columns: 1fr 1fr;
	}

	/* Source order stays media-then-copy so the markup reads sensibly and the
	   phone layout is right; the flip is presentational only. */
	.icc-feature--flip .icc-feature__media {
		order: 2;
	}

	/* The width modifiers name the CONTENT that should be wider, not a track
	   position — so they have to account for the flip, which swaps which track
	   each column lands in. */
	.icc-feature--wide-media {
		grid-template-columns: 1.25fr 1fr;
	}

	.icc-feature--wide-media.icc-feature--flip {
		grid-template-columns: 1fr 1.25fr;
	}

	.icc-feature--wide-copy {
		grid-template-columns: 1fr 1.25fr;
	}

	.icc-feature--wide-copy.icc-feature--flip {
		grid-template-columns: 1.25fr 1fr;
	}
}

/* Two columns of plain prose, for pages with no picture to show. */
.icc-cols {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 46em) {
	.icc-cols--2 {
		grid-template-columns: 1fr 1fr;
	}

	.icc-cols--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	/* minmax(0, 1fr), not 1fr: a grid track's implicit minimum is auto, so a
	   wide child -- a table, a scrolling strip, a long unbroken string --
	   pushes the track past the container instead of being clipped or scrolled
	   inside it, and the whole page gains a horizontal scrollbar. The roster
	   table found this. */
	.icc-cols--aside {
		grid-template-columns: minmax(0, 1fr) 17rem;
	}

	.icc-cols--index {
		grid-template-columns: 14rem minmax(0, 1fr);
	}
}

.icc-cols > * > :first-child {
	margin-top: 0;
}

/* Same reason as the track above: a grid item's own implicit minimum is its
   content, so the column has to be told it may be narrower than what is in it. */
.icc-cols > * {
	min-width: 0;
}

/* A sticky contents list beside a long document. Falls back to a normal block
   at the top of the page on narrow screens, where sticky would eat the view. */
.icc-index {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.45;
}

.icc-index__title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.85rem;
}

.icc-index ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: icc-index;
}

.icc-index li {
	counter-increment: icc-index;
	margin-bottom: 0.5rem;
}

.icc-index a {
	display: flex;
	gap: 0.6rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.icc-index a::before {
	content: counter(icc-index);
	flex: none;
	width: 1.35rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.icc-index a:hover {
	color: var(--wp--preset--color--deep);
}

@media (min-width: 46em) {
	.icc-index {
		position: sticky;
		top: 5.5rem;
		align-self: start;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
	}
}

/* A quiet bordered box for supporting information beside the main column. */
.icc-aside {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.6;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 1.35rem 1.4rem;
	background: var(--wp--preset--color--ground-soft);
}

.icc-aside h2,
.icc-aside h3 {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.7rem;
}

.icc-aside p:last-child {
	margin-bottom: 0;
}

@media (min-width: 46em) {
	/* align-self matters as much as the sticky here: a grid item stretches to
	   the row by default, so the panel was drawing its border and its ground
	   the full height of a long main column with the content at the top, and
	   sticky had nothing to do because the box already reached the bottom. */
	.icc-aside--sticky {
		position: sticky;
		top: 5.5rem;
		align-self: start;
	}
}

/* The "at a glance" panel beside a ministry page. */
.icc-detail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-detail__list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.icc-detail__list li:last-child {
	border-bottom: 0;
}

.icc-detail__label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.15rem;
}

.icc-detail__label svg {
	color: var(--wp--preset--color--accent);
}

.icc-detail__value {
	display: block;
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------- image placeholders */

.icc-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	/* Both of these are load-bearing (2026-09-15). border-box keeps the padding
	   inside the aspect-ratio box rather than adding it to the ratio, and an
	   explicit width makes the width the definite dimension -- so max-height
	   below clamps the height and leaves the width alone. Without them the cap
	   shrank the frame sideways too and it stopped short of its column. */
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1.25rem;
	text-align: center;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent);
	border-radius: 3px;
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 9px,
			color-mix(in srgb, var(--wp--preset--color--muted) 6%, transparent) 9px 10px
		),
		var(--wp--preset--color--ground-soft);
	color: var(--wp--preset--color--muted);
	overflow: hidden;
}

/* A tall ratio in a wide column produces an enormous box; the cap keeps any
   placeholder to a sensible share of the viewport. A portrait frame ends up
   shorter than its declared ratio, which is fine for a placeholder. */
.icc-ph {
	max-height: 22rem;
}

.icc-ph--round {
	border-radius: 50%;
	max-height: none;
}

.icc-ph__mark {
	display: inline-flex;
	opacity: 0.55;
}

.icc-ph__caption {
	font-family: var(--wp--preset--font-family--sans);
	max-width: 26ch;
}

.icc-ph__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.4;
}

.icc-ph__note {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	margin-top: 0.3rem;
}

/* Very small frames (portraits in a row) have no room for the note. */
.icc-ph--round .icc-ph__note {
	display: none;
}

.icc-ph-row {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40em) {
	.icc-ph-row--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.icc-ph-row--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------- post & query lists */

.icc-postlist .wp-block-post-title {
	font-size: 1.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	letter-spacing: -0.005em;
	margin: 0 0 0.3rem;
}

.icc-postlist .wp-block-post-excerpt {
	font-size: 1rem;
}

.icc-postlist .wp-block-post-template > li {
	padding-bottom: 1.85rem;
	margin-bottom: 1.85rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.icc-postlist .wp-block-post-template > li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

/* The announcements column on the home page is a list of links, not articles. */
.icc-postlist--compact .wp-block-post-title {
	font-size: 1.0625rem;
}

.icc-postlist--compact .wp-block-post-template > li {
	padding-bottom: 1.1rem;
	margin-bottom: 1.1rem;
}

.wp-block-post-featured-image img {
	border-radius: 3px;
}

.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	padding-top: 1.85rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* --------------------------------------------------------------- sermon page */

.icc-meta--lead {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.icc-sermon-notes {
	margin-top: 1.1rem;
}

.icc-event-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 1.25rem 1.35rem;
	background: var(--wp--preset--color--ground-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
}

.icc-event-details .icc-card__meta li {
	align-items: flex-start;
	padding: 0.3rem 0;
}

.icc-event-details .icc-icon {
	color: var(--wp--preset--color--accent);
	margin-top: 0.25em;
}

/* --------------------------------------------------------------------- misc */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.9rem 0;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::before {
	content: "+";
	flex: none;
	width: 1rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.wp-block-details[open] summary::before {
	content: "–";
}

.wp-block-details > *:not(summary) {
	margin-left: 1.65rem;
	font-size: 1rem;
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

@media print {
	.icc-header,
	.icc-footer,
	.icc-tabs,
	.icc-index,
	.icc-calendar__nav {
		display: none !important;
	}
}

/* ------------------------------------------------------ round 8 (2026-09-15) */

/* The footer sits on the bottom of the screen even when the page is short.
   A page skeleton is header / main / footer, so one flex column with a
   viewport minimum and a main that grows is the whole rule. Before this a
   two-paragraph page ended with the footer halfway up and white underneath. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Flex items do not collapse their margins against each other the way blocks
   do, so the theme's 1.35rem between top-level children would now be a real
   gap under the header. The header and the footer set their own spacing. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block: 0;
}

/* A heading that is a link is still a heading. The global underline turned
   "What we believe" into a line of body copy. Colour carries the hover. */
:where(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

/* A description belongs to the heading above it. The flow layout gave the gap
   between a title and its sentence the same 1.35rem as the gap between two
   unrelated pairs, so "Start here" read as four separate things rather than
   two pairs. Tightening the first half is what makes the pairing visible. */
:where(.is-layout-flow, .is-layout-constrained) > :where(h2, h3, h4, h5, h6) + :where(p, ul, ol) {
	margin-block-start: 0.45rem;
}

/* ------------------------------------------------ people, with their faces */

/* The pastors and the board of trustees: a portrait, a name and a title, in a
   grid that reflows rather than a fixed row (2026-09-15). The photographs are
   still frames naming who belongs in them -- the church has not taken them
   yet, and a grey box that says "Chairman" is an instruction where a stock
   photograph would be a lie. */
.icc-people {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 46em) {
	.icc-people--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.icc-people--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The flow layout puts 1.35rem above every child but the first, which inside
   a grid means every portrait except the top-left one starts a line lower than
   its neighbours -- and inside a person it would push the name away from the
   face it belongs to. */
.icc-people > *,
.icc-person > * {
	margin-block-start: 0;
}

.icc-person__name {
	font-size: var(--wp--preset--font-size--medium);
	margin-block-start: 0.8rem;
}

.icc-person__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-block-start: 0.15rem;
}

/* ------------------------------------------------------------------- misc */

/* A QR code is a small square, and a constrained group would centre it in the
   column while every line above it starts on the left (2026-09-15). Capping the
   width here instead leaves it on the same left edge as the copy. */
.icc-qr .icc-ph {
	max-width: 15rem;
}

/* Two columns that start where the page's content starts, so the side panel's
   top edge lines up with the page heading rather than with whatever paragraph
   happened to be above the columns. */
.icc-cols--flush {
	margin-block-start: 0;
}