/* =============================================================
   ArayDent — /cases — editorial mosaic + case detail
   Uses existing tokens only.
============================================================== */

/* ──────────────────────────────────────────────────────────────
   Page hero (cases)
─────────────────────────────────────────────────────────────── */
.cases-page-hero{
  padding:200px 0 64px;background:var(--charcoal-forest);color:var(--linen);
  position:relative;overflow:hidden}
.cases-page-hero .container{position:relative;z-index:2}
.cases-page-hero .eyebrow{margin-bottom:36px}
.cases-page-hero .h1{max-width:14ch}
.cases-page-hero .h1 em{font-style:italic;font-weight:300;color:var(--sand)}
.cases-page-hero .lead-row{
  display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:flex-end;
  margin-top:48px;padding-top:48px;border-top:1px solid var(--rule-dark)}
.cases-page-hero .lead-row p{
  font-size:18px;line-height:1.6;color:rgba(239,233,221,.78);max-width:48ch;margin:0}
.cases-page-hero .lead-row .counter{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(239,233,221,.5);text-align:right;
  display:flex;flex-direction:column;gap:6px}
.cases-page-hero .lead-row .counter strong{
  font-family:var(--display);font-weight:300;font-size:88px;line-height:.9;
  letter-spacing:-.02em;color:var(--copper);font-variant-numeric:tabular-nums;
  font-style:italic}
.cases-page-hero .lead-row .counter strong .of{
  font-size:.32em;color:rgba(239,233,221,.55);
  font-family:var(--ui);font-style:normal;font-weight:500;
  letter-spacing:.08em;margin-left:10px;vertical-align:top}

@media (max-width:880px){
  .cases-page-hero{padding:140px 0 48px}
  .cases-page-hero .lead-row{grid-template-columns:1fr;gap:24px}
  .cases-page-hero .lead-row .counter{text-align:left}
  .cases-page-hero .lead-row .counter strong{font-size:64px}
}

/* ──────────────────────────────────────────────────────────────
   Filter bar — sticky, dark
─────────────────────────────────────────────────────────────── */
.cases-filter{
  position:sticky;top:0;z-index:40;
  background:rgba(11,31,26,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark)}
.cases-filter .container{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.cases-filter .chips{display:flex;gap:6px;flex-wrap:wrap}
.cases-filter button{
  padding:10px 18px;height:40px;
  border-radius:999px;background:transparent;
  border:1px solid var(--rule-dark);
  color:rgba(239,233,221,.75);
  font-family:var(--ui);font-size:12px;letter-spacing:.06em;font-weight:500;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.cases-filter button:hover{border-color:var(--copper);color:var(--linen)}
.cases-filter button.active{
  background:var(--copper);border-color:var(--copper);color:var(--onyx)}
.cases-filter .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(239,233,221,.5)}
.cases-filter .meta b{color:var(--copper);font-weight:500;font-style:italic;
  font-family:var(--display);font-size:14px;letter-spacing:0}

@media (max-width:760px){
  .cases-filter .container{padding-top:14px;padding-bottom:14px}
  .cases-filter button{height:36px;padding:8px 14px;font-size:11px}
  .cases-filter .meta{display:none}
}

/* ──────────────────────────────────────────────────────────────
   Shared tile bits — BA + meta overlays
─────────────────────────────────────────────────────────────── */
.case-tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--charcoal-forest);
  transition:opacity .25s var(--ease)}
.case-tile.is-hidden{display:none}

/* The image area = the BA slider (full bleed inside the tile). */
.case-tile .ba{
  position:relative;width:100%;height:100%;
  border:1px solid var(--rule-dark);overflow:hidden;
  user-select:none;touch-action:none;cursor:ew-resize;
  background:var(--onyx)}
.case-tile .ba-before,.case-tile .ba-after{position:absolute;inset:0}
.case-tile .ba-before{z-index:1}
.case-tile .ba-after{z-index:2;clip-path:inset(0 0 0 50%)}
.case-tile .ba-before .ph,
.case-tile .ba-after  .ph{position:absolute;inset:0}

