/**
 * LTC Responsive — breakpoint overrides.
 *
 * Base rules (ltc-base.css, ltc-components.css) are desktop-first at
 * 1200px and above. This file only overrides what changes below that.
 * Minimum supported width: 360px — no rule below assumes more than that.
 */

/* ---- Header/nav: drawer from 1279px down ----
   Confirmed live (this refinement pass) that the full inline desktop
   nav wraps to 2-3 lines at 1200px and 1024px — "Problems We Solve"
   and "How We Work" are long labels the original ~1024px cutoff was
   never wide enough for. The drawer pattern now activates from
   1279px down instead, so 1440px is the only width still showing the
   full inline nav; 1200/1024/768/390 all get the accessible drawer.
   Deliberately does NOT touch header height or the no-JS wrap
   fallback — those stay scaled for true mobile only, in the 899px
   block below, so this wider range keeps the normal desktop-height
   header with just a hamburger trigger instead of inline links. ---- */
@media (max-width: 1279px) {
	.js .ltc-menu-toggle {
		display: inline-flex;
	}

	.ltc-site-header__actions > .ltc-btn--sm {
		display: none;
	}

	.ltc-site-header__actions {
		margin-left: auto;
		/* .ltc-menu-toggle (this button, both the open AND close
		   control — see ltc-shell.js) is a sibling of .ltc-site-header__
		   nav, not a descendant of it. Once the drawer opens, its
		   explicit z-index: 150 paints it above this sibling (which had
		   no z-index of its own, so it stacked at its plain DOM
		   position) — the toggle button ended up completely covered by
		   the open drawer, with clicks on its former screen position
		   landing on the drawer instead. Confirmed live: the button was
		   present in the DOM and still toggled aria-expanded correctly,
		   but was neither visible nor reachable by click while the
		   drawer was open. Raising this above the drawer's own z-index
		   keeps the close control visible and clickable throughout.
		   position: relative is required for z-index to apply at all
		   to a normal-flow element. */
		position: relative;
		z-index: 160;
	}

	.js .ltc-site-header__nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 150;
		order: 0;
		width: min(86vw, 360px);
		height: 100vh;
		height: 100dvh;
		background: var(--ltc-white);
		box-shadow: -24px 0 48px rgba(7, 20, 22, 0.18);
		padding: var(--ltc-space-8) var(--ltc-space-6);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		display: block;
		/* Drawer/backdrop transitions use the standard-interaction
		   duration (280ms), not the slower section-reveal duration —
		   a drawer needs to feel immediate, not like content arriving. */
		transition: transform var(--ltc-duration-standard) var(--ltc-ease),
			visibility 0s linear var(--ltc-duration-standard);
	}

	.js body.ltc-drawer-open .ltc-site-header__nav {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--ltc-duration-standard) var(--ltc-ease);
	}

	.js .ltc-nav {
		flex-direction: column;
		/* stretch, not flex-start: flex-start lets every <li> shrink-wrap
		   to its own content's intrinsic width instead of filling the
		   drawer. For a plain link that's harmless, but for the
		   Programmes item it left both the trigger and its dropdown
		   sized to whatever width the grid's content-based sizing
		   produced (measured ~256px in one drawer width, content-
		   dependent and unrelated to the drawer's actual available
		   width) rather than the drawer's real, known content width —
		   the underlying cause of the dropdown overflow bug below. */
		align-items: stretch;
		gap: var(--ltc-space-5);
	}

	.js .ltc-dropdown {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: none;
		display: none;
		grid-template-columns: 1fr;
		min-width: 0;
		max-width: none;
		width: 100%;
		box-sizing: border-box;
		padding: var(--ltc-space-2) 0 0;
	}

	/* .js .ltc-nav__item--has-dropdown.is-open .ltc-dropdown (desktop,
	   ltc-shell.css) sets transform: translateX(-50%) translateY(0) to
	   centre the absolutely-positioned popup under its trigger — at 4
	   class selectors, that rule is MORE specific than the position:
	   static reset directly above (2 classes), so it kept winning here
	   regardless of stylesheet load order, shifting the whole drawer
	   dropdown ~50% of its own width to the left and pushing category
	   labels outside the drawer and over the page behind it (staging
	   QA: "submenu/category labels overflow outside the drawer").
	   Re-declaring the identical selector here — now at the matching
	   4-class specificity, and after the offending rule in cascade
	   order — overrides it directly instead of fighting it with
	   !important. */
	.js .ltc-nav__item--has-dropdown.is-open .ltc-dropdown {
		display: grid;
		transform: none;
	}

	.js .ltc-drawer-backdrop {
		position: fixed;
		inset: 0;
		z-index: 140;
		background: rgba(6, 25, 27, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--ltc-duration-standard) var(--ltc-ease),
			visibility 0s linear var(--ltc-duration-standard);
	}

	.js body.ltc-drawer-open .ltc-drawer-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--ltc-duration-standard) var(--ltc-ease);
	}

	.js body.ltc-drawer-open {
		overflow: hidden;
	}

	.ltc-drawer-cta {
		margin-top: var(--ltc-space-7);
		display: block;
	}
}

