/* ==========================================================================
   Sponsor page (601) — icon row, sticky nav, event sections, pricing tables.
   Owned by Cole (builder). Shared classes (.page-title-bar, .clipped-corner)
   live in creda.css (Mason). Everything here is sponsor-scoped.
   ========================================================================== */

/* --- Event icon row (S1) --------------------------------------------------- */
.sponsor-iconrow {
	background: #fff;
	padding: 55px 0 45px;
}
.sponsor-iconrow__cols {
	gap: 1.5rem;
	max-width: 1200px;
	margin-inline: auto;
	align-items: flex-start;
}
.sponsor-iconrow__cols .wp-block-column { flex-basis: 0; }
.sponsor-icon { margin: 0; }
.sponsor-icon img {
	max-width: 120px;
	width: 100%;
	height: auto;
	transition: transform .25s ease;
}
.sponsor-icon a:hover img { transform: translateY(-4px); }
.sponsor-icon__label {
	margin: 14px 0 0;
	color: #666;
	font-family: Inter, sans-serif;
	font-size: 20px;
	line-height: 1.2;
}

/* --- Sticky compact nav (S2) — revealed on scroll (capture-safe) ----------- */
/* Sticky compact icon nav — fixed below the header, hidden at the top, revealed on
   scroll by assets/js/pages/sponsor.js (reliable JS reveal, not a scroll-driven
   animation that would sit behind the fixed header). Jumps to each event section. */
.compact-sponsor-nav {
	position: fixed;
	top: 84px;                /* JS sets this to the live header height */
	left: 0;
	right: 0;
	z-index: 8000;            /* under .site-header (9000) so it tucks below it */
	justify-content: space-around !important;  /* spread icons full-width (beat the block's center justify) */
	gap: 0;
	padding: 8px 3vw;
	background: #fff;
	box-shadow: 0 2px 10px rgba(1, 58, 73, .12);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .3s ease, transform .3s ease;
}
.compact-sponsor-nav.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.compact-sponsor-nav__icon { margin: 0; }
.compact-sponsor-nav__icon img {
	max-height: 50px;
	width: auto;
	transition: transform .2s ease;
}
.compact-sponsor-nav__icon a:hover img { transform: translateY(-3px); }