/* Tag chips */
.case-tile .ba-tag{
  position:absolute;bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(7,13,12,.72);color:var(--linen);
  padding:6px 10px;z-index:4;border-radius:2px;
  backdrop-filter:blur(6px)}
.case-tile .ba-tag.before{left:14px}
.case-tile .ba-tag.after{right:14px}

.case-tile .ba-handle{
  position:absolute;top:0;bottom:0;width:1px;background:var(--copper);
  left:50%;z-index:3;pointer-events:none}
.case-tile .ba-knob{
  position:absolute;top:50%;left:50%;
  width:36px;height:36px;border-radius:50%;
  background:var(--copper);color:var(--onyx);
  transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(181,122,74,.18);
  transition:transform .15s var(--ease)}
.case-tile .ba:active .ba-knob{transform:translate(-50%,-50%) scale(.94)}
.case-tile .ba-knob svg{
  width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* Top-corner labels — sit above the slider, pointer-events:none so drag works through */
.case-tile .tile-head{
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  z-index:5;pointer-events:none}
.case-tile .tile-num{color:var(--copper)}
.case-tile .tile-num::before{content:"+ ";opacity:.6}
.case-tile .tile-dir{
  color:var(--linen);background:rgba(7,13,12,.5);padding:4px 8px;
  backdrop-filter:blur(6px);border-radius:2px}

/* Tile body (below the image) */
.case-tile .tile-body{
  padding:22px 4px 0;display:flex;flex-direction:column;gap:12px;
  pointer-events:auto}
.case-tile .tile-title{
  font-family:var(--display);font-weight:300;letter-spacing:-.012em;line-height:1.08;
  color:var(--linen);margin:0;
  font-size:clamp(20px,1.6vw,26px)}
.case-tile .tile-title em{font-style:italic;color:var(--sand);font-weight:300}
.case-tile .tile-title a{color:inherit;transition:color .2s var(--ease)}
.case-tile .tile-title a:hover{color:var(--copper)}

.case-tile .tile-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:rgba(239,233,221,.55)}
.case-tile .tile-meta .open{
  display:inline-flex;gap:8px;align-items:center;color:var(--copper);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;font-size:11px;
  transition:gap .2s var(--ease)}
.case-tile .tile-meta .open::after{content:"→";font-family:var(--ui)}
.case-tile .tile-meta .open:hover{gap:12px}

/* When the tile is intended as a "feature" (large hero), upgrade the title size */
.case-tile.is-feature .tile-title{font-size:clamp(28px,2.4vw,42px);line-height:1.04}
.case-tile.is-feature .tile-body{padding-top:28px;gap:16px}

/* ──────────────────────────────────────────────────────────────
   VARIANT A — Asymmetric bento mosaic
   12-col grid; sizes: wide(8), tall(4), square(4), half(6)
─────────────────────────────────────────────────────────────── */
.cases-section{padding:64px 0 120px;background:var(--charcoal-forest);color:var(--linen)}
.cases-section .container{position:relative}

.cases-mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px 24px}
.cases-mosaic .case-tile{position:relative}
.cases-mosaic .case-tile .ba-wrap{position:relative;width:100%}

.case-tile.size-wide   { grid-column:span 8 }
.case-tile.size-tall   { grid-column:span 4 }
.case-tile.size-square { grid-column:span 4 }
.case-tile.size-half   { grid-column:span 6 }
.case-tile.size-uniform{ grid-column:span 6 }

.case-tile.size-wide   .ba-wrap { aspect-ratio:8/5 }
.case-tile.size-tall   .ba-wrap { aspect-ratio:4/5 }
.case-tile.size-square .ba-wrap { aspect-ratio:1/1 }
.case-tile.size-half   .ba-wrap { aspect-ratio:5/4 }
.case-tile.size-uniform .ba-wrap{ aspect-ratio:2/1 }

