/* ==========================================================================
   Case study cards
   ==========================================================================
   Shared by the homepage teaser, the /realisations grid and the detail
   template, so the three surfaces cannot drift apart. Ported from
   web/components/site/case-study-card.tsx.

   Editorial rules encoded here, do not undo them casually:

   - Only a published case is a link. An unpublished one renders as <article>
     with no arrow and a quiet "Étude de cas à venir" where the arrow would
     sit, so nothing on it promises a click it cannot honour.
   - A number the client has not confirmed never reaches an oversized numeral.
     Those cases show the dashed "Résultat à confirmer" pill instead.
   - The register line above a numeral says which claim is being made:
     "Résultat" is an outcome we caused, "Échelle" is the size of the system
     we built for. Conflating them is a lie a buyer can check.
   ========================================================================== */

/* The one heading the teaser and the index page share. Tracking is -0.025em,
   tighter than either size token, matching the shipped build. */
.case-heading {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .case-heading {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
  }
}

.case-heading__accent { color: var(--brand); }

/* --------------------------------------------------------------------------
   Cover. Hulusi's covers are light compositions at inconsistent ratios (1.53
   to 2.00) with the client's own label baked into a corner.

   These used to letterbox onto a light mount so every composition showed
   whole. Reversed 2026-09-07 at the main designer's request: a filled frame
   with no white bars wins over showing the full composition, so they crop. At
   16:9 that is at most about 14% off one axis, and it is the baked-in corner
   labels that pay it. Re-exporting the covers at a uniform 16:9 removes the
   crop entirely and is still the real fix.
   -------------------------------------------------------------------------- */
.case-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Stays white in both modes: it is the colour a light composition loads
     onto, and it shows through the moment an image is missing or slow. */
  background-color: var(--color-neutral-0);
}

.case-cover--empty { background-color: var(--background-subtle); }

.case-cover__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-featured:hover .case-cover__img,
.case-card:hover .case-cover__img { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .case-cover__img { transition: none; }
  .case-featured:hover .case-cover__img,
  .case-card:hover .case-cover__img { transform: none; }
}

/* Naming the client turns a generic broken-image box into this case's cover,
   not yet in. */
.case-cover__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  text-align: center;
  color: var(--muted-foreground);
}

.case-cover__placeholder svg { width: 1.25rem; height: 1.25rem; }

/* --------------------------------------------------------------------------
   Affordance badge: a filled brand disc with the out-of-page arrow. One
   component so the three card sizes cannot drift.
   -------------------------------------------------------------------------- */
.case-arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--brand);
  color: #ffffff;
}

.case-arrow--sm { width: 2.25rem; height: 2.25rem; }
.case-arrow--md { width: 2.5rem; height: 2.5rem; }
.case-arrow--lg { width: 2.75rem; height: 2.75rem; }

.case-arrow svg { width: 1rem; height: 1rem; }
.case-arrow--lg svg { width: 1.25rem; height: 1.25rem; }

/* Held back until the card is hovered or focused. */
.case-arrow--reveal {
  transform: translateY(0.5rem);
  opacity: 0;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.case-card:hover .case-arrow--reveal,
.case-card:focus-visible .case-arrow--reveal {
  transform: translateY(0);
  opacity: 1;
}

.case-featured:hover .case-arrow--lg { background-color: var(--brand-hover); }
.case-arrow--lg { transition: background-color 150ms ease; }

@media (prefers-reduced-motion: reduce) {
  .case-arrow--reveal, .case-arrow--lg { transition: none; }
}

/* -------------------------------------------------------------------------- */
.scope-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--background-muted);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

/* Dashed, so it never reads as a real value. */
.to-confirm-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px dashed var(--border-strong);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------- */
.kpi__register {
  margin-bottom: 0.375rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.kpi__value {
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--foreground);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
}

.kpi--lg .kpi__value {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
}

/* xl steps up only from md: at 60px it would overflow a three-column band on
   a phone. */
.kpi--xl .kpi__value {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
}

@media (min-width: 768px) {
  .kpi--xl .kpi__value {
    font-size: var(--text-display-xl-size);
    line-height: var(--text-display-xl-line);
  }
}

.kpi__label {
  margin-top: 0.25rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Featured card. Two columns, the oversized numeral as the anchor.
   -------------------------------------------------------------------------- */
.case-featured {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  transition: border-color 150ms ease;
}

.case-featured:hover { border-color: var(--border-strong); }

@media (min-width: 768px) {
  .case-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .case-featured { transition: none; }
}

.case-featured .case-cover { min-height: 18rem; }

@media (min-width: 768px) {
  .case-featured .case-cover { min-height: 0; height: 100%; }
}

.case-featured__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
}

.case-featured__eyebrow {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  letter-spacing: var(--text-overline-tracking);
  font-weight: var(--text-overline-weight);
  color: var(--muted-foreground);
}

.case-featured__client {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

.case-featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.case-featured__sector {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.case-featured__story {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

.case-featured__foot,
.case-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Grid card
   -------------------------------------------------------------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  transition: border-color 150ms ease;
}

.case-card:hover { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .case-card { transition: none; }
}

.case-card .case-cover { aspect-ratio: 16 / 9; }

.case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

/* Sector sits with the client name rather than buried: "have you built for my
   industry" is the first thing a buyer scans for. */
.case-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.case-card__client {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

.case-card__sector {
  margin-top: 0.25rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.case-card__story {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

.case-card__pending {
  min-width: 0;
  text-align: right;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

/* Fills a half-empty row. Never stands in for an absent one. */
.empty-cases {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border-strong);
  padding: 4rem 1.5rem;
  text-align: center;
}

.empty-cases__message {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--foreground);
}