/* ---- Compact desktop: 1024px–1199px ---- */
@media (max-width: 1199px) {
	.ltc-nav {
		gap: var(--ltc-space-5);
	}

	.ltc-h-hero,
	.ltc-hero__headline {
		font-size: clamp(3rem, 5.6vw, 5.1rem); /* ~10–15% reduction */
	}

	.ltc-h1 {
		font-size: clamp(2.75rem, 4.6vw, 4.15rem);
	}

	.ltc-programme-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.ltc-hero {
		min-height: auto;
		padding-block: var(--ltc-space-10);
	}

	/* Retain the asymmetric two-column composition at compact desktop —
	   only simplify it (fewer overlapping frames, shorter line), never
	   collapse to a single column here. Full stacking is reserved for
	   true mobile widths, below. */
	.ltc-hero__grid {
		grid-template-columns: 6fr 5fr;
		gap: var(--ltc-space-7);
	}

	.ltc-explorer__anchor-title {
		font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	}
}

/* ---- Tablet portrait: 900px–1023px ----
   Narrowed from the original 768px–1023px range: the homepage-
   rebuild-v2 navigation adds two genuinely long labels ("Problems We
   Solve", "How We Work") the Gate 0 nav spacing was never tuned for,
   and at 768px the full inline nav collided with the logo and CTA
   button (confirmed live during this pass). The header/nav-specific
   rules below now switch to the drawer pattern from 899px down instead
   of 767px down — see the widened "Mobile" breakpoint below. */
@media (max-width: 1023px) {
	:root {
		--ltc-section-space: var(--ltc-section-space-tablet);
		--ltc-outer-padding: var(--ltc-outer-padding-tablet);
		--ltc-grid-gap: var(--ltc-grid-gap-tablet);
	}

	.ltc-grid {
		grid-template-columns: repeat(8, 1fr);
	}

	.ltc-hero--split {
		grid-template-columns: 1fr !important;
	}

	/* Below 1024px the hero genuinely doesn't have room for a confident
	   two-column composition (portrait tablet/mobile) — stack here. */
	.ltc-hero__grid {
		grid-template-columns: 1fr;
	}

	.ltc-hero__visual {
		margin-top: var(--ltc-space-9);
		max-width: 480px;
	}

	/* Programme explorer: anchor stays full width and dominant,
	   supporting cards move below it in a two-up row rather than
	   flattening into an identical stack. */
	.ltc-explorer__anchor {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.ltc-explorer__support-list {
		grid-column: 1 / -1;
	}

	.ltc-explorer__support {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Momentum steps: keep the horizontal stepped rhythm but tighten it. */
	.ltc-momentum-steps {
		gap: var(--ltc-space-5);
	}

	/* Testimonial: the fixed side column doesn't have room below
	   desktop — stack attribution below the quotation. */
	.ltc-testimonial {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-6);
	}

	.ltc-testimonial__side {
		padding-top: 0;
	}

	.ltc-testimonial__side-rule {
		max-width: 100%;
	}

	/* Complex sticky effects are not part of this static preview, but the
	   token/behaviour contract is documented here for later phases:
	   no position: sticky storytelling below 1024px. */

	.ltc-footer-nav--v3 {
		grid-template-columns: 1fr 1fr;
		gap: var(--ltc-space-6);
	}

	.ltc-footer-nav__brand-col {
		grid-column: 1 / -1;
	}

	.ltc-positioning__grid--v2, .ltc-proof-sequence__intro {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-6);
	}

	/* ---- New homepage-rebuild-v2 sections: tablet ---- */
	.ltc-credibility__ticker {
		grid-template-columns: repeat(3, 1fr);
	}

	.ltc-credibility__ticker-item:nth-child(3n) {
		border-right: none;
	}

	.ltc-insight-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tablet: 2 columns. 9 cards in 2 columns strands the 9th card alone
	   on its own row — rather than leave it as a half-empty row, it
	   spans both columns so it reads as a deliberate closing card, not
	   an accident. */
	.ltc-capability-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
	}

	.ltc-capability-card:last-child {
		grid-column: 1 / -1;
	}

	.ltc-capability-card:last-child .ltc-capability-card__link {
		flex-direction: row;
		align-items: center;
		gap: var(--ltc-space-6);
	}

	.ltc-capability-card:last-child .ltc-capability-card__description {
		flex: 1 1 auto;
		margin-top: 0;
	}

	.ltc-capability-card:last-child .ltc-capability-card__footer {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--ltc-space-2);
	}

	.ltc-cycle__node {
		width: 110px;
	}

	.ltc-cycle__title {
		font-size: 13px;
	}

	.ltc-delivery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ltc-faq-columns {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-8);
	}
}

