/* ============================================================
   TrueTen - Cases layout addon (loads AFTER service.css)
   ============================================================ */

/* Hero tweak: cases hero is centered, no side image */
.cases-hero { padding: 180px var(--pad) 70px; text-align: center; }
.cases-hero .eyebrow { margin-bottom: 26px; }
.cases-hero h1 { margin: 0 auto; max-width: 16ch; }
.cases-hero .lede { margin: 24px auto 0; }

/* Cases list */
.cases-list { padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 5vw, 60px); }
.cases-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-direction: column; gap: clamp(48px, 7vw, 104px); }

.case {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.case:nth-child(even) .case-media { order: 2; }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 28px; }
  .case:nth-child(even) .case-media { order: 0; }
}

/* Media */
.case-media {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line-strong);
  aspect-ratio: 3/2; background: linear-gradient(135deg, #1A3945, #2C4F4B);
}
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04) brightness(0.92); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.case:hover .case-media img { transform: scale(1.04); filter: saturate(0.85) contrast(1.05) brightness(0.95); }
.case-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,53,66,0) 55%, rgba(20,53,66,0.45) 100%),
    linear-gradient(135deg, rgba(127,203,204,0.16), transparent 58%);
  mix-blend-mode: multiply;
}

/* Placeholder media (GRC + missing images) */
.case-ph { display: flex; align-items: center; justify-content: center; }
.case-ph .ph-stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(244,242,243,0.045) 0px, rgba(244,242,243,0.045) 1px, transparent 1px, transparent 14px); }
.case-ph .ph-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 24px; }
.case-ph .ph-glyph { width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--accent); background: rgba(20,53,66,0.4); box-shadow: 0 0 50px rgba(127,203,204,0.22); }
.case-ph .ph-glyph svg { width: 46%; height: 46%; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.case-ph .ph-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

/* Content */
.case-content { min-width: 0; }
.case-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.case-num::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.case-title { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-0); margin: 0 0 14px; }
.case-sub { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(15px, 1.3vw, 18px); color: var(--accent); margin: 0 0 26px; line-height: 1.45; max-width: 52ch; }

.case-blocks { display: flex; flex-direction: column; gap: 20px; }
.case-block { position: relative; padding-left: 22px; }
.case-block::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), transparent); }
.case-block .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 7px; }
.case-block p { color: var(--ink-2); font-size: clamp(14px, 1.02vw, 16px); line-height: 1.6; margin: 0; }
.case-block p strong { color: var(--ink-1); font-weight: 600; }

/* Stat highlight (used where a case has a headline metric) */
.case-stat { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 22px; padding: 10px 16px; border-radius: 12px; background: rgba(127,203,204,0.1); border: 1px solid rgba(127,203,204,0.24); }
.case-stat b { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); color: var(--ink-0); letter-spacing: -0.02em; }
.case-stat span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }