/* Case-study page — extends ../styles.css (tokens, header, footer, dividers). */

.case-study{
  background:var(--yellow);
  position:relative;
  padding:96px 64px 110px;
}
.case-study > .zigzag-top{--divider-color:var(--pink)}
body.case-study-page footer > .scallop-top{--divider-color:var(--yellow)}

.case-study-inner{max-width:1100px;margin:0 auto}

/* Intro */
.case-study-intro{margin-bottom:24px}
.case-study-title{
  font-family:var(--font-display);font-weight:400;
  color:var(--purple);
  font-size:clamp(32px,4.45vw,64px);
  line-height:1.35;
  margin:0 0 12px;
}
.case-study-subtitle{
  font-family:var(--font-body);
  color:var(--ink);
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.5;
  margin:0 0 20px;
}
.case-study-tags{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--font-body);font-weight:700;
  font-size:14px;line-height:1.4;color:var(--ink);
}
.case-study-tags li{background:var(--green);padding:4px 14px;border-radius:999px}

/* Sections */
.case-study-section{margin-top:60px}
.case-study-section h2{
  font-family:var(--font-display);font-weight:400;
  color:var(--purple);
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.35;
  margin:0 0 20px;
}
.case-study-section p{
  font-family:var(--font-body);
  color:var(--ink);
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.5;
  margin:0 0 28px;
}
.case-study-section p:last-child{margin-bottom:0}

/* Figures */
.case-study-figure{margin:0}
.case-study-section > .case-study-figure,
.case-study-section > .case-study-grid{margin:36px 0}
.figure-frame{
  position:relative;overflow:hidden;
  background:#fff;
  border-radius:4px;
  aspect-ratio:16/9;
}
/* Source images carry baked-in red labels at the bottom-left; scale from the
   top-left so the crop pushes them out of frame. */
.figure-frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top left;
  transform:scale(1.25);transform-origin:top left;
}
.case-study-figure--wide .figure-frame{aspect-ratio:2.3/1}
.case-study-figure--wide .figure-frame img{transform:scale(1.08)}

.figure-frame--pending{
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:2px dashed var(--purple);
  font-family:var(--font-body);font-weight:700;font-size:14px;
  color:var(--purple);
}

.case-study-figure figcaption{
  display:inline-block;
  background:var(--green);color:var(--ink);
  font-family:var(--font-body);font-weight:500;
  font-size:14px;line-height:1.4;
  padding:4px 8px;
}

.case-study-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.case-study-grid .case-study-figure{display:flex;flex-direction:column;align-items:flex-start}
.case-study-grid .figure-frame{width:100%}

@media (max-width:900px){
  .case-study{padding:80px 32px 90px}
}
@media (max-width:600px){
  .case-study{padding:64px 20px 72px}
  .case-study-section{margin-top:44px}
  .case-study-grid{grid-template-columns:1fr}
  .case-study-tags{font-size:13px;gap:6px}
}