.case-tile .ba-wrap > .ba{position:absolute;inset:0}

/* Big break-row in the mosaic — a typographic year/section anchor */
.mosaic-anchor{
  grid-column:1 / -1;
  display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  padding:48px 0 20px;
  border-bottom:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,233,221,.55)}
.mosaic-anchor .yr{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(48px,5vw,80px);line-height:.9;
  letter-spacing:-.02em;color:var(--copper);
  text-transform:none}
.mosaic-anchor .meta{font-family:var(--mono)}
.mosaic-anchor .meta b{color:var(--linen);font-weight:400}

/* ──────────────────────────────────────────────────────────────
   VARIANT B — Editorial spread with year columns
   Each year = a row with a giant left number + cases beside it
─────────────────────────────────────────────────────────────── */
.cases-spread{display:flex;flex-direction:column;gap:96px}
.cases-spread .spread-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:48px;
  align-items:start}
.cases-spread .spread-row .yr-col{
  position:sticky;top:96px;align-self:start;
  display:flex;flex-direction:column;gap:8px;
  padding-top:6px;
  border-top:1px solid var(--copper)}
.cases-spread .spread-row .yr-col .yr{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(72px,8vw,120px);line-height:.92;
  letter-spacing:-.02em;color:var(--copper);
  font-variant-numeric:tabular-nums;margin-top:14px}
.cases-spread .spread-row .yr-col .yr-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,221,.55);margin-top:18px;line-height:1.5}
.cases-spread .spread-row .yr-col .yr-meta b{color:var(--linen);font-weight:400}

/* Row layouts inside variant B — alternating feature + side-grid */
.cases-spread .spread-row .row-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:32px 24px}
/* Within a year-row, tiles can take spans 12, 8, 6, 4 */
.cases-spread .case-tile.b-feature  { grid-column:span 12 }
.cases-spread .case-tile.b-half     { grid-column:span 6  }
.cases-spread .case-tile.b-third    { grid-column:span 4  }
.cases-spread .case-tile.b-wide     { grid-column:span 8  }
.cases-spread .case-tile.b-tall     { grid-column:span 4  }

.cases-spread .case-tile.b-feature .ba-wrap{aspect-ratio:16/7}
.cases-spread .case-tile.b-half    .ba-wrap{aspect-ratio:5/4}
.cases-spread .case-tile.b-third   .ba-wrap{aspect-ratio:4/5}
.cases-spread .case-tile.b-wide    .ba-wrap{aspect-ratio:8/5}
.cases-spread .case-tile.b-tall    .ba-wrap{aspect-ratio:4/5}

.cases-spread .case-tile.b-feature .tile-title{font-size:clamp(32px,3.2vw,52px);line-height:1.02}
.cases-spread .case-tile.b-feature .tile-body{flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:48px;padding-top:32px}
.cases-spread .case-tile.b-feature .tile-body .tile-title{max-width:16ch;flex:1}
.cases-spread .case-tile.b-feature .tile-body .tile-meta{flex-direction:column;align-items:flex-end;
  gap:14px;text-align:right;max-width:340px}

@media (max-width:980px){
  .cases-spread .spread-row{grid-template-columns:1fr;gap:24px}
  .cases-spread .spread-row .yr-col{position:relative;top:0;padding-top:0;border-top:0;
    flex-direction:row;align-items:baseline;gap:20px}
  .cases-spread .spread-row .yr-col .yr{font-size:56px;margin-top:0}
  .cases-spread .spread-row .yr-col .yr-meta{margin-top:0}
  .cases-spread .case-tile.b-feature .tile-body{flex-direction:column;align-items:flex-start;gap:14px}
  .cases-spread .case-tile.b-feature .tile-body .tile-meta{align-items:flex-start;text-align:left}
}

