/* SEASA page layouts — the nine screens.
   Breakpoints follow the design spec: 700px for the two-column splits,
   1100px for the wide gutters, 1180px for the header. */


/* =========================================================================
   Home — hero
   ========================================================================= */

.seasa-hero {
	background: var(--grad-sky);
	border-bottom: 1px solid var(--border-subtle);
	padding-block: var(--space-12);
}

.seasa-hero__grid { display: grid; gap: var(--space-8); align-items: center; }

.seasa-hero__eyebrow { margin: 0 0 var(--space-3); }

.seasa-hero__title {
	margin: 0 0 var(--space-4);
	max-width: 20ch;
}

.seasa-hero__intro {
	margin: 0 0 var(--space-6);
	max-width: 56ch;
	font-size: var(--fs-body-lg);
	color: var(--text-body);
}

.seasa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 700px) {
	.seasa-hero__grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
}


/* =========================================================================
   Section scaffolding
   ========================================================================= */

.seasa-grid { display: grid; gap: var(--space-5); }
.seasa-grid--2 { grid-template-columns: 1fr; }
.seasa-grid--3 { grid-template-columns: 1fr; }
.seasa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 700px) {
	.seasa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.seasa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.seasa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.seasa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The two-column page split used by Rankings and Contact. */
.seasa-split { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) {
	.seasa-split { grid-template-columns: 1.6fr 1fr; align-items: start; }
	.seasa-split--even { grid-template-columns: 1fr 1fr; }
}

/* Hairline row lists — members on Home, committees on Governance. */
.seasa-rows { display: grid; }
.seasa-row-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-4);
	border-top: 1px solid var(--border-subtle);
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-fast) var(--ease-out);
}
.seasa-row-item:first-child { border-top: none; }
a.seasa-row-item:hover { background: var(--blue-50); }
.seasa-row-item__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.seasa-row-item__name {
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
}
.seasa-row-item__meta { font-size: var(--fs-caption); color: var(--text-muted); }

@media (min-width: 700px) {
	.seasa-rows--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-8);
	}
	/* With two columns the first item in each column needs its rule back. */
	.seasa-rows--2col > .seasa-row-item:nth-child(2) { border-top: none; }
}


/* =========================================================================
   Icon wells inside "what we do" cards
   ========================================================================= */

.seasa-feature { display: grid; gap: var(--space-3); align-content: start; }
.seasa-feature__title { margin: 0; }
.seasa-feature__body { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }


/* =========================================================================
   Calendar table — a grid, not a wide HTML table; rows stack on phones
   ========================================================================= */

.seasa-calendar {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-card);
	box-shadow: var(--shadow-sm);
}

.seasa-calendar__head {
	display: none;
	padding: var(--space-3) var(--space-5);
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--blue-100);
	font-family: var(--font-display);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.seasa-calendar__head:lang(th) { text-transform: none; letter-spacing: 0; }

.seasa-calendar__row {
	display: grid;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border-subtle);
	background: transparent;
	text-align: left;
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-fast) var(--ease-out);
}
.seasa-calendar__row:first-of-type { border-top: none; }
.seasa-calendar__row:hover { background: var(--blue-50); }

.seasa-calendar__date {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: var(--text-body);
	font-variant-numeric: tabular-nums;
}
.seasa-calendar__event { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.seasa-calendar__name {
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
}
.seasa-calendar__venue { font-size: var(--fs-body-sm); color: var(--text-muted); }
.seasa-calendar__grade {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: var(--brand-primary);
}
.seasa-calendar__status { justify-self: start; }

@media (min-width: 900px) {
	.seasa-calendar__head,
	.seasa-calendar__row {
		grid-template-columns: 150px 1.4fr 1fr 130px 130px;
		align-items: center;
		gap: var(--space-4);
	}
	.seasa-calendar__head { display: grid; }
	.seasa-calendar__status { justify-self: start; }
}


/* =========================================================================
   Points scale
   ========================================================================= */

.seasa-points__value {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: var(--fw-bold);
	color: var(--brand-primary);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.seasa-points__grade {
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-strong);
}
.seasa-points__rule { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }


/* =========================================================================
   Rankings sidebar — points by nation
   ========================================================================= */

.seasa-nation-points { display: grid; gap: var(--space-3); }
.seasa-nation-points__row { display: flex; align-items: center; gap: var(--space-3); }
.seasa-nation-points__bar {
	flex: 1;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--ink-100);
	overflow: hidden;
}
.seasa-nation-points__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--brand-secondary);
}
.seasa-nation-points__total {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: var(--blue-900);
	min-width: 56px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.seasa-rankings__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
}


/* =========================================================================
   Constitution — articles plus a sticky at-a-glance card
   ========================================================================= */

