/* ============================================================================
 * NEU single case-study landing (tpl-casestudy, post 49) — Bricks-native.
 *
 * Mirrors the tpl-service split:
 *   VISUAL design (border / background / padding / radius / typography / color)
 *   lives in Bricks `cs-*` global classes + the "NEU Brand" global colors — edit
 *   in the builder, NOT here.
 *   THIS FILE owns only LAYOUT primitives: max-width centering, CSS grid + gap +
 *   responsive column counts, flex rows, and hover micro-interactions (Bricks'
 *   gap control is unreliable; column counts are Tailwind-breakpoint responsive).
 *
 * RTL-READY by construction (preventive; Polylang/RTL not yet active):
 *   all directional layout is flex/grid (writing-mode aware → auto-mirrors) and
 *   every physical value is block-axis or symmetric. Centering uses the LOGICAL
 *   margin-inline:auto, never margin-left/right. The metric value is pinned
 *   direction:ltr so numbers (e.g. "-38%", "+212%") keep LTR ordering in Arabic.
 *   Items logical props can't fix (back-link "←" arrow, CTA "→" arrows) are
 *   tracked in docs/rtl-readiness-tpl-casestudy.md, NOT handled here.
 *
 * RESPONSIVE: migrated `cs-*` typography uses its DESKTOP value as the Bricks base
 *   (matches Lovable on desktop). Tablet/mobile down-steps for migrated type are
 *   deferred to the same Bricks-custom-breakpoints task as tpl-service. Grid COLUMN
 *   counts below keep their Tailwind responsive here so layout reflows on mobile.
 * ========================================================================== */

.cs-root{
  font-family:Inter,'IBM Plex Sans Arabic',system-ui,sans-serif;
  background:hsl(var(--brand-white));color:hsl(var(--brand-dark));
  position:relative;isolation:isolate;overflow:hidden;
}
.cs-root *{box-sizing:border-box;}

/* ---- centered content wrappers (logical centering → RTL-safe) ---- */
.cs-hero__inner{max-width:900px;margin-inline:auto;}
.cs-inner{max-width:1100px;margin-inline:auto;}
.cs-fc__card{max-width:820px;margin-inline:auto;}

/* ---- hero back-link: arrow + label inline (flex auto-mirrors in RTL) ---- */
.cs-backlink{display:inline-flex;align-items:center;gap:.5rem;}

/* ---- CTA buttons: inline arrow + hover lift (Bricks owns bg/color/padding/radius) ---- */
.cs-cta{display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;}
.cs-cta:hover{transform:translateY(-2px);}

/* ---- metrics grid: 1 / sm:2 / lg:3 (Lovable scale) ---- */
.cs-metrics__grid{display:grid;gap:1rem;}
@media(min-width:640px){.cs-metrics__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.cs-metrics__grid{grid-template-columns:repeat(3,1fr);}}

/* metric value: numbers stay LTR even in Arabic (belt-and-suspenders with dir="ltr" attr) */
.cs-metric__value{direction:ltr;}

/* ---- phases grid: 1 / md:2 ---- */
.cs-phases__grid{display:grid;gap:1.25rem;}
@media(min-width:768px){.cs-phases__grid{grid-template-columns:repeat(2,1fr);}}

/* ---- card hover micro-interaction (transition only — no overlap with Bricks props) ---- */
.cs-metric-card,.cs-phase-card,.cs-rel-card{transition:transform .3s,border-color .3s,box-shadow .3s;}
.cs-phase-card.brxe-div:hover{transform:translateY(-2px);border-color:hsl(var(--brand-purple)/.4);box-shadow:0 18px 50px hsl(var(--brand-purple)/.08);}

/* ============================================================================
 * RELATED-CASES sections (SHARED): tpl-casestudy "Related" + tpl-service
 * "Real results from this service" — same cases-by-service loop, same card.
 * Layout primitives only (grid/gap/flex); RTL-safe (logical, symmetric).
 * ========================================================================== */
.cs-rel-grid{display:grid;gap:1.25rem;}
@media(min-width:768px){.cs-rel-grid{grid-template-columns:repeat(2,1fr);}}
/* card is a Bricks div with a dynamic link -> renders as <a>; kill underline, hover-lift */
.cs-rel-card{display:block;text-decoration:none;}
.cs-rel-card.brxe-div:hover{transform:translateY(-2px);border-color:hsl(var(--brand-purple)/.4);box-shadow:0 18px 50px hsl(var(--brand-purple)/.08);}
/* service "Real results" inline metric mini-blocks (value stays LTR like the main metrics) */
.cs-rm-row{display:flex;flex-wrap:wrap;gap:1.5rem;margin-block-start:1.25rem;}
.cs-rm-row [dir="ltr"]{direction:ltr;}