/* ──────────────────────────────────────────────────────────────
   Mobile collapse — common
─────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .cases-section{padding:32px 0 80px}

  .cases-mosaic{gap:24px 16px}
  .case-tile.size-wide,
  .case-tile.size-tall,
  .case-tile.size-square,
  .case-tile.size-half,
  .case-tile.size-uniform { grid-column:span 12 }

  .case-tile.size-wide   .ba-wrap,
  .case-tile.size-tall   .ba-wrap,
  .case-tile.size-square .ba-wrap,
  .case-tile.size-half   .ba-wrap,
  .case-tile.size-uniform .ba-wrap{ aspect-ratio:2/1 }

  .cases-spread{gap:64px}
  .cases-spread .spread-row .row-grid{gap:24px 16px}
  .cases-spread .case-tile.b-feature,
  .cases-spread .case-tile.b-half,
  .cases-spread .case-tile.b-third,
  .cases-spread .case-tile.b-wide,
  .cases-spread .case-tile.b-tall { grid-column:span 12 }
  .cases-spread .case-tile.b-feature .ba-wrap{aspect-ratio:5/4}

  .case-tile .tile-head{top:10px;left:10px;right:10px}
  .case-tile .ba-tag{bottom:10px;padding:5px 9px}
  .case-tile .ba-tag.before{left:10px}
  .case-tile .ba-tag.after{right:10px}
}

/* ──────────────────────────────────────────────────────────────
   CASE DETAIL — /cases/047.html etc.
   Just a clean hero with B/A + facts + bridge back.
─────────────────────────────────────────────────────────────── */
.case-detail{padding:160px 0 120px;background:var(--charcoal-forest);color:var(--linen);
  position:relative;overflow:hidden}
.case-detail .container{position:relative;z-index:2}

.case-detail .breadcrumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,221,.5);
  display:flex;align-items:center;gap:14px;
  margin-bottom:48px;
  /* override the .breadcrumb rule meant for light service pages */
  background:transparent;padding:0}
.case-detail .breadcrumb a{color:rgba(239,233,221,.7);transition:color .2s var(--ease)}
.case-detail .breadcrumb a:hover{color:var(--copper)}
.case-detail .breadcrumb .sep{opacity:.4}
.case-detail .breadcrumb .here{color:var(--copper)}

.case-detail .detail-head{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;
  margin-bottom:64px}
.case-detail .detail-head .eyebrow{margin-bottom:32px}
.case-detail .detail-head .h1{max-width:18ch}
.case-detail .detail-head .h1 em{font-style:italic;color:var(--sand);font-weight:300}
.case-detail .detail-head .right-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,221,.55);text-align:right;line-height:2}
.case-detail .detail-head .right-meta b{color:var(--linen);font-weight:400}

.case-detail-ba-row{
  display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:start;
  margin-bottom:80px}

.case-detail .detail-ba{
  position:relative;aspect-ratio:2/1;
  border:1px solid var(--rule-dark);overflow:hidden;
  user-select:none;touch-action:none;cursor:ew-resize;
  background:var(--onyx)}
.case-detail .detail-ba .ba-before,
.case-detail .detail-ba .ba-after{position:absolute;inset:0}
.case-detail .detail-ba .ba-before{z-index:1}
.case-detail .detail-ba .ba-after{z-index:2;clip-path:inset(0 0 0 50%)}
.case-detail .detail-ba .ba-before .ph,
.case-detail .detail-ba .ba-after  .ph{position:absolute;inset:0}
.case-detail .detail-ba .ba-tag{
  position:absolute;top:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(7,13,12,.72);padding:6px 10px;color:var(--linen);z-index:4;
  backdrop-filter:blur(6px)}
.case-detail .detail-ba .ba-tag.before{left:18px}
.case-detail .detail-ba .ba-tag.after{right:18px}
.case-detail .detail-ba .ba-handle{
  position:absolute;top:0;bottom:0;width:1px;background:var(--copper);left:50%;z-index:3;
  pointer-events:none}
.case-detail .detail-ba .ba-knob{
  position:absolute;top:50%;left:50%;
  width:48px;height:48px;border-radius:50%;background:var(--copper);
  transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;color:var(--onyx);
  box-shadow:0 0 0 5px rgba(181,122,74,.18);
  transition:transform .15s var(--ease)}