/* --- Event sections (S3–S8) ------------------------------------------------ */
.sponsor-sec {
	padding: 135px 0;
}
.sponsor-sec > .wp-block-columns,
.sponsor-sec > .wp-block-heading,
.sponsor-sec > p { margin-inline: auto; }
.sponsor-sec--dark  { background: #013A49; color: #fff; }
.sponsor-sec--teal  { background: #039CA2; color: #fff; }
.sponsor-sec--white { background: #fff;    color: #666; }
.sponsor-sec p { font-size: 18px; line-height: 1.6; }
.sponsor-sec--dark a, .sponsor-sec--teal a { color: #fff; }

/* Section headings */
.sponsor-h4 {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 45px;
	line-height: 1.1;
	margin: 0 0 .5em;
}
.sponsor-h4--sm { font-size: 40px; margin-top: 1.6em; }
.sponsor-h4--closed { font-size: 32px; }
.sponsor-sec--dark  .sponsor-h4 { color: #C4F2F2; }
.sponsor-sec--teal  .sponsor-h4 { color: #C4F2F2; }
.sponsor-sec--white .sponsor-h4 { color: #039CA2; }

.sponsor-head-row { margin-bottom: 2.2em; }
.sponsor-sublist { margin: .3em 0 1.2em; padding-left: 1.4em; }
.sponsor-sublist li { margin: .2em 0; }
.sponsor-note { font-size: 15px; color: #666; margin-top: 1.2em; }
.sponsor-sec--white .sponsor-note a { color: #039CA2; }

/* --- Buttons --------------------------------------------------------------- */
.sponsor-btn .wp-block-button__link {
	background-color: #039CA2;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 25px;
	font-weight: 600;
	border: 0;
	border-radius: 0;
	padding: 14px 55px;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sponsor-btn .wp-block-button__link:hover {
	background-color: #027a7f;
	transform: translateY(-3px);
	box-shadow: 0 9px 22px rgba(1, 58, 73, .28);
}
.sponsor-btn--dark .wp-block-button__link { background-color: #013A49; }
.sponsor-btn--dark .wp-block-button__link:hover {
	background-color: #01252f;
	box-shadow: 0 9px 22px rgba(0, 0, 0, .3);
}

/* --- Pricing tables (.equal-pricing) --------------------------------------- */
.equal-pricing.wp-block-columns {
	gap: 0;
	/* Contain the card group (live: ~1520px centered) so it doesn't run to the
	   section edges — gives the cards (and their bullets) proper side margin. */
	margin: 1.5em auto 0;
	max-width: 1520px;
	flex-wrap: wrap;
	align-items: stretch;
}
.equal-pricing--two,
.equal-pricing--one { justify-content: flex-start; }
.equal-pricing--two .equal-pricing__table,
.equal-pricing--one .equal-pricing__table {
	flex: 0 0 25%;
	max-width: 25%;
}
.equal-pricing__table {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(127, 127, 127, .35);
	/* Live: every pricing card floats as a near-white unit on the section bg
	   (navy/teal/white), with #666 benefit text — not the section colour showing through. */
	background: #fcfcfc;
	transition: transform .25s ease, box-shadow .25s ease;
}
/* Subtle lift on hover — raise above adjacent (gap:0) cards so the shadow reads. */
.equal-pricing__table:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 30px rgba(1, 58, 73, .28);
	position: relative;
	z-index: 2;
}
.equal-pricing__head {
	background: #013A49;
	color: #fff;
	text-align: center;
	padding: 20px 16px;
	min-height: 108px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.equal-pricing__title {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 27px;
	line-height: 1.12;
	color: #fff;
	margin: 0;
}
.equal-pricing__sub {
	font-size: 15px;
	margin: 0;
	color: #fff;
	opacity: .95;
}
/* Scoped under .sponsor-sec so it out-specifies `.sponsor-sec p { font-size:18px }`
   (0,1,1) which was shrinking the number and leaving the $ (.cur, 0,2,0) larger —
   the inverted look. Now the number is the large focal value, $ the small superscript. */
.sponsor-sec .equal-pricing__price {
	background: #C4F2F2;
	color: #013A49;
	text-align: center;
	font-family: Roboto, Inter, sans-serif;
	font-weight: 400;
	font-size: 62px;
	line-height: 1;
	margin: 0;
	padding: 34px 10px;
	white-space: nowrap;
}
.equal-pricing__price .cur {
	font-size: 34px;
	font-weight: 400;
	vertical-align: 16px;
	margin-right: 1px;
}
.equal-pricing__body {
	margin: 0;
	padding: 24px 22px 24px 32px;   /* left 32px so bullets have a clear left margin (live ~30) */
	list-style: disc;
	color: #666;   /* readable on the near-white card body, all sections (live) */
	font-size: 15px;
	line-height: 1.5;
	flex: 1 1 auto;
}
.equal-pricing__body li { margin: 0 0 .85em; padding-left: 4px; }
.equal-pricing__body li::marker { color: #039CA2; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
	.sponsor-sec { padding: 80px 0; }
	.sponsor-h4 { font-size: 34px; }
	.sponsor-h4--sm { font-size: 30px; }
	/* Icon row: 6-across → 3×2 grid (matches live tablet). is-not-stacked-on-mobile
	   on the block stops WP core force-stacking; we cap width at one-third. */
	.sponsor-iconrow__cols { flex-wrap: wrap; }
	.sponsor-iconrow__cols > .wp-block-column {
		flex: 0 0 33.333% !important;
		max-width: 33.333%;
	}
	.equal-pricing__table,
	.equal-pricing--two .equal-pricing__table,
	.equal-pricing--one .equal-pricing__table {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.sponsor-sec .equal-pricing__price { font-size: 48px; }
}
@media (max-width: 767px) {
	/* Live hides the top icon row AND the sticky compact nav on mobile — match it
	   (also prevents the compact nav's 6 icons overflowing 390px). */
	.sponsor-iconrow { display: none; }
	/* !important beats WP core's `.wp-block-group-is-layout-flex{display:flex}` (same
	   specificity, loads later) — without it the fixed compact nav shows on mobile. */
	.compact-sponsor-nav { display: none !important; }
	.sponsor-btn .wp-block-button__link { font-size: 19px; padding: 12px 30px; }
	/* Comfortable side gutter so content doesn't touch the screen edge (matches live). */
	.sponsor-sec { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
	.sponsor-icon__label { font-size: 15px; }
	.equal-pricing__table,
	.equal-pricing--two .equal-pricing__table,
	.equal-pricing--one .equal-pricing__table {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* --- 2026-09 sponsor-page update (Erica's list) ---------------------------- */
/* Half-page / narrow-window cleanup: when a tier title wraps to two lines its
   card head grows and the cyan price bands no longer line up across the row —
   the "clunky" look. Lay each card out on a shared subgrid so head, price and
   bullets align across every card in the row, whatever wraps. */
@supports (grid-template-rows: subgrid) {
	.equal-pricing.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: auto;
		align-items: stretch;
	}
	.equal-pricing--three.wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.equal-pricing.wp-block-columns > .equal-pricing__table {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		max-width: none;
	}
	/* --one / --two: keep the 25%-per-card sizing, now as grid tracks. */
	.equal-pricing--two.wp-block-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.equal-pricing--one.wp-block-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	@media (max-width: 980px) {
		.equal-pricing.wp-block-columns,
		.equal-pricing--three.wp-block-columns,
		.equal-pricing--two.wp-block-columns,
		.equal-pricing--one.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 600px) {
		.equal-pricing.wp-block-columns,
		.equal-pricing--three.wp-block-columns,
		.equal-pricing--two.wp-block-columns,
		.equal-pricing--one.wp-block-columns { grid-template-columns: minmax(0, 1fr); }
	}
}
/* Narrow windows: title + button stack cleanly instead of a cramped two-column row. */
@media (max-width: 980px) {
	.sponsor-head-row.wp-block-columns { flex-wrap: wrap; }
	.sponsor-head-row.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100%;
	}
	.sponsor-head-row .wp-block-buttons { justify-content: flex-start !important; }
	.sponsor-head-row { margin-bottom: 1.4em; }
}
/* Nine icons now (Holiday Party, Developing Leaders, Skyline Academy added). */
.sponsor-iconrow__cols { max-width: 1500px; }
@media (max-width: 1200px) {
	.sponsor-icon__label { font-size: 16px; }
}
/* Developing Leaders: several event sub-blocks inside one section. */
.sponsor-subhead {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	margin: 2.2em 0 .3em;
	color: #013A49;
}
.sponsor-sec--white .sponsor-subhead { color: #013A49; }
.sponsor-sec--dark .sponsor-subhead, .sponsor-sec--teal .sponsor-subhead { color: #C4F2F2; }
.sponsor-subhead + p { margin-top: 0; }
/* Inline inquiry button (e.g. Project Series Tour host inquiries) sits under its text. */
.sponsor-inline-btn { margin: 1.2em 0 .5em; }
.sponsor-inline-btn .wp-block-button__link { font-size: 20px; padding: 12px 34px; }