/**
 * Championship Qualifiers Section (.champ-qualifiers)
 *
 * Region-card grid that lives in the schedule slot before the bracket
 * is released. Two division panels (M/W) toggle via the .champ-tabs
 * primitive (CSS in champ-tabs.css, JS in champ-tabs.js).
 *
 * Layout:
 *   mobile (default)    1 column
 *   tablet  (>=600px)   2 columns
 *   desktop (>=1024px)  3 columns
 *
 * All values via theme tokens — colors, spacing, fonts inherit from
 * theme.json presets so this section feels native to the championship
 * design system.
 *
 * Specificity note: legacy style.css's `.site-content p, .site-content li`
 * rule (0,1,1) and `.wp-block-group h4` rule (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 the rest
 * of championship.css.
 *
 * @package USA_Ultimate
 */

.championship-content {

	/* ==========================================================================
	   Section wrapper
	   .champ-qualifiers gets `padding-block` from a JSON spacing attribute on
	   the section wrapper — only the inline gutters and inner max-width are
	   handled here.
	   ========================================================================== */

	.champ-qualifiers__inner {
		max-width: 1204px;
		margin: 0 auto;
	}

	/* ==========================================================================
	   Tabs container override
	   The .champ-tabs primitive provides the tab bar styling. We just need to
	   give it a little breathing room above the grid and ensure it spans the
	   full inner width.
	   ========================================================================== */

	.champ-qualifiers__tabs {
		width: 100%;
	}

	/* ==========================================================================
	   Region rows (core/columns)
	   Layout is handled natively by core/columns: 3-up on desktop, stacks
	   on mobile (WP's default `isStackedOnMobile`). We only need to add
	   vertical spacing between stacked Columns rows.
	   ========================================================================== */

	.champ-qualifiers .wp-block-columns {
		margin-block: 0;

		& + .wp-block-columns {
			margin-top: var(--wp--preset--spacing--60);
		}
	}

	/* ==========================================================================
	   Region card
	   White card on the off-white section bg. Subtle shadow (matching
	   .champ-schedule__card) so the card feels lifted but not loud. Padding
	   is compact — the card's job is to list a handful of teams, not be a
	   showcase.
	   ========================================================================== */

	.champ-qualifiers__region {
		background: var(--wp--preset--color--white);
		border-radius: 4px;
		padding: var(--wp--preset--spacing--50);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		transition: box-shadow 0.2s ease;

		&:hover {
			box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
		}
	}

	/* Region name — h3 in the markup. Red, uppercase, italic — echoes the
	   condensed-italic heading language used by section h2s. */
	.champ-qualifiers__region-name {
		font-family: var(--wp--preset--font-family--heading-condensed);
		font-size: var(--wp--preset--font-size--medium);
		font-style: italic;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.01em;
		color: var(--wp--preset--color--red);
		margin: 0 0 var(--wp--preset--spacing--10);
	}

	/* "Results" link — small uppercase eyebrow-style label, gray.
	   Refactor note: this is a <p> wrapping an <a>. The paragraph carries
	   the visual treatment; the inner anchor inherits color. */
	.champ-qualifiers__region-link {
		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.06em;
		color: var(--wp--preset--color--slate);
		margin: 0 0 var(--wp--preset--spacing--40);
		transition: color 0.15s ease;

		a {
			color: inherit;
			text-decoration: none;
			transition: color 0.15s ease;
		}

		a:hover {
			color: var(--wp--preset--color--charcoal);
			text-decoration: underline;
			text-underline-offset: 3px;
		}
	}

	/* Team list — ordered list with seed number marker.
	   Font-size is set directly on `li` to beat the legacy host theme rule
	   `.wp-block-group ol li { font-size: 1.125rem }` (style.css), which
	   targets li directly and so wins over `font-size` inherited from the
	   parent <ol>. */
	.champ-qualifiers__teams {
		list-style: decimal;
		list-style-position: outside;
		padding-left: 1.25rem;
		margin: 0;
		color: var(--wp--preset--color--charcoal);
	}

	.champ-qualifiers__teams li {
		font-size: var(--wp--preset--font-size--xs);
		line-height: 1.5;
		padding: var(--wp--preset--spacing--10) 0;
		border-bottom: 1px solid var(--wp--preset--color--light-gray);

		&:last-child {
			border-bottom: none;
		}

		&::marker {
			color: var(--wp--preset--color--blue);
			font-weight: 700;
		}
	}

	.champ-qualifiers__teams a {
		color: var(--wp--preset--color--blue);
		font-weight: 600;
		text-decoration: none;
		transition: color 0.15s ease;

		&:hover {
			color: var(--wp--preset--color--bright-red);
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}

	/* Seed suffix (e.g. "NW1") — supplementary metadata next to each team.
	   One step smaller than the team name, mid-gray, weight 600. */
	.champ-qualifiers__teams .champ-qualifiers__seed {
		font-size: 0.85em;
		font-weight: 600;
		color: var(--wp--preset--color--mid-gray);
		margin-left: 0.25em;
	}

	/* "View Current College Rankings" CTA — outline-blue button sits below
	   the grid. Spacing handled by the JSON margin attribute on the
	   wp:buttons block; this block just needs centering belt-and-suspenders
	   in case the editor strips the layout. */
	.champ-qualifiers .wp-block-buttons {
		justify-content: center;
	}

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