/* ---------------------------------------------------------------------------
   The case studies index
   ---------------------------------------------------------------------------
   Nine cards, built from the page tree rather than from a typed list. See
   inc/case-studies.php for why that mattered: the old Elementor index carried
   eight hand-written cards while page 97 had nine children, so the newest and
   strongest study was missing from the page that exists to list them.
   ------------------------------------------------------------------------ */

.srcs-narrow { max-width: 66ch; }

.srcs-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(22px, 3vh, 34px);
}

@media (min-width: 760px)  { .srcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .srcs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * The whole card is the link, not a "read more" in the corner. A 300px card
 * with an 80px target is a target most people miss, and this is the same
 * decision the industry pages made for their case-study cards.
 */
.srk-page a.srcs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    transform 260ms var(--srk-ease, ease),
    border-color 260ms var(--srk-ease, ease);
}

.srk-page a.srcs-card:hover,
.srk-page a.srcs-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--srk-accent-live, var(--srh-accent));
}

/*
 * WHERE, not a category. Every one of these is a real place or a real sector,
 * so the label above the title does work that the title cannot: it tells a
 * reader scanning nine cards which one is near their problem.
 */
.srk-page .srcs-place {
  display: block;
  margin-bottom: 0.5em;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.srk-page .srcs-card h3 {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.28;
}

/* The summary takes the slack so every "Read the case study" lines up along the
   bottom of the row rather than floating wherever the sentence stopped. */
.srk-page .srcs-card p {
  flex: 1 1 auto;
  color: var(--srh-ink-soft);
  font-size: clamp(14px, 1vw, 15px);
}

.srk-page .srcs-more {
  margin-top: clamp(12px, 1.6vh, 18px);
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 600;
  font-size: clamp(13px, 0.95vw, 14px);
}

.srcs-copy { max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .srk-page a.srcs-card,
  .srk-page a.srcs-card:hover { transition: none; transform: none; }
}

/*
 * NINE CARDS IN THREE ROWS ran the scene 117px past its band. On a page whose
 * chevron moves one screen at a time the overflow is exactly the part the
 * chevron skips, and here that was the bottom row: Web3, hospitality and
 * storefronts would have been invisible to anyone using the chevron.
 *
 * The cards give back padding and a little leading rather than the summaries
 * losing words. Every one of those sentences is doing work - it is the only
 * thing on the card that says whether this deployment is near your problem.
 */
@media (min-width: 1100px) {
  .srk-page .srcs-card { padding: clamp(15px, 1.35vw, 20px); }
  .srk-page .srcs-card h3 { font-size: clamp(16px, 1.15vw, 18px); margin-bottom: 0.3em; }
  .srk-page .srcs-card p { font-size: clamp(13px, 0.92vw, 14px); line-height: 1.45; }
  .srk-page .srcs-more { margin-top: clamp(9px, 1.1vh, 13px); }
  .srcs-grid { gap: clamp(12px, 1.3vw, 16px); }
}