/* ════════════════════════════════
   CASES
════════════════════════════════ */

.cases-section { position: relative; z-index: 5; padding: 32px 24px 80px; }
.cases-inner { max-width: 1020px; margin: 0 auto; }

.cases-headline {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #fff;
  text-align: center;
  margin-bottom: 64px;
}
.cases-headline em { font-style: italic; font-weight: 500; color: var(--red-m); }

.cases { display: flex; flex-direction: column; gap: 18px; }

.case-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--card-bg);
  transition: border-color 250ms ease-out, transform 250ms var(--ease-out), box-shadow 250ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .case-card:hover {
    border-color: rgba(192,18,40,0.25);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(192,18,40,0.1);
  }
}

.ig-panel { background: #111114; border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; }
.ig-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ig-profile { display: flex; align-items: center; gap: 8px; }
.ig-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.9); border: 1.5px solid rgba(255,255,255,0.12); flex-shrink: 0; }
.ig-avatar--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ig-info { display: flex; flex-direction: column; gap: 1px; }
.ig-handle { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.88); display: flex; align-items: center; gap: 3px; }
.ig-handle svg { width: 11px; height: 11px; fill: #4f9fff; flex-shrink: 0; }
.ig-followers { font-size: 9.5px; font-weight: 500; color: rgba(255,255,255,0.3); }
.ig-follow { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.13); border-radius: 5px; padding: 5px 11px; background: transparent; cursor: default; flex-shrink: 0; pointer-events: none; }

.ig-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ig-photo-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ig-photo-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8,8,9,0.05) 0%, rgba(8,8,9,0.45) 100%); }
.ig-fx-badge { position: absolute; top: 10px; left: 10px; background: rgba(192,18,40,0.82); border-radius: 5px; padding: 4px 9px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.95); }

.ig-actions { display: flex; align-items: center; padding: 9px 13px 5px; gap: 13px; border-top: 1px solid rgba(255,255,255,0.05); }
.ig-actions svg { width: 17px; height: 17px; stroke: rgba(255,255,255,0.45); stroke-width: 1.5; fill: none; cursor: default; }
.ig-actions .heart { stroke: var(--red); fill: rgba(192,18,40,0.15); }
.ig-bookmark { margin-left: auto; }
.ig-likes { padding: 0 13px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.55); margin-bottom: 7px; }
.ig-caption { padding: 0 13px 13px; font-size: 10px; line-height: 1.55; color: rgba(255,255,255,0.32); }
.ig-caption strong { color: rgba(255,255,255,0.62); font-weight: 700; }

.growth-panel { padding: 28px 30px; display: flex; flex-direction: column; gap: 20px; }

.fx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red-m);
  border: 1px solid rgba(192,18,40,0.28);
  border-radius: 4px;
  padding: 4px 10px;
  background: rgba(192,18,40,0.07);
  width: fit-content;
}
.fx-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; }

.growth-total-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.26); margin-bottom: 5px; }
.growth-total-num { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.growth-total-num em { font-style: italic; color: var(--red-m); font-size: 0.7em; font-weight: 500; margin-left: 6px; }

.chart-wrap { position: relative; width: 100%; }
.chart-svg { width: 100%; display: block; overflow: visible; }

.growth-timeline { display: flex; flex-direction: column; gap: 7px; }
.trow { display: flex; align-items: center; gap: 9px; }
.trow.peak .tyear { color: rgba(255,255,255,0.65); font-weight: 700; }
.trow.peak .tbar { background: linear-gradient(to right, var(--red), #e8203e); }
.trow.peak .tval { color: #fff; font-weight: 800; }
.tyear { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.28); letter-spacing: 0.05em; min-width: 42px; }
.tbar-wrap { flex: 1; height: 3.5px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.tbar { height: 100%; border-radius: 2px; background: linear-gradient(to right, rgba(192,18,40,0.5), var(--red)); width: 0; transition: width 1.1s cubic-bezier(.16, 1, .3, 1); }
.tval { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.65); min-width: 72px; text-align: right; }

.follower-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.4); }
.follower-chip strong { font-weight: 800; color: rgba(255,255,255,0.72); }

@media (max-width: 740px) {
  .cases-section { padding: 0 20px 80px; }
  .case-card { grid-template-columns: 1fr; }
  .ig-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .ig-photo { min-height: 200px; }
  .growth-panel { padding: 22px 18px; }
}