.seasa-article {
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-6);
	border-top: 1px solid var(--border-subtle);
}
.seasa-article:first-child { border-top: none; padding-top: 0; }
/* Same accessibility deviation as .seasa-eyebrow: the reference sets this in
   --brand-secondary, which is 3.53:1 on white at 13px. --blue-700 is 5.62:1. */
.seasa-article__number {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	color: var(--blue-700);
}
.seasa-article__title { margin: 0; }
.seasa-article__body {
	margin: 0;
	max-width: 66ch;
	font-size: var(--fs-body-sm);
	color: var(--text-body);
}

/* A member association's own mark, sitting above its details. It is their
   artwork: shown as supplied, never recoloured, never cropped, and capped so a
   wide wordmark and a square badge both sit comfortably. */
/* A white plate behind the mark. Some associations supply a transparent PNG and
   some a solid-background JPEG; the plate lets both sit on the tinted card
   without touching the artwork itself. */
.seasa-orglogo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}
.seasa-orglogo img {
	max-width: min(100%, 176px);
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.seasa-glance { display: grid; gap: var(--space-3); }
.seasa-glance__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--blue-100);
	font-size: var(--fs-body-sm);
}
.seasa-glance__row:last-child { border-bottom: none; padding-bottom: 0; }
.seasa-glance__label { color: var(--text-muted); }
.seasa-glance__value { color: var(--text-strong); font-weight: var(--fw-semibold); text-align: right; }

@media (min-width: 1000px) {
	.seasa-sticky { position: sticky; top: calc(var(--seasa-header-h) + var(--space-4)); }
}


/* =========================================================================
   History — 72px year rail
   ========================================================================= */

.seasa-history { display: grid; }
.seasa-history__item {
	display: grid;
	gap: var(--space-1);
	padding-block: var(--space-5);
	border-top: 1px solid var(--border-subtle);
}
.seasa-history__item:first-child { border-top: none; }
.seasa-history__year {
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	color: var(--brand-primary);
}
.seasa-history__title { margin: 0; }
.seasa-history__body { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); max-width: 66ch; }

@media (min-width: 700px) {
	.seasa-history__item {
		grid-template-columns: 72px 1fr;
		column-gap: var(--space-6);
	}
	.seasa-history__year { grid-row: span 2; }
}


/* =========================================================================
   Committees — three columns from 700px
   ========================================================================= */

.seasa-committee { display: grid; gap: var(--space-2); }
.seasa-committee__remit { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.seasa-committee__chair { font-size: var(--fs-body-sm); color: var(--text-body); }
.seasa-committee__count { font-size: var(--fs-caption); color: var(--text-muted); }

@media (min-width: 700px) {
	.seasa-committee {
		grid-template-columns: 220px 1fr 200px;
		gap: var(--space-6);
		align-items: start;
	}
}


/* =========================================================================
   Governance — board cards
   ========================================================================= */

.seasa-person { display: grid; gap: var(--space-3); align-content: start; }
.seasa-person__head { display: flex; align-items: center; gap: var(--space-3); }
.seasa-person__names { display: grid; gap: 2px; min-width: 0; }
.seasa-person__name {
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
}
.seasa-person__local { font-size: var(--fs-caption); color: var(--text-muted); }
.seasa-person__rows { display: grid; gap: var(--space-2); }
.seasa-person__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--fs-caption);
}
.seasa-person__row dt { color: var(--text-muted); margin: 0; }
.seasa-person__row dd { color: var(--text-body); margin: 0; text-align: right; }


/* =========================================================================
   Contact
   ========================================================================= */

.seasa-channel { display: flex; align-items: flex-start; gap: var(--space-4); }
.seasa-channel__text { display: grid; gap: 2px; min-width: 0; }
.seasa-channel__label {
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-strong);
}
.seasa-channel__value { font-size: var(--fs-body-sm); color: var(--text-body); word-break: break-word; }
.seasa-channel__value a { color: var(--text-link); }

.seasa-form { display: grid; gap: var(--space-5); }


/* =========================================================================
   News lead article
   ========================================================================= */

.seasa-lead-article { display: grid; gap: var(--space-5); }
.seasa-lead-article__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.seasa-lead-article__title { margin: 0; max-width: 32ch; }
.seasa-lead-article__excerpt {
	margin: 0;
	max-width: 66ch;
	font-size: var(--fs-body-lg);
	color: var(--text-body);
}


/* =========================================================================
   Filter bar
   ========================================================================= */

.seasa-filters {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}
@media (min-width: 700px) {
	.seasa-filters--inline {
		grid-template-columns: 220px 1fr;
		align-items: center;
	}
}