/**
 * Bottleneck Ladder Web Assessment — responsive layer.
 *
 * frontend.css is the mobile layout (320px+). These breakpoints progressively
 * enhance for large phones, tablets and desktops.
 */

/* Small phones: tighten spacing, keep 44px+ touch targets. */
@media (max-width: 379px) {
	.blwa .blwa-hero,
	.blwa .blwa-card,
	.blwa .blwa-result-hero,
	.blwa .blwa-cta {
		padding-right: 16px;
		padding-left: 16px;
	}

	.blwa .blwa-stats {
		grid-template-columns: 1fr;
	}

	.blwa .blwa-nav {
		flex-direction: column-reverse;
	}

	.blwa .blwa-nav .blwa-btn {
		width: 100%;
	}

	.blwa .blwa-plan__dates-row {
		grid-template-columns: 1fr;
	}

	.blwa .blwa-plan__structured,
	.blwa .blwa-insight {
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* Large phones. */
@media (min-width: 480px) {
	.blwa .blwa-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.blwa .blwa-hero__actions .blwa-btn {
		width: auto;
	}

	.blwa .blwa-cta__actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
}

/* Tablets: answer scale becomes a five-column row. */
@media (min-width: 640px) {
	.blwa .blwa-result {
		padding: 24px;
		border-radius: var(--blwa-radius-xl);
	}

	.blwa .blwa-card {
		padding: 32px;
	}

	.blwa .blwa-q__legend {
		font-size: 18px;
	}

	.blwa .blwa-q__options {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 10px;
		padding-left: 42px;
	}

	.blwa .blwa-opt__card {
		position: relative;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		min-height: 92px;
		padding: 14px 6px 12px;
		text-align: center;
	}

	.blwa .blwa-opt__value {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.blwa .blwa-opt__label {
		font-size: 13.5px;
	}

	.blwa .blwa-opt__check {
		position: absolute;
		top: 6px;
		right: 6px;
		margin: 0;
	}

	.blwa .blwa-opt__check .blwa-icon {
		width: 16px;
		height: 16px;
	}

	.blwa .blwa-opt:hover .blwa-opt__card {
		transform: translateY(-2px);
	}

	.blwa .blwa-opt__input:checked + .blwa-opt__card {
		transform: translateY(-2px);
	}

	.blwa .blwa-steps__label {
		display: block;
	}

	.blwa .blwa-fields {
		grid-template-columns: 1fr 1fr;
		gap: 18px 16px;
	}

	.blwa .blwa-benefits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blwa .blwa-bottlenecks.is-tied {
		grid-template-columns: 1fr 1fr;
	}

	.blwa .blwa-signs {
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
	}

	.blwa .blwa-block--cost,
	.blwa .blwa-block--shift {
		padding: 28px;
	}

	.blwa .blwa-plan__indicators {
		grid-template-columns: 1fr 1fr;
	}

	.blwa .blwa-plan__grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px 18px;
	}

	.blwa .blwa-plan__field--wide {
		grid-column: 1 / -1;
	}

	.blwa .blwa-plan__structured {
		grid-template-columns: 1fr 1fr;
		padding: 24px;
	}

	.blwa .blwa-plan__dates {
		grid-column: 1 / -1;
	}

	.blwa .blwa-insight__review {
		padding: 26px;
	}

	.blwa .blwa-about {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 24px;
	}
}

/* Small desktops / landscape tablets: two-column hero and result layout. */
@media (min-width: 900px) {
	.blwa .blwa-result {
		padding: 32px;
	}

	.blwa .blwa-hero {
		grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
		align-items: center;
		gap: 48px;
		padding: 56px;
	}

	.blwa .blwa-hero::before {
		top: -150px;
		left: -150px;
		width: 620px;
		height: 620px;
		border-width: 14px;
	}

	.blwa .blwa-hero__intro {
		font-size: 18px;
	}

	.blwa .blwa-ladder {
		padding: 26px 24px;
	}

	.blwa .blwa-benefits {
		gap: 18px;
		margin-top: 22px;
	}

	.blwa .blwa-benefit {
		padding: 26px 24px;
	}

	.blwa .blwa-card {
		padding: 44px 48px;
	}

	.blwa .blwa-progress {
		padding: 18px 24px;
	}

	.blwa .blwa-result {
		gap: 24px;
	}

	.blwa .blwa-result-hero {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
		align-items: center;
		gap: 48px;
		padding: 52px 56px;
	}

	.blwa .blwa-result__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* Full-width blocks; "What this often looks like" and "cost" sit side by side, in reading order. */
	.blwa .blwa-result__grid > * {
		grid-column: 1 / -1;
	}

	.blwa .blwa-result__grid > .blwa-block--signs,
	.blwa .blwa-result__grid > .blwa-block--cost {
		grid-column: auto;
	}

	.blwa .blwa-signs {
		grid-template-columns: 1fr;
	}

	.blwa .blwa-block--bottleneck {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas:
			"pill scores"
			"title scores"
			"list scores";
		grid-template-rows: auto auto 1fr;
		column-gap: 44px;
	}

	.blwa .blwa-block--bottleneck > .blwa-pill {
		grid-area: pill;
		justify-self: start;
	}

	.blwa .blwa-block--bottleneck > .blwa-block__title {
		grid-area: title;
	}

	.blwa .blwa-block--bottleneck > .blwa-bottlenecks {
		grid-area: list;
		align-content: start;
	}

	.blwa .blwa-block--bottleneck > .blwa-scores {
		grid-area: scores;
		margin-top: 0;
		padding-top: 0;
		padding-left: 44px;
		border-top: 0;
		border-left: 1px solid var(--blwa-line);
	}

	.blwa .blwa-bottlenecks.is-tied {
		grid-template-columns: 1fr;
	}

	.blwa .blwa-timeline {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.blwa .blwa-timeline::before {
		top: 17px;
		right: 18px;
		bottom: auto;
		left: 18px;
		width: auto;
		height: 2px;
	}

	.blwa .blwa-timeline__item {
		flex-direction: column;
		gap: 12px;
	}

	.blwa .blwa-timeline__body {
		padding-top: 0;
	}

	.blwa .blwa-cta {
		padding: 56px 48px;
	}

	.blwa .blwa-plan__structured {
		grid-template-columns: 1fr 1fr 1.35fr;
		align-items: start;
	}

	.blwa .blwa-plan__dates {
		grid-column: auto;
	}

	.blwa .blwa-insight {
		padding: 56px 48px 44px;
	}

	.blwa .blwa-insight__audit {
		gap: 20px;
	}
}

/* Wide desktops. */
@media (min-width: 1100px) {
	.blwa .blwa-hero {
		padding: 64px;
	}
}