.case-detail .detail-ba:active .ba-knob{transform:translate(-50%,-50%) scale(.95)}
.case-detail .detail-ba .ba-knob svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* Right column — facts + quote */
.case-detail .detail-facts{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--rule-dark)}
.case-detail .detail-facts .fact{
  padding:20px 0;border-bottom:1px solid var(--rule-dark);
  display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:baseline}
.case-detail .detail-facts .fact .key{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(239,233,221,.5)}
.case-detail .detail-facts .fact .val{
  font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:-.005em;
  color:var(--linen)}
.case-detail .detail-facts .fact .val em{font-style:italic;color:var(--sand)}

.case-detail .detail-quote{
  margin-top:40px;font-family:var(--display);font-weight:300;font-style:italic;
  font-size:22px;line-height:1.4;color:var(--sand);max-width:480px;
  position:relative;padding-left:24px}
.case-detail .detail-quote::before{
  content:"“";position:absolute;left:-8px;top:-8px;font-size:48px;color:var(--copper);
  font-style:normal;line-height:1}

/* Clinical-approach paragraph — sits between BA-row and actions, full width */
.case-detail .detail-clinical{
  display:grid;grid-template-columns:280px 1fr;gap:80px;
  margin:0 0 64px;
  padding-top:48px;border-top:1px solid var(--rule-dark)}
.case-detail .detail-clinical .dc-head{
  display:flex;flex-direction:column;gap:14px}
.case-detail .detail-clinical .dc-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,233,221,.42)}
.case-detail .detail-clinical .dc-body{
  font-family:var(--display);font-weight:300;font-size:24px;line-height:1.45;
  color:var(--linen);max-width:62ch;letter-spacing:-.005em}

.case-detail .detail-actions{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:40px;border-top:1px solid var(--rule-dark)}

@media (max-width:980px){
  .case-detail{padding:120px 0 80px}
  .case-detail .detail-head{grid-template-columns:1fr;gap:24px;align-items:flex-start}
  .case-detail .detail-head .right-meta{text-align:left}
  .case-detail-ba-row{grid-template-columns:1fr;gap:40px;margin-bottom:48px}
  .case-detail .detail-ba{aspect-ratio:2/1}
  .case-detail .detail-clinical{grid-template-columns:1fr;gap:20px;margin-bottom:48px;padding-top:32px}
  .case-detail .detail-clinical .dc-body{font-size:20px}
}

/* ──────────────────────────────────────────────────────────────
   Mobile-preview overrides (when previewed via Tweaks)
─────────────────────────────────────────────────────────────── */
body.preview-mobile .cases-page-hero{padding:120px 0 40px}
body.preview-mobile .cases-page-hero .lead-row{grid-template-columns:1fr;gap:20px}
body.preview-mobile .cases-page-hero .lead-row .counter{text-align:left}
body.preview-mobile .cases-mosaic .case-tile,
body.preview-mobile .cases-spread .case-tile{grid-column:span 12}
body.preview-mobile .cases-mosaic .case-tile .ba-wrap,
body.preview-mobile .cases-spread .case-tile .ba-wrap{aspect-ratio:4/5}
body.preview-mobile .cases-spread .spread-row{grid-template-columns:1fr;gap:24px}
body.preview-mobile .cases-spread .spread-row .yr-col{position:relative;top:0;border-top:0;
  flex-direction:row;align-items:baseline;gap:20px;padding-top:0}
body.preview-mobile .cases-spread .spread-row .yr-col .yr{font-size:48px;margin-top:0}
body.preview-mobile .cases-spread .spread-row .yr-col .yr-meta{margin-top:0}
body.preview-mobile .case-detail{padding:96px 0 64px}
body.preview-mobile .case-detail .detail-head{grid-template-columns:1fr;gap:24px}
body.preview-mobile .case-detail-ba-row{grid-template-columns:1fr;gap:32px}