/* ============================================================
   CASE STUDY — shared page-specific styles for every root-level case
   study page (/neom.html, /fluxa-ui.html). One file for the shared
   template (js/caseStudy.js renders each project's markup through
   it) — same relationship as about.css is to about.html.
   (Censa and Outgrow now have their own dedicated pages/stylesheets
   — see censa-design-system.html / css/censa-design-system.css and
   outgrow.html / css/outgrow.css — but both still reuse these same
   .cs-* classes rather than duplicating them.)

   No new visual language: every rule composes existing tokens and
   the same border/gap/section-pad conventions already used across
   sections.css and about.css (numbered rows with a --color-border
   top hairline, not boxed cards — same pattern as
   .about-bring__item).

   Mobile-first; breakpoints below layer on tablet/desktop overrides
   at the project's established 768/1024 widths.
   ============================================================ */

/* Reused verbatim from about.css's active-nav-state rule — kept here
   too since case-study pages don't link about.css, and it's simpler
   to repeat 3 lines than introduce a new shared-rules file for it. */
.header__link[aria-current="page"],
.header__drawer-link[aria-current="page"] {
  color: var(--color-accent);
}

.cs-eyebrow {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---- Hero ---- */
.cs-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.cs-hero__category {
  color: var(--color-accent);
  font-weight: 600;
}

.cs-hero__title {
  color: var(--color-ink);
  width: 100%;
}

.cs-hero__statement {
  color: var(--color-ink);
  max-width: 720px;
}

.cs-hero__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 16px;
}

.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  margin-top: 8px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.cs-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-hero__meta-item dt {
  color: var(--color-muted);
}

.cs-hero__meta-item dd {
  color: var(--color-ink);
}

/* ---- 01 — The Situation ---- */
.cs-situation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.cs-situation__statement {
  color: var(--color-ink);
  max-width: 1080px;
}

.cs-situation__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  color: var(--color-ink);
}

.cs-challenges {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cs-challenges__item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-block: 20px;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
}

.cs-challenges__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cs-challenges__number {
  color: var(--color-accent);
  flex: 0 0 auto;
}

/* ---- Supporting visual ---- */
.cs-visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.cs-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-visual--proof {
  aspect-ratio: 21 / 9;
}

/* A supplied resultVisual (not the reused hero banner) shows in full,
   uncropped, at its own natural aspect ratio — the 21/9 cover crop
   above is tuned for wide hero-style banners, not a tall screenshot
   collage like NEOM's Trojena_UI.jpg. */
.cs-visual--full {
  aspect-ratio: auto;
  overflow: visible;
}

.cs-visual--full img {
  height: auto;
  object-fit: contain;
}

/* ---- 02 — My Role ---- */
.cs-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.cs-role__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.cs-role__title {
  color: var(--color-accent);
}

.cs-role__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  color: var(--color-ink);
}

/* ---- 03 — What I Did ---- */
.cs-decisions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.cs-decisions__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cs-decisions__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-block: 32px;
  border-top: 1px solid var(--color-border);
}

.cs-decisions__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cs-decisions__number {
  color: var(--color-accent);
}

.cs-decisions__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-ink);
}

.cs-decisions__title {
  font-weight: 700;
  text-transform: uppercase;
}

/* ---- 04 — The Result ---- */
.cs-result {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-result__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
}

.cs-result__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-result__value {
  color: var(--color-accent);
}

.cs-result__label {
  color: var(--color-ink);
}

/* ---- Key Takeaway ---- */
.cs-takeaway__statement {
  color: var(--color-ink);
  max-width: 900px;
}

/* ---- Next Case Study ---- */
.cs-next {
  display: block;
  border-top: 1px solid var(--color-border);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.cs-next:hover {
  opacity: 0.7;
}

.cs-next__label {
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
}

.cs-next__title {
  color: var(--color-ink);
}

/* ---- Live product link (fluxa-ui.html only — a real, visitable product,
   unlike the other case studies) ---- */
.cs-live-link {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border);
}

/* ---- Responsive ---- */

/* Tablet: 768–1023px */
@media (min-width: 768px) {
  .cs-hero__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-challenges__item,
  .cs-decisions__item {
    flex-direction: row;
    align-items: flex-start;
  }

  .cs-challenges__number {
    width: 48px;
  }

  .cs-decisions__number {
    flex: 0 0 auto;
    width: auto;
  }

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

/* Laptop/Desktop: 1024px+ */
@media (min-width: 1024px) {
  .cs-role__grid {
    flex-direction: row;
    gap: 56px;
  }

  .cs-role__title {
    flex: 0 0 auto;
  }
}