/* Pictro overrides on top of the shared case-study styles.
   Same layout, warmer accent, plus the few blocks that only exist here:
   the logo lockups, the hex palette and the mascote sheet. */

:root{
  --accent:#FF7A00;
  --accent-text:#C25400;
  --accent-soft:#FFF1E3;
}

/* Logo lockups — the marks sit on their own tinted cards so the light
   version stays visible and the dark one does not fight the page. */
.cs-logo-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:var(--measure-wide); margin:36px auto 0;
}
.cs-logo-card{
  border-radius:16px; border:1px solid var(--line); padding:28px 20px;
  display:flex; align-items:center; justify-content:center; min-height:120px;
}
.cs-logo-card img{ width:100%; max-width:200px; height:auto; display:block; cursor:zoom-in; }
.cs-logo-card.on-light{ background:#FFFDFA; }
.cs-logo-card.on-dark{ background:#1F2022; border-color:#1F2022; }
.cs-logo-card.on-accent{ background:#8E6FC4; border-color:#8E6FC4; }
@media (max-width:640px){ .cs-logo-row{ grid-template-columns:1fr; } }

/* Palette — plain hex swatches, no Tailwind class names involved */
.cs-palette{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  max-width:var(--measure-wide); margin:36px auto 0;
}
.cs-palette-item{ display:flex; flex-direction:column; align-items:center; gap:8px; width:82px; }
.cs-palette-chip{
  width:56px; height:56px; border-radius:14px; display:block; border:1px solid rgba(0,0,0,.06);
}
.cs-palette-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.cs-palette-hex{ font-size:10.5px; color:var(--gray); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Research findings — the reasoning behind the rest of the design */
.cs-findings{
  max-width:var(--measure); margin:32px auto 0; padding:24px 26px;
  border-radius:16px; background:var(--accent-soft); text-align:left;
}
.cs-findings-title{
  margin:0 0 14px; font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent-text);
}
.cs-findings ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cs-findings li{
  font-size:15.5px; line-height:1.55; color:var(--ink-soft); padding-left:18px; position:relative;
}
.cs-findings li::before{ content:"→"; position:absolute; left:0; color:var(--accent-text); }

/* Icon set — live Phosphor glyphs on their own tiles */
.cs-icon-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr)); gap:10px;
  max-width:560px; margin:36px auto 0;
}
.cs-icon-cell{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.cs-icon-cell i{ font-size:24px; line-height:1; }

/* The solution grid follows a paragraph here, so it needs its own top gap */
#pi-solution .cs-interface-grid{ margin-top:40px; }

/* Full walkthrough at the end of the solution: web dashboard through to app.
   Long enough that it gets controls instead of autoplaying on loop. */
.cs-solution-video{ margin:40px auto 0; max-width:var(--measure-wide); }
.cs-solution-video video{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#000;
}
.cs-solution-video figcaption{ text-align:center; color:var(--gray); font-size:13.5px; margin-top:12px; }
.cs-solution-video-source{ display:block; margin-top:6px; font-size:12.5px; color:var(--gray); opacity:.8; }

/* A link with no URL yet: present, but clearly not clickable */
.cs-textlink.is-soon{ color:var(--gray); cursor:default; display:inline-flex; align-items:center; gap:8px; }
.cs-textlink-soon{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent-text); background:var(--accent-soft); border-radius:999px; padding:3px 8px;
}

/* Mascote sheet — the illustrations are transparent PNGs, so they get a soft
   tinted stage instead of the bordered card used for screenshots. */
.cs-mascot-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:var(--measure-wide); margin:36px auto 0;
}
.cs-mascot-item{ margin:0; }
.cs-mascot-stage{
  background:var(--accent-soft); border-radius:18px; padding:24px;
  display:flex; align-items:center; justify-content:center; min-height:230px;
}
.cs-mascot-stage img{ max-height:190px; width:auto; max-width:100%; display:block; cursor:zoom-in; }
.cs-mascot-item figcaption{ text-align:center; font-size:13px; color:var(--gray); margin-top:10px; }
@media (max-width:640px){ .cs-mascot-row{ grid-template-columns:1fr; } }