/* ---- Mobile/narrow-tablet: below 900px ----
   Widened from 767px so the drawer pattern (not the full inline nav)
   covers 768px–899px too — see the note on the tablet block above.
   Non-header rules in this block (hero stacking, testimonial, footer,
   etc.) applying slightly earlier than strictly necessary is a
   reasonable, low-risk side effect, not a regression. ---- */
@media (max-width: 899px) {
	:root {
		--ltc-section-space: var(--ltc-section-space-mobile);
		--ltc-outer-padding: var(--ltc-outer-padding-mobile);
		--ltc-grid-gap: var(--ltc-grid-gap-mobile);
	}

	/* Two consecutive sections that share the same near-white surface
	   (the default .ltc-section background and .ltc-section--light are
	   the same colour) have no visual break between them, so their
	   combined top+bottom padding (64px + 64px = 128px at this token)
	   reads as a single, uncued blank pause rather than a deliberate
	   section change — confirmed live on the homepage (facilitators ->
	   faq) and on capability pages (why-it-matters -> programmes).
	   Halving just the top padding of the second section in such a
	   pair brings the combined gap to 96px, in the same ~72-96px band
	   already targeted for this same scenario at desktop widths (see
	   --ltc-section-space's own token comment) — a shared rule, not a
	   per-page fix, and it only ever matches genuinely same-background
	   adjacency: --dark/--muted/--paper/--grid sections (which already
	   have a visible colour break either side) are untouched. */
	.ltc-section:not(.ltc-section--dark):not(.ltc-section--muted):not(.ltc-section--paper):not(.ltc-section--grid)
		+ .ltc-section:not(.ltc-section--dark):not(.ltc-section--muted):not(.ltc-section--paper):not(.ltc-section--grid) {
		padding-top: calc(var(--ltc-section-space) * 0.5);
	}

	.ltc-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ltc-h-hero,
	.ltc-hero__headline {
		font-size: clamp(2.875rem, 11vw, 3.375rem); /* 46–54px */
		line-height: 1.02;
	}

	.ltc-h1 {
		font-size: clamp(2.5rem, 10vw, 3rem);
	}

	.ltc-h2 {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}

	.ltc-editorial-statement {
		font-size: clamp(1.875rem, 9vw, 2.5rem);
	}

	.ltc-programme-grid,
	.ltc-insight-grid,
	.ltc-proof-grid {
		grid-template-columns: 1fr !important;
	}

	.ltc-proof-strip {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-5);
	}

	.ltc-testimonial__quote {
		font-size: clamp(1.375rem, 6.5vw, 1.625rem);
		line-height: 1.32;
	}

	.ltc-testimonial__quote-continue {
		font-size: 1rem;
		margin-top: var(--ltc-space-4);
	}

	/* The compact facilitators-section testimonial (ltc-home.css) puts
	   name/role/rating in a single flex row with no wrap — correct at
	   desktop widths, but below ~390px the row's real content
	   (99px + 139px + 66px) squeezes each item into a column narrower
	   than its own text, and the 5-star rating and role text both wrap
	   internally instead of the row wrapping as a whole — the name,
	   role and star rating end up interleaved. Stacking these three
	   instead removes the internal wrapping and reads as a normal
	   attribution block. */
	.ltc-proof-sequence__testimonial .ltc-testimonial__side {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ltc-space-1);
	}

	.ltc-proof-sequence__testimonial .ltc-testimonial__rating {
		margin-top: var(--ltc-space-2);
	}

	.ltc-testimonial__mark {
		display: none;
	}

	.ltc-btn {
		width: 100%;
		justify-content: center;
	}

	.ltc-logo-rail__item {
		height: 40px;
	}

	.ltc-logo-rail__item img {
		max-width: 130px;
	}

	/* ---- Hero: image composition moves below the proposition, CTAs
	   stay usable, trust line stays legible. ---- */
	.ltc-hero {
		min-height: auto;
		padding-block: var(--ltc-space-9) var(--ltc-space-8);
	}

	.ltc-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-8);
	}

	.ltc-hero__content {
		max-width: none;
	}

	/* v2 hero visual (frame + caption) flows naturally — no fixed height
	   needed; the old absolute dual-frame composition this rule was
	   written for no longer exists. */

	/* ---- Image system: the desktop layered/absolute composition
	   does not collapse gracefully — convert to a clean stacked flow
	   instead of overlapping boxes. ---- */
	.ltc-image-group {
		display: flex;
		flex-direction: column;
		gap: var(--ltc-space-5);
	}

	.ltc-image-group__primary,
	.ltc-image-group__secondary,
	.ltc-image-group__detail {
		position: static;
		width: 100%;
		box-shadow: none;
		border-width: 0;
	}

	/* ---- Programme explorer: anchor keeps clear visual dominance but
	   is shortened ~12% versus the earlier mobile height so part of the
	   next capability becomes visible sooner. ---- */
	.ltc-explorer__anchor {
		min-height: 280px;
		padding: var(--ltc-space-6);
	}

	.ltc-explorer__anchor-title {
		font-size: clamp(1.625rem, 8vw, 2rem);
	}

	.ltc-explorer__support-list {
		grid-template-columns: 1fr;
	}

	.ltc-explorer__support {
		padding: var(--ltc-space-5);
	}

	/* ---- Momentum steps: convert to a clean vertical journey with a
	   left rail line and node markers, never crossing copy. ---- */
	.ltc-momentum-steps {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-7);
		padding-left: var(--ltc-space-6);
		border-left: 2px solid var(--ltc-teal-500);
	}

	.ltc-momentum-steps__connector {
		display: none;
	}

	.ltc-momentum-steps__node {
		position: absolute;
		left: calc(var(--ltc-space-6) * -1 - 25px);
		width: 40px;
		height: 40px;
	}

	.ltc-momentum-steps__item {
		padding-left: var(--ltc-space-2);
	}

	/* No content may sit behind the chat/WhatsApp widgets at this width;
	   enforced structurally later when those widgets are rebuilt, noted
	   here so the constraint travels with the design system. */

	/* ---- Header: compact ~64px height at true mobile widths only.
	   The drawer activation itself (menu toggle, fixed off-canvas nav,
	   backdrop, dropdown-in-drawer) is handled once, for the whole
	   0-1279px range, in the "Header/nav: drawer from 1279px down"
	   block near the top of this file — not duplicated here. ---- */
	.ltc-site-header__inner,
	.ltc-site-header.is-stuck .ltc-site-header__inner {
		height: 64px;
	}

	/* Without JS: nav stays inline and must wrap below the logo/CTA
	   row to avoid overflow — fully visible, fully reachable, just a
	   taller header. This is the no-JS fallback only. */
	.ltc-site-header__inner {
		flex-wrap: wrap;
		row-gap: var(--ltc-space-3);
	}

	.ltc-site-header__nav {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.ltc-nav {
		flex-wrap: wrap;
		row-gap: var(--ltc-space-3);
	}

	/* At true mobile widths there isn't room for logo + full CTA +
	   hamburger on one line, so the header-row CTA is hidden and stays
	   reachable via .ltc-drawer-cta inside the open drawer instead. */
	.js .ltc-site-header__inner {
		flex-wrap: nowrap;
		row-gap: 0;
	}


	/* ---- Positioning section ---- */
	.ltc-positioning__grid--v2, .ltc-proof-sequence__intro {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-6);
	}

	.ltc-positioning__proof-row {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-5);
	}

	/* ---- Footer ---- */
	.ltc-footer-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ltc-space-5);
	}

	.ltc-footer-cta__inner .ltc-btn {
		width: auto;
	}

	.ltc-footer-nav--v3 {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-6);
	}

	.ltc-footer-nav__brand-col {
		grid-column: 1 / -1;
	}

	.ltc-footer-baseline {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ---- New homepage-rebuild-v2 sections: mobile ---- */
	.ltc-credibility__statement {
		max-width: none;
	}

	.ltc-credibility__ticker {
		grid-template-columns: repeat(2, 1fr);
	}

	.ltc-credibility__ticker-item:nth-child(3n) {
		border-right: 1px solid var(--ltc-stone-200);
	}

	.ltc-credibility__ticker-item:nth-child(2n) {
		border-right: none;
	}

	.ltc-insight-grid {
		grid-template-columns: 1fr !important;
	}

	.ltc-delivery-grid {
		grid-template-columns: 1fr;
	}

	/* ---- Methodology: circular cycle -> vertical sequence ---- */
	.ltc-cycle {
		display: none;
	}

	.ltc-cycle-mobile {
		display: block;
		margin: var(--ltc-space-7) 0 0;
		padding: 0;
		list-style: none;
	}

	.ltc-cycle-mobile__item {
		position: relative;
		padding-left: 50px;
		padding-bottom: var(--ltc-space-6);
		border-left: 2px solid var(--ltc-teal-500);
	}

	.ltc-cycle-mobile__item:last-of-type {
		padding-bottom: var(--ltc-space-5);
	}

	.ltc-cycle-mobile__number {
		position: absolute;
		left: -19px;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--ltc-ink-950);
		border: 2px solid var(--ltc-teal-500);
		color: var(--ltc-white);
		font-weight: var(--ltc-weight-heading);
		font-size: 14px;
	}

	.ltc-cycle-mobile__title {
		padding-top: 6px;
		font-size: 16px;
		font-weight: var(--ltc-weight-subhead);
		color: var(--ltc-white);
		line-height: 1.4;
	}

	.ltc-cycle-mobile__return {
		margin-left: 0;
		padding: var(--ltc-space-4) var(--ltc-space-5);
		border: 1px dashed rgba(247, 245, 240, 0.3);
		border-radius: var(--ltc-radius-button);
		display: flex;
		align-items: center;
		gap: var(--ltc-space-3);
		font-size: 14px;
		line-height: 1.4;
		color: rgba(247, 245, 240, 0.7);
	}

	.ltc-cycle-mobile__return-arrow {
		flex: 0 0 auto;
		font-size: 22px;
		color: var(--ltc-teal-500);
	}

	/* Mobile: single column. The tablet's "featured last card" span no
	   longer applies (there's only one column to begin with), so it is
	   explicitly reset back to a normal card here. */
	.ltc-capability-grid {
		grid-template-columns: 1fr;
	}

	.ltc-capability-card:last-child {
		grid-column: auto;
	}

	.ltc-capability-card:last-child .ltc-capability-card__link {
		flex-direction: column;
		align-items: stretch;
	}

	.ltc-capability-card:last-child .ltc-capability-card__description {
		margin-top: var(--ltc-space-2);
	}

	/* Footer needs no reset here — the base .ltc-capability-card__footer
	   rule (borderless, compact) already applies correctly to every
	   card including the last one at this width. */

	.ltc-programme-index__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ltc-resources__intro,
	.ltc-campus-module {
		flex-direction: column;
		align-items: flex-start;
	}

	.ltc-campus-module__links {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ltc-space-3);
	}

	.ltc-faq-item {
		padding: var(--ltc-space-4) var(--ltc-space-5);
	}

	.ltc-footer-nav__logo img {
		height: 30px;
	}
}