/*
 * Get MEP Plans theme — tablet + small-mobile responsive refinements.
 *
 * The base theme has a single 980px breakpoint (desktop → mobile). This file
 * adds a tablet zone (720–980px) and a small-mobile zone (<480px) for
 * smoother device coverage.
 *
 * Loaded last so its rules cascade over the base stylesheets without needing
 * !important.
 */

/* ============================================================
 * TABLET ZONE — 720px to 980px
 * Tablets: iPad portrait (768), most Android tablets, foldables half-open.
 * Goal: keep dense layouts readable, reduce padding, slightly tighten type.
 * ============================================================ */
@media (max-width: 980px) and (min-width: 721px) {

	/* Hero — narrow the second column without collapsing entirely */
	.mep-hero-grid {
		grid-template-columns: 1.2fr 1fr;
		gap: 32px;
	}

	.mep-headline {
		font-size: clamp(40px, 5.5vw, 60px);
		line-height: 1.04;
	}

	.mep-lede {
		font-size: 17px;
		max-width: 50ch;
	}

	/* Trust strip — keep three columns but tighter */
	.mep-trust-strip {
		gap: 24px;
	}

	.mep-trust-item .num {
		font-size: 44px;
	}

	.mep-trust-item .lbl {
		font-size: 11px;
	}

	/* Disciplines — two columns instead of three */
	.mep-disciplines {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Project grid — stay 2 columns on tablet */
	.mep-projects-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	/* Insights grid — 2 columns on tablet */
	.mep-insights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Engineers grid — 2 columns on tablet */
	.mep-engineers-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Satellite grid — 2 columns on tablet */
	.mep-satellite-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* CTA strip — reduce padding */
	.mep-cta-strip-inner {
		padding: 48px 32px;
	}

	.mep-cta-strip h2 {
		font-size: clamp(28px, 4vw, 38px);
	}

	/* Footer — keep grid but tighten */
	.mep-tf-grid {
		gap: 24px;
	}

	/* Code refs grid — 2 columns instead of 3 */
	.mep-code-refs-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Case study metadata — 2 columns */
	.mep-cs-metadata {
		grid-template-columns: repeat(2, 1fr);
	}

	/* State disciplines grid — 2 columns */
	.mep-state-disciplines-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
 * SMALL-MOBILE ZONE — below 480px
 * Older / smaller phones: iPhone SE, compact Androids.
 * Goal: scale type down, tighten gutters, ensure no horizontal scroll.
 * ============================================================ */
@media (max-width: 480px) {

	:root {
		--container-pad-mobile: 16px;
	}

	/* Hero headline — smaller still on tiny phones */
	.mep-headline {
		font-size: clamp(32px, 9vw, 44px);
		line-height: 1.05;
		letter-spacing: -0.02em;
	}

	.mep-lede {
		font-size: 15px;
		line-height: 1.55;
	}

	/* Hero meta strip — wrap the metadata into two rows */
	.mep-hero-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		font-size: 10.5px;
	}

	.mep-hero-meta .left,
	.mep-hero-meta .right {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* Trust strip — stack vertically with reduced spacing */
	.mep-trust-strip {
		gap: 16px;
		padding-top: 24px;
	}

	.mep-trust-item .num {
		font-size: 36px;
	}

	.mep-trust-item .lbl {
		font-size: 10.5px;
		max-width: 100%;
	}

	/* Top nav brand — keep mark, drop tagline */
	.mep-brand-tag {
		display: none;
	}

	.mep-top-cta {
		display: none;
	}

	/* CTA buttons — full width on tiny screens */
	.mep-cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.mep-cta-row .mep-btn {
		width: 100%;
		justify-content: center;
	}

	/* Section headings — slightly smaller on tiny screens */
	.mep-section-head h2,
	.mep-disciplines h3,
	.mep-faq h2 {
		font-size: 24px;
	}

	/* Project card meta — wrap if needed */
	.mep-project-meta {
		flex-direction: column;
		gap: 4px;
	}

	/* Footer titleblock — keep grid 2-up minimum */
	.mep-tf-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mep-tf-bottom {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		font-size: 10.5px;
	}

	.mep-tf-sheet {
		display: none;
	}

	/* Case study metadata — single column */
	.mep-cs-metadata {
		grid-template-columns: 1fr;
	}

	/* State page disciplines — single column on tiny screens */
	.mep-state-disciplines-grid {
		grid-template-columns: 1fr;
	}

	/* Reduce excess whitespace */
	.mep-service-hero {
		padding: 32px 0;
	}
}

/* ============================================================
 * VERY SMALL — below 360px (rare but exists)
 * Edge cases: old iPhone SE 1st gen, Galaxy S6 portrait.
 * ============================================================ */
@media (max-width: 359px) {
	.mep-headline {
		font-size: 28px;
	}

	.mep-trust-item .num {
		font-size: 30px;
	}
}