/* mm-responsive.css
   Single source of truth for every responsive layout override on the site.
   Loaded AFTER components and page CSS so these rules win cascade ties.

   Breakpoints follow Bootstrap 3 grid boundaries (1px below each min-width
   grid trigger so the rule fires the instant the grid drops a tier):

     max-width: 1199px  -> large-desktop ↔ desktop  (col-lg cutoff)
     max-width:  991px  -> desktop ↔ tablet         (col-md cutoff)
     max-width:  767px  -> tablet ↔ mobile          (col-sm cutoff)
     max-width:  575px  -> small mobile             (col-xs)

   prefers-reduced-motion rules stay in the component file they belong to.
   They are accessibility motion-kills, not layout, and don't need a single home. */


/* ============================================================
   max-width: 1199px  (large desktop and below)
   ============================================================ */
@media (max-width: 1199px) {
	/* Nav squeeze tier 1: lighter horizontal spacing, slightly smaller text.
	   Was at 1100px when the nav tabs started overflowing; bumped to 1199
	   to align with Bootstrap's col-lg breakpoint. */
	.full-wrapper { padding-left: 20px !important; padding-right: 20px !important; }
	.inner-nav ul li { margin-left: 18px !important; }
	.inner-nav ul li a { font-size: 12px !important; letter-spacing: 1.2px !important; }
	.inner-nav ul li.mm-nav-cta { margin-left: 18px !important; }
	.inner-nav ul li.mm-nav-cta > a.btn-mm,
	.inner-nav ul li.mm-nav-cta > button.btn-mm {
		padding: 0 20px !important;
		font-size: 11px !important;
		letter-spacing: 0.12em;
	}
}


/* ============================================================
   max-width: 991px  (desktop ↔ tablet)
   ============================================================ */
@media (max-width: 991px) {
	/* Nav squeeze tier 2: tightest spacing, smallest text.
	   Was at 950px; bumped to 991 to align with Bootstrap col-md cutoff.
	   Slightly more aggressive than the original 950 to compensate for
	   firing 41px earlier. */
	.full-wrapper { padding-left: 14px !important; padding-right: 14px !important; }
	.inner-nav ul li { margin-left: 14px !important; }
	.inner-nav ul li a { font-size: 11px !important; letter-spacing: 1px !important; }
	.inner-nav ul li.mm-nav-cta { margin-left: 14px !important; }
	.inner-nav ul li.mm-nav-cta > a.btn-mm,
	.inner-nav ul li.mm-nav-cta > button.btn-mm {
		padding: 0 16px !important;
		font-size: 10px !important;
		letter-spacing: 0.1em;
	}

	/* Hero CTA row */
	.mm-hero-cta-row { gap: 22px 18px; }

	/* Hero meta block */
	.mm-hero-meta { padding-left: 14px; }

	/* Card stack and card row collapse */
	.mm-card-stack { display: grid; grid-auto-rows: 1fr; }
	.mm-card { min-height: 80px; font-size: 16px; padding: 16px 20px; }
	.mm-card-row { display: block; }
	.mm-card-row > [class*="col-"] { display: block; margin-bottom: 18px; }

	/* Tall card */
	.mm-card-tall { font-size: 11px; padding: 4px 0 4px 16px; }

	/* Case study template */
	.mm-case-hero { padding: 140px 0 90px; }
	.mm-case-section { padding: 80px 0; }
	.mm-case-section h2.mm-headline { font-size: 34px !important; }
}


/* ============================================================
   max-width: 767px  (tablet ↔ mobile)
   ============================================================ */
@media (max-width: 767px) {
	/* Home case mini-cards stack vertically */
	.mm-case { flex-direction: column; gap: 14px; padding: 28px 0; }
	.mm-case-num { padding-top: 0; }

	/* Journal post cards space themselves */
	.mm-post { margin-bottom: 24px; }
}


/* ============================================================
   max-width: 575px  (small mobile)
   ============================================================ */
@media (max-width: 575px) {
	/* Hero h1 shrinks on phones */
	.mm-hero-h1 { font-size: 48px !important; line-height: 1.05; }

	/* Card and tall card phone sizes */
	.mm-card { font-size: 15px; padding: 14px 18px; min-height: 70px; }
	.mm-card-tall { font-size: 11px; padding: 4px 0 4px 14px; }
}