/* ==========================================================================
   MRIYA Marketing — Case Studies index

   Frame: 1440×4739 desktop, 393×5867 mobile. One heading, then cards of
   1348×388 in three columns: image 360, body 698, metrics 290.
   ========================================================================== */
.case-index {
  background-color: var(--color-bg);
  /* the header is fixed at top 20 and 85 tall, and the frame gaps 42 under it */
  padding-block: 9.8125rem 6.25rem; /* 157px / 100px */
}

.case-index__title {
  margin-block-end: 2.625rem; /* 42px */
  font-family: var(--font-display);
  font-size: var(--fs-display); /* 82px */
  font-weight: 500;
  line-height: var(--lh-tight);
  text-align: center; /* CENTER on the 1440 and the 393 frame alike */
  letter-spacing: var(--ls-display);
  text-align: center;
  color: var(--color-text-bright);
}

.case-index__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
}

/* --- Card ---------------------------------------------------------------- */
.case-card {
  display: grid;
  grid-template-columns: 26.71% 51.78% auto; /* 360 / 698 / 290 of 1348 */
  min-height: 24.25rem; /* 388px */
  border: 1px solid #d7d8e0;
  border-radius: var(--radius-lg); /* 20px */
  overflow: hidden;
  color: inherit;
  transition: box-shadow var(--duration) var(--ease);
}

/* Hover reads as a violet glow under the card — the border stays as drawn and
   the card keeps its place in the row. Two layers: a tight one to seat the card
   and a wide one for the bloom. */
a.case-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(128, 26, 168, 0.45),
    0 1.5rem 4rem rgba(128, 26, 168, 0.5);
}

.case-card__media {
  overflow: hidden;
  border-radius: var(--radius-sm); /* 10px in the frame */
}

.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: 2rem; /* 32px */
  border-inline: 1px solid #d7d8e0;
}

.case-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 16px */
}

.case-card__label {
  font-family: var(--font-display);
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  line-height: 1.6;
  color: #b2b4c3;
}

.case-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 400;
  line-height: var(--lh-tight);
  color: #f3f6f8;
}

.case-card__place {
  font-family: var(--font-display);
  font-size: 0.875rem; /* 14px */
  line-height: 1.2;
  color: #f3f6f8;
}

.case-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 24px */
  max-width: 33.6875rem; /* 539px */
}

.case-card__problem {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px */
}

.case-card__problem-label {
  font-family: var(--font-display);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: #b2b4c3;
}

.case-card__problem-text {
  font-family: var(--font-display);
  font-size: var(--fs-base); /* 16px */
  line-height: 1.375; /* 22 / 16 */
  color: #f3f6f8;
}

/* Same pill as the layout's light button, but it is not itself clickable —
   the card around it carries the link. */
.case-card__button {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-height: 3.875rem; /* 62px */
  padding-inline: 2.625rem; /* 42px */
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-light);
  font-family: var(--font-display);
  font-size: var(--fs-lg); /* 20px */
  line-height: var(--lh-normal);
  color: var(--color-text-dark);
  transition: box-shadow var(--duration) var(--ease);
}

/* The same lift .btn--light gets everywhere else on the site. */
a.case-card:hover .case-card__button {
  box-shadow: 0 0.75rem 2rem rgba(226, 226, 226, 0.22);
}

/* --- Metrics ------------------------------------------------------------- */
.case-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px */
  padding: 0.25rem;
}

/* The frame draws a divider under each row — no box, no radius. */
.case-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem; /* 12px */
  flex: 1 1 0;
  min-height: 5.75rem; /* 92px */
  padding: 0.75rem 1.25rem; /* 12 / 20 */
  border-block-end: 1px solid #d7d8e0;
}

/* Nothing follows the last row, so it carries no rule */
.case-metric:last-child {
  border-block-end: 0;
}

.case-metric__value {
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24px */
  font-weight: 800;
  line-height: 1;
  color: #f3f6f8;
}

.case-metric__label {
  font-family: var(--font-display);
  font-size: 0.75rem; /* 12px */
  line-height: 1.33;
  color: #e7ecf3;
}

/* ==========================================================================
   Tablet — the metric column drops under the copy
   ========================================================================== */
@media (max-width: 78.75em) {
  .case-index__title {
    font-size: clamp(2.5rem, 6vw, 5.125rem);
  }

  .case-card {
    grid-template-columns: 32% 1fr;
  }

  .case-card__body {
    border-inline-end: 0;
  }

  .case-card__metrics {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .case-metric {
    flex: 1 1 40%;
  }
}

/* ==========================================================================
   The 393 frame — one column: image 256 tall, copy, then 2×2 metrics
   ========================================================================== */
@media (max-width: 47.9375em) {
  .case-index {
    padding-block: 6.25rem 4.375rem; /* 100px / 70px */
  }

  .case-index__title {
    margin-block-end: var(--space-2xl); /* 184 − 152 */
    font-size: 3.25rem; /* 52px */
    line-height: 1; /* the frame gives the 52px face a 52px box */
  }

  /* 12 between the label and the name here, against 16 on the wide card. */
  .case-card__head {
    gap: 0.75rem;
  }

  .case-index__list {
    gap: var(--space-2xl); /* 32px */
  }

  .case-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .case-card__media {
    height: 16rem; /* 256px */
  }

  .case-card__body {
    gap: var(--space-md);
    padding: var(--space-md);
    border-inline: 0;
    /* The frame draws one rule, between the body and the metrics. On the top
       edge it cut the card right under the photo, where there is none. */
    border-block-end: 1px solid #d7d8e0;
  }

  .case-card__foot {
    max-width: none;
  }

  .case-card__button {
    min-height: 3.25rem;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: 14.375rem; /* 230px */
  }

  .case-card__metrics {
    /* Back into the single column. The tablet rule parks the metrics in column
       2, and left standing here it spawned an implicit second column that took
       width off the picture until it was a sliver. */
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two per row: the frame rules the gutter between the columns and the line
     under the first row, and leaves the outer edges to the card border. */
  .case-metric {
    border-block-end: 1px solid #d7d8e0;
  }

  .case-metric:nth-last-child(-n + 2) {
    border-block-end: 0;
  }

  .case-metric:nth-child(odd):not(:last-child) {
    border-inline-end: 1px solid #d7d8e0;
  }
}