/**
 * Championship Callahan Award Section (.champ-callahan)
 *
 * Editorial-only section. Past winners + nominees-state callout +
 * external CTA. NO ACF, NO custom JS — composition is core blocks
 * with .champ-callahan__* classNames as CSS hooks.
 *
 * Layout overview:
 *   - Section uses default white bg (sits between past-winners' photo
 *     card and the off-white sponsors strip — keeps the page rhythm
 *     readable: photo-card → editorial → off-white grid).
 *   - .champ-callahan__divisions: 2-column grid (M / W) on tablet+,
 *     stacks on mobile.
 *   - .champ-callahan__cards: vertical stack of winner cards inside
 *     each division column. Each card is photo-on-top + name/year/school.
 *   - .champ-callahan__cards--nominees: same structure but tighter
 *     (no year row, smaller photo).
 *
 * Specificity note: legacy style.css's `.site-content p, .site-content li`
 * (0,1,1) and `.wp-block-group h4` (0,1,1) sit above bare selectors.
 * Scope under `.championship-content` so native nesting adds (0,1,0)
 * and the cascade works in our favor — same pattern as champ-qualifiers.
 *
 * @package USA_Ultimate
 */

.championship-content {

	/* ==========================================================================
	   Section wrapper
	   Section uses standard --section-spacing-style padding via the section
	   sibling rhythm. Keep inline gutters via the inner max-width wrapper so
	   the section itself can be edge-to-edge if needed.
	   ========================================================================== */

	.champ-callahan {
		padding-block: var(--wp--preset--spacing--70);
		background: var(--wp--preset--color--white, #fff);
	}

	.champ-callahan__inner {
		max-width: 1204px;
		margin: 0 auto;
		padding-inline: var(--wp--preset--spacing--40);
	}

	/* ==========================================================================
	   Section sub-headings ("Past Winners", "2026 Nominees")
	   Smaller than the section h2 — uses heading family (not condensed) so
	   it reads as a section subdivision, not a competing display heading.
	   ========================================================================== */

	.champ-callahan__subhead {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 700;
		color: var(--wp--preset--color--blue);
		letter-spacing: -0.005em;
		text-align: center;
		margin: 0 0 var(--wp--preset--spacing--50);
	}

	/* ==========================================================================
	   Past Winners block — spacing between section header and pre/with-nominees
	   ========================================================================== */

	.champ-callahan__past-winners {
		margin-bottom: var(--wp--preset--spacing--70);
	}

	/* ==========================================================================
	   Divisions grid (M / W)
	   Stacks on mobile, two columns on tablet+. Generous gap so the columns
	   read as parallel lists rather than a packed grid.
	   ========================================================================== */

	.champ-callahan__divisions {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--wp--preset--spacing--70);
		}
	}

	/* Division column ("Men's" / "Women's") */
	.champ-callahan__division {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	/* Division name — small uppercase eyebrow-style label above the cards.
	   Matches the visual weight of region labels in champ-qualifiers but
	   centered for symmetry. */
	.champ-callahan__division-name {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--wp--preset--color--red);
		text-align: center;
		margin: 0 0 var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--20);
		border-bottom: 2px solid var(--wp--preset--color--light-gray, #e5e5e5);
	}

	/* ==========================================================================
	   Past-winner card — photo + year + name + school
	   Stacked vertically, photo dominates so visual recognition leads. Cards
	   are visually unboxed (no background card chrome) to let the photo and
	   name do the work — keeps the editorial feel rather than a directory.
	   ========================================================================== */

	/* Division hero photo — sits between the "Men's"/"Women's" heading and
	   the past-winners list. Full column width, modest corner rounding,
	   cropped to a landscape aspect ratio so both photos line up even if
	   the source files differ. */
	.champ-callahan__division-photo {
		margin: 0;

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 10;
			object-fit: cover;
			border-radius: 4px;
		}
	}

	.champ-callahan__cards {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}

	.champ-callahan__winner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--20);
	}

	/* Photo — square crop, fixed sizing so all cards line up regardless of
	   source image aspect ratio. object-fit:cover handles non-square photos
	   that editors upload. */
	.champ-callahan__winner-photo {
		width: 120px;
		height: 120px;
		margin: 0 0 var(--wp--preset--spacing--20);
	}

	.champ-callahan__winner-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
		display: block;
	}

	/* Year — small uppercase label sitting above the name. Functions like
	   a meta line so it doesn't compete with the name typography. */
	.champ-callahan__winner-year {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--wp--preset--color--red);
		margin: 0;
	}

	/* Name — h4 in markup. Editorial weight, blue. The visual anchor of
	   the card. */
	.champ-callahan__winner-name {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		color: var(--wp--preset--color--blue);
		letter-spacing: -0.005em;
		margin: 0;
		line-height: 1.2;
	}

	/* School — supporting line under the name. Smaller, neutral color. */
	.champ-callahan__winner-school {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--charcoal, #333);
		margin: 0;
		line-height: 1.4;
	}

	/* ==========================================================================
	   Pre-nominees callout
	   Sits below past-winners. Visible by default. Editor will Hide this
	   once nominees are announced (and unhide the with-nominees block).
	   Center-aligned so it reads as a single editorial statement.
	   ========================================================================== */

	.champ-callahan__pre-nominees {
		text-align: center;
		max-width: 640px;
		margin-inline: auto;
		margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	.champ-callahan__pre-nominees-copy {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--charcoal, #333);
		line-height: 1.6;
		margin: 0;
	}

	/* ==========================================================================
	   With-nominees state
	   Hidden by default via metadata.blockVisibility:false in the pattern.
	   Editor will toggle this on (and Hide the pre-nominees block) once
	   nominees are announced. Same divisions/grid structure as past-winners
	   but uses --nominees variant for tighter sizing.
	   ========================================================================== */

	.champ-callahan__with-nominees {
		margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	/* Nominee card variant — tighter than past-winners. No year row,
	   smaller photo. Use a grid inside each division column so we can fit
	   5 nominees comfortably without the column running too tall. */
	.champ-callahan__cards--nominees {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--40);

		@media (min-width: 480px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (min-width: 1024px) {
			/* On desktop, divisions are side-by-side. Each division gets
			   half the width — fit nominees in a 2-up grid inside it so
			   the cards stay readable. */
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.champ-callahan__nominee {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--20);
	}

	.champ-callahan__nominee-photo {
		width: 88px;
		height: 88px;
		margin: 0 0 var(--wp--preset--spacing--10);
	}

	.champ-callahan__nominee-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
		display: block;
	}

	.champ-callahan__nominee-name {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		color: var(--wp--preset--color--blue);
		margin: 0;
		line-height: 1.2;
	}

	.champ-callahan__nominee-school {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--xs);
		color: var(--wp--preset--color--charcoal, #333);
		margin: 0;
		line-height: 1.4;
	}

	/* ==========================================================================
	   External CTA — outline-blue button to callahanaward.com.
	   Centered. Top spacing belt-and-suspenders in case the editor strips
	   the layout attribute on the wp:buttons block.
	   ========================================================================== */

	.champ-callahan__cta {
		margin-top: var(--wp--preset--spacing--60);
	}

	.champ-callahan__cta .wp-block-buttons {
		justify-content: center;
	}

} /* end .championship-content specificity wrapper */