/*
 * USAI Tiers — front-end styles
 *
 * Colours come exclusively from theme tokens so dark mode "just works":
 *   --background-color, --background-color-white, --background-color-gray-*,
 *   --text-color, --text-color-gray-*, --border-color-lightest, --border-color-light,
 *   --primary-color, --primary-color-alt, --white, --tier-bg, --tier-bg2, --tier-bg3,
 *   --font-size-*, --spacing-*, --font-weight-*.
 *
 * Per the redesign PDF (USAITiers_4.9.26.pdf): no top tier cards, single
 * Compare grid with thin column dividers, and a centered orange "View All
 * Comparisons" pill button beneath it.
 */

.usai-tiers {
	background: transparent;
}

/* Hero fallback when the bv2 hero on this page hasn't had an image uploaded
 * yet via the ACF block — paint our chosen hero as a CSS background-image so
 * something always shows. The theme's section.usai-bv2 rule sets `background:
 * var(--white) !important; height: auto !important` (style.css ~7936-7941),
 * so we have to use shorthand + !important + min-height to defeat it. The
 * dark gradient guarantees the white hero text remains legible. */
body:has(.usai-tiers) section.usai-bv2:first-child {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
		url("/wp-content/uploads/San-Francisco-Airport-USAI-V2.webp") center / cover no-repeat
		var(--background-color, #1a1a1a) !important;
	min-height: clamp(320px, 38vw, 560px) !important;
	height: auto !important;
}

body:has(.usai-tiers) section.usai-bv2:first-child .usai-bv2-hero-text {
	width: 100%;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	color: var(--white, #fff);
}

.usai-tiers-wrap {
	margin: 0 auto;
	padding: 0;
	background: var(--background-color-white, #fff);
	color: var(--text-color, #231f20);
}

.usai-tiers-intro {
	background: var(--background-color-white, #fff);
	padding: 0 0 var(--spacing-lg, 20px) 0;
}

.usai-tiers-heading {
	font-size: var(--font-size-lg, 1.75rem);
	font-weight: var(--font-weight-strong, 700);
	color: var(--text-color, #231f20);
	margin: 0 0 var(--spacing-xs, 8px) 0;
}

.usai-tiers-subheading {
	color: var(--text-color-gray-darkest, #555);
	margin: 0 0 var(--spacing-xl, 32px) 0;
}

/* ---- Tier pill (shared header used by every compare column) ---- */

.usai-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 18px;
	border-radius: 999px;
	background: var(--usai-tier-bg, #777);
	color: var(--white, #fff);
	font-weight: var(--font-weight-strong, 700);
	line-height: 1;
	width: max-content;
	max-width: 100%;
	margin-left: 0;
}

.usai-tier-pill__label {
	font-size: var(--font-size-1xs, 0.875rem);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.usai-tier-pill__coins {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}

.usai-tier-pill__coin {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	color: var(--white, #fff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: var(--font-weight-strong, 700);
	line-height: 1;
}

/* ---- Compare grid ---- */

.usai-tiers-compare {
	margin-bottom: var(--spacing-2xl, 48px);
}

.usai-compare-controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 16px);
	flex-wrap: wrap;
	margin-bottom: var(--spacing-lg, 20px);
}

.usai-compare-label {
	font-size: var(--font-size-1xs, 12px);
	font-weight: var(--font-weight-strong, 700);
	color: var(--text-color, #231f20);
	text-transform: none;
	letter-spacing: 0;
}

.usai-compare-select {
	min-width: 240px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--border-color-light, #ccc);
	background: var(--background-color-white, #fff);
	color: var(--text-color, #231f20);
	font-size: var(--font-size-1xs, 0.875rem);
}

.usai-compare-modes {
	display: block;
}

.usai-compare-mode[hidden] {
	display: none !important;
}

.usai-compare-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	align-items: stretch;
}

.usai-compare-col {
	background: var(--background-color-white, #fff);
	color: var(--text-color, #231f20);
	padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 10px);
	min-height: 80px;
	border-left: 1px solid var(--border-color-lightest, #e0e0e0);
}

.usai-compare-row > .usai-compare-col:first-child {
	border-left: 0;
	padding-left: 0;
}

.usai-compare-row > .usai-compare-col:last-child {
	padding-right: 0;
}

.usai-compare-col__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 10px);
	color: var(--text-color-gray-darkest, #555);
	font-size: var(--font-size-xs, 16px);
	line-height: 1.5;
}

.usai-compare-col__body p,
.usai-compare-col__body ul {
	margin: 0;
	font-size: var(--font-size-xs, 16px);
}

/* Flush-left list rendering so each row aligns under the colored tier pill
 * with no leftover browser indent (`<ul>` defaults to padding-left: 40px). */
.usai-compare-col__body ul {
	padding-left: 0;
	list-style: none;
}

.usai-compare-col__body li {
	font-size: var(--font-size-xs, 16px);
	padding: 2px 0;
}

.usai-compare-col__body li + li {
	margin-top: 0;
}

.usai-compare-col__body h5 {
	font-size: var(--font-size-xs, 16px);
	font-weight: var(--font-weight-strong, 700);
	margin: 0.5rem 0 0.25rem;
}

/* Lumens cell: number on its own line at ~20px (var(--font-size-sm2)). */
.usai-lumens {
	margin: 0;
	line-height: 1.3;
}

.usai-lumens__pre,
.usai-lumens__post {
	display: inline-block;
	font-size: var(--font-size-xs, 16px);
	color: var(--text-color, #231f20);
}

.usai-lumens__num {
	display: block;
	font-size: var(--font-size-sm2, 20px);
	font-weight: var(--font-weight-strong, 700);
	margin: 0.15rem 0;
}

.usai-compare-block + .usai-compare-block {
	margin-top: 8px;
}

.usai-compare-block--empty {
	min-height: 1.5em;
}

/* ---- Overview cards (default mode) ---- */

.usai-overview-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 8px);
}

.usai-overview-card__label {
	display: block;
	font-size: var(--font-size-xs, 16px);
	color: var(--text-color-gray-lighter, #999);
	font-weight: var(--font-weight-strong, 700);
	letter-spacing: 0.02em;
	margin-bottom: 0.25rem;
}

.usai-overview-card__title {
	font-size: var(--font-size-md, 1.25rem);
	font-weight: var(--font-weight-strong, 700);
	color: var(--text-color, #231f20);
	margin: 0;
}

.usai-overview-card__desc {
	font-size: var(--font-size-xs, 16px);
	line-height: 1.5;
	color: var(--text-color-gray-darkest, #555);
}

.usai-overview-card__desc p {
	margin: 0 0 0.5em 0;
}

.usai-overview-card__desc p:last-child {
	margin-bottom: 0;
}

/* ---- Section titles inside compare modes ---- */

.usai-compare-section-title {
	font-size: var(--font-size-md, 1.25rem);
	font-weight: var(--font-weight-strong, 700);
	color: var(--text-color, #231f20);
	margin: 0 0 12px 0;
}

.usai-compare-mode--all .usai-compare-section-block + .usai-compare-section-block {
	margin-top: var(--spacing-xl, 32px);
	padding-top: var(--spacing-lg, 20px);
	border-top: 1px solid var(--border-color-lightest, #e0e0e0);
}

/* ---- View All Comparisons (centered orange pill) ---- */

.usai-compare-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-xl, 32px);
}

.usai-compare-view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--primary-color, #f47e2c);
	color: var(--white, #fff);
	font-weight: var(--font-weight-strong, 700);
	font-size: var(--font-size-1xs, 0.875rem);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.usai-compare-view-all:hover,
.usai-compare-view-all:focus-visible {
	background: var(--primary-color-alt, #f57f2d);
	color: var(--white, #fff);
	text-decoration: none;
}

/* ---- Footer CTA ---- */

/* Full-bleed light-gray band (matches PDF). The band sits OUTSIDE
 * .usai-tiers-wrap so the gray runs to both viewport edges, while the
 * inner content stays within the same 1400px column as the rest of the
 * page. The 50%/50vw trick keeps the band edge-to-edge regardless of
 * the parent's max-width. */
.usai-tiers-footer-band {
	background: var(--background-color-gray, #ebebeb);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(2rem, 4vw, 3rem) 0;
	margin-top: 0;
}

.usai-tiers-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-sm, 12px);
	max-width: var(--max-width, 1800px);
	margin: 0 auto;
	/* Full-bleed band; horizontal inset matches parent .section-wrapper. */
	padding: 0 var(--section-h-padding, 40px);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.usai-tiers-footer__heading {
	margin: 0;
	font-size: var(--font-size-md, 1.25rem);
	font-weight: var(--font-weight-strong, 700);
	color: var(--text-color, #231f20);
}

.usai-tiers-footer__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 16px);
	flex-wrap: wrap;
	width: 100%;
}

.usai-tiers-footer__label {
	font-size: var(--font-size-xs, 1rem);
	color: var(--text-color-gray-darkest, #555);
}

.usai-tiers-footer__select {
	min-width: 220px;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--border-color-light, #ccc);
	background: var(--background-color-white, #fff);
	color: var(--text-color, #231f20);
}

.usai-tiers-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: var(--font-weight-strong, 700);
	font-size: var(--font-size-1xs, 0.875rem);
	background: var(--border-color-lightest, #e0e0e0);
	color: var(--white, #fff);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.usai-tiers-footer__cta.is-disabled {
	background: var(--border-color-lightest, #e0e0e0);
	color: var(--white, #fff);
	pointer-events: none;
	opacity: 0.7;
}

.usai-tiers-footer__cta.is-active {
	background: var(--primary-color, #f47e2c);
	color: var(--white, #fff);
	pointer-events: auto;
	opacity: 1;
}

.usai-tiers-footer__cta.is-active:hover,
.usai-tiers-footer__cta.is-active:focus-visible {
	background: var(--primary-color-alt, #f57f2d);
}

/* ---- Color technology icons (shortcode-driven) ----
 * Rendered by inc/shortcodes.php when authors drop tags like [classic-white],
 * [warm-glow-dimming], etc. into a Tier WYSIWYG. Reuses the existing
 * mega-menu color PNG assets so visual treatment stays consistent. */

.usai-color-icon {
	display: inline-block;
	vertical-align: -2px;
	margin-right: 0.5rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--background-color-gray, #ebebeb) center / contain no-repeat;
	border: 1px solid var(--border-color-lightest, #e2e2e2);
}

.usai-color-icon--classic-white {
	background-image: url("/wp-content/uploads/classicwhite_icon-3.png");
}

.usai-color-icon--warm-glow,
.usai-color-icon--dim-to-warm {
	background-image: url("/wp-content/uploads/warmglow-2.png");
	border-color: transparent;
}

.usai-color-icon--color-select {
	background-image: url("/wp-content/uploads/colorselect-4.png");
	border-color: transparent;
}

.usai-color-icon--infinite-color {
	background-image: url("/wp-content/uploads/infinitecolor-3.png");
	border-color: transparent;
}

.usai-color-icon--turtle-safe {
	background: #e8a233;
	border-color: transparent;
}

/* ---- Finish swatches (shortcode-driven) ----
 * Rendered by inc/shortcodes.php when authors drop `[finish-bronze]` etc. into
 * a Tier WYSIWYG. PNGs ship inside the plugin (assets/finishes/<slug>.png),
 * are pre-cropped to a circular swatch on a transparent canvas, and inherit
 * the .usai-color-icon base sizing. The base gray fill / border are stripped
 * so the swatch tone reads correctly in both light and dark modes. */

.usai-finish-icon {
	width: 16px;
	height: 16px;
	background-color: transparent;
	background-size: contain;
	border: 0;
	border-radius: 0;
}

.usai-finish-icon--white {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/white.png");
}

.usai-finish-icon--conduit-silver {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/conduit-silver.png");
}

.usai-finish-icon--grey {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/grey.png");
}

.usai-finish-icon--black {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/black.png");
}

.usai-finish-icon--bronze {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/bronze.png");
}

.usai-finish-icon--primer {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/primer.png");
}

.usai-finish-icon--antimicrobial-white {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/antimicrobial-white.png");
}

.usai-finish-icon--clear-matte-anodized {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/clear-matte-anodized.png");
}

.usai-finish-icon--piano-gloss-black {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/piano-gloss-black.png");
}

.usai-finish-icon--custom-ral {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/custom-ral.png");
}

.usai-finish-icon--champagne-anodized-diffused {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/champagne-anodized-diffused.png");
}

.usai-finish-icon--gold-anodized-diffused {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/gold-anodized-diffused.png");
}

.usai-finish-icon--wheat-anodized-diffused {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/wheat-anodized-diffused.png");
}

.usai-finish-icon--bronze-anodized-diffused {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/bronze-anodized-diffused.png");
}

.usai-finish-icon--umber-anodized-diffused {
	background-image: url("/wp-content/plugins/usai-tiers/assets/finishes/umber-anodized-diffused.png");
}

/* ---- Finishes section: 5-column swatch grid (per the PDF) ----
 * Both render paths get the same treatment: the single-section view (where
 * the wrapper carries `data-mode="finishes"`) and the All Categories view
 * (where each block carries `data-section="finishes"`). The cascade collapses
 * 5 -> 4 -> 3 -> 2 -> 1 as the viewport narrows. */

.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--spacing-sm, 12px) var(--spacing-xs, 8px);
	align-items: start;
}

.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block li,
.usai-compare-section-block[data-section="finishes"] .usai-compare-block li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	font-size: var(--font-size-2xs, 0.75rem);
	line-height: 1.2;
}

.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block .usai-finish-icon,
.usai-compare-section-block[data-section="finishes"] .usai-compare-block .usai-finish-icon {
	margin: 0 auto;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.usai-tiers-footer {
		padding: 0 var(--spacing-md, 15px);
	}
	.usai-compare-row {
		grid-template-columns: 1fr;
	}
	.usai-compare-controls {
		gap: 8px;
	}
	.usai-compare-col {
		border-left: 0;
		border-top: 1px solid var(--border-color-lightest, #e0e0e0);
		padding: var(--spacing-md, 16px) 0;
	}
	.usai-compare-row > .usai-compare-col:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.usai-tiers-footer__row {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---- Finishes grid responsive cascade (5 -> 4 -> 3 -> 2 -> 1) ----
 * Note the 767px breakpoint *increases* the column count back to 4: at that
 * point the outer tier columns have already collapsed to a single column
 * (see .usai-compare-row above), so the inner finishes grid suddenly has the
 * full content width and benefits from being denser, not sparser. */

@media (max-width: 1199px) {
	.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
	.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
	.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
	.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
	.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 360px) {
	.usai-compare-mode--section[data-mode="finishes"] .usai-compare-block ul,
	.usai-compare-section-block[data-section="finishes"] .usai-compare-block ul {
		grid-template-columns: 1fr;
	}
}