/* work.css: /work and /work/:slug (rebuilt 2026-10-04, brand sheet step
 * 5, batch B). Loaded after store-mgmt.css, core-pages.css and
 * service.css, which carry the tokens, type, buttons, the top grid, the
 * long-read prose (.sv-guide) and the related lists (.sv-links). This
 * file is the store grid, the case-study top and the section rows.
 * Grounds come from theme.css. No :root, reset or body{}.
 */

.smp #wk-hero,
.smp #cs-hero { padding: 8.5rem 0 5rem; overflow: hidden; }
.smp #cs-hero { padding-bottom: 4.5rem; }

/* ── The index: two groups of stores ───────────────────────────────── */
.smp .wk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 30px; }
.smp .wk-head p { margin: 0; font-size: 16px; color: var(--sm-body); max-width: 34em; }
.smp .wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; list-style: none; margin: 0; padding: 0; }
.smp .wk-store { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.smp .wk-store img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--sm-line);
  background: var(--sm-cream);
  transition: border-color .2s ease;
}
.smp .wk-industry { margin-top: 14px; font: 500 12.5px/1.3 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); }
.smp .wk-name { margin-top: 6px; font: 400 1.15rem/1.25 'Sora', sans-serif; letter-spacing: -0.02em; color: var(--sm-ink); }
.smp .wk-what { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--sm-body); }
@media (hover: hover) {
  .smp .wk-store:hover img { border-color: var(--sm-accent); }
  .smp .wk-store:hover .wk-name { text-decoration: underline; text-decoration-color: var(--sm-accent); text-underline-offset: 4px; }
}
.smp #wk-reviews .sm-reviews-head { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── A case study: the top ─────────────────────────────────────────── */
.smp .sm-kick a { color: inherit; text-decoration: none; }
.smp .sm-kick a:hover { color: var(--sm-ink); text-decoration: underline; text-underline-offset: 3px; }
.smp .cs-sub { margin: 18px 0 0; font: 400 1.25rem/1.45 'DM Sans', sans-serif; color: var(--sm-body); max-width: 30em; }
.smp .cs-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sm-line); }
.smp .cs-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sm-line); }
.smp .cs-facts dt { font-size: 14px; color: var(--sm-muted); }
.smp .cs-facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--sm-ink); }
.smp .cs-facts a { color: var(--sm-ink); text-decoration: underline; text-decoration-color: var(--sm-accent); text-underline-offset: 3px; }
.smp .cs-facts a:hover { color: var(--sm-accent); }
.smp .cs-tech { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.smp .cs-tech li { padding: 3px 10px; border-radius: 999px; background: var(--sw-chip, rgba(255, 255, 255, .08)); font-size: 13px; color: var(--sm-body); }
.smp .cs-cover { margin: 56px 0 0; }
.smp .cs-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  border: 1px solid var(--sm-line);
}

/* ── A case study: the rows ────────────────────────────────────────── */
.smp .cs-sec,
.smp .cs-deep,
.smp .cs-more,
.smp #cs-brief { padding: 5.5rem 0; }
.smp .cs-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.smp .cs-row-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.smp .cs-row-flip .cs-row-text-col { order: 2; }
.smp .cs-row-text { grid-template-columns: minmax(0, 760px); }
.smp .cs-row-text-col .sm-eyebrow { font-family: 'Sora', sans-serif; letter-spacing: 0; font-size: 15px; }
.smp .cs-row-text-col .sm-h2 { margin-bottom: 16px; }
.smp .cs-row-body { margin: 0; font-size: 17px; line-height: 1.7; color: var(--sm-body); max-width: 34em; }
.smp .cs-shot { margin: 0; display: flex; justify-content: center; }
.smp .cs-shot img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 620px;
  border-radius: 14px;
  border: 1px solid var(--sm-line);
}

/* The write-up's own markup (from caseStudies.ts), inside .sv-guide. */
.smp .sv-guide .cs-deep-dive-eyebrow {
  display: block;
  margin-bottom: 12px;
  font: 500 13px/1.3 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-accent);
}
.smp .sv-guide .cs-deep-dive-intro { font-size: 19px; line-height: 1.6; color: var(--sm-ink); }

@media (prefers-reduced-motion: reduce) { .smp .wk-store img { transition: none; } }

@media (max-width: 1024px) {
  .smp .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smp .cs-row,
  .smp .cs-row-flip { grid-template-columns: 1fr; gap: 32px; }
  .smp .cs-row-flip .cs-row-text-col { order: 0; }
  .smp .cs-shot { justify-content: flex-start; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .smp #wk-hero,
  .smp #cs-hero { padding-top: 6.5rem !important; padding-bottom: 2.75rem !important; }
  .smp #wk-hero .sm-split { display: none; }
  .smp #wk-hero .sm-cta { margin-top: 16px; }
  .smp .cs-sec,
  .smp .cs-deep,
  .smp .cs-more,
  .smp #cs-brief { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .smp .sm-h2.sm-h2-sm { font-size: 1.6rem !important; }
  .smp .wk-head { margin-bottom: 18px; }
  .smp .wk-head p { font-size: 15px; }
  /* Two across on a phone: the picture and the name, the page says the rest. */
  .smp .wk-grid { gap: 22px 14px; }
  .smp .wk-industry,
  .smp .wk-what { display: none; }
  .smp .wk-name { margin-top: 8px; font-size: 1rem; }
  .smp .wk-store img { border-radius: 10px; }
  .smp .cs-sub { font-size: 1.05rem; margin-top: 12px; }
  .smp .cs-facts > div { grid-template-columns: 92px minmax(0, 1fr); padding: 11px 0; }
  .smp .cs-cover { margin-top: 28px; }
  .smp .cs-cover img { max-height: 260px; border-radius: 10px; }
  .smp .cs-row { gap: 20px; }
  .smp .cs-row-body { font-size: 16px; }
  .smp .cs-shot img { max-height: 420px; border-radius: 10px; }
}