/* =====================================================================
   YLP Studio — CASE STUDY page components (case-study.html)
   Relies on tokens.css + styles.css for the shared design system
   (header, footer, buttons, type, .wrap/.section*). Only the case-study-
   specific components live here; class names are unique to this page.
   ===================================================================== */

/* hero */
.cs-hero { padding-top: var(--s-4); padding-bottom: var(--s-4); }
@media (min-width: 1025px) { .cs-hero { padding-top: var(--s-5); padding-bottom: var(--s-5); } }
.backlink { display: inline-block; color: var(--ink); font-weight: var(--w-bold); font-size: 15px;
  text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 1px; margin-bottom: var(--s-4); }
.backlink:hover { box-shadow: inset 0 -8px 0 var(--volt); }

/* numbered rows */
.numbox { display: inline-block; background: var(--volt); color: var(--ink); font-weight: var(--w-black);
  letter-spacing: -.03em; line-height: 1; padding: .12em .22em; border-radius: var(--r);
  font-size: 28px; font-variant-numeric: tabular-nums; }
.numrow { margin: 0 0 16px; }

.cs-gallery { padding-top: 0; }
.v-row { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: var(--s-5); margin-top: var(--s-5);
  border-top: 1px solid var(--hairline); }
.v-row:first-child { border-top: 0; margin-top: var(--s-1); padding-top: 0; }
@media (min-width: 900px) { .v-row { grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; } }
.v-head { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.v-head .numrow { margin: 0; }
.v-head .numbox { font-size: 44px; padding: .1em .2em; }
.rtitle { font-size: 21px; font-weight: var(--w-bold); line-height: 1.25; letter-spacing: -.02em; margin: 0; }
.rnote { font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 44ch; }
.v-eyebrow { font-size: 14px; font-weight: var(--w-bold); letter-spacing: .02em; color: var(--ink-soft); margin: 24px 0 0; }
.v-before { margin-top: 8px; max-width: none; }

/* before / after image frames + badges */
.ba { position: relative; margin: 0; }
.ba > img { width: 100%; display: block; border: 1px solid var(--hairline); background: var(--paper); }
.cs-tag { position: absolute; top: 12px; right: 12px; font-size: 12.5px; font-weight: var(--w-bold); line-height: 1;
  padding: 5px 10px; border-radius: var(--r); background: var(--paper); color: var(--grey); border: 1px solid var(--hairline); z-index: 3; }
.cs-tag--after { background: var(--volt); color: var(--ink); border-color: var(--volt); }

/* hover callouts on the rebuilt image */
.v-after { cursor: pointer; overflow: hidden; }
.v-after .hc-ov { position: absolute; inset: 0; background: rgba(14, 15, 18, .5); opacity: 0;
  transition: opacity var(--motion) var(--ease); z-index: 2; }
.v-after:hover .hc-ov, .v-after:focus-within .hc-ov, .v-after.is-open .hc-ov { opacity: 1; }
.hc-tags { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end;
  gap: 9px; z-index: 3; opacity: 0; transition: opacity var(--motion) var(--ease); }
.v-after:hover .hc-tags, .v-after:focus-within .hc-tags, .v-after.is-open .hc-tags { opacity: 1; }
.hc-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: var(--w-bold);
  line-height: 1.2; padding: 7px 11px; border-radius: var(--r); background: var(--volt); color: var(--ink); }
.hc-chip .dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--volt); border: 2px solid var(--ink); }

/* closing CTA (graphite) — namespaced so it never touches the homepage .close */
.cs-close { text-align: center; }
.cs-close__inner { max-width: 760px; margin: 0 auto; }
.cs-close__tick { display: block; width: var(--s-4); height: 3px; background: var(--volt); margin: 0 auto var(--s-3); }
.cs-close .section-head { color: var(--warm-white); font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.06;
  letter-spacing: -.035em; max-width: 22ch; margin: 0 auto var(--s-3); }
.cs-close__lead { font-size: 19px; line-height: 1.55; color: var(--stone); margin: 0 auto var(--s-4); max-width: 52ch; }
.cs-close__lead b { font-weight: var(--w-bold); }
.vt { color: var(--volt); }
.cs-close__row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; justify-content: center; }
.cs-close__link { color: var(--warm-white); font-weight: var(--w-bold); font-size: 15px; text-decoration: none;
  border-bottom: 2px solid var(--volt); padding-bottom: 1px; }

/* back-to-top square (footer, top-right) */
.foot-toptop { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); }
.to-top { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: var(--volt); color: var(--ink); border: 0; border-radius: var(--r); text-decoration: none;
  font-size: 22px; font-weight: var(--w-black); line-height: 1; cursor: pointer;
  transition: background var(--motion) var(--ease), transform 90ms var(--ease); }
.to-top:hover { background: var(--volt-hover); }
.to-top:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) { .v-after .hc-ov, .v-after .hc-tags, .to-top { transition: none; } }