/* ============================================================
   WATER MANAGEMENT PLATFORM (Rio Tinto) — case study identity.
   Screens are placeholders until real recreations are supplied;
   .cs-ph is the shared placeholder primitive from imprint.css.
   Structural layout reuses the generic .cs-* case-study classes;
   this file only adds the Rio Tinto colour identity + a handful
   of components specific to this case study's narrative.
   ============================================================ */

:root {
  --rt-primary: #1B6E6E;
  --rt-primary-deep: #145454;
  --rt-tint: #E6F1F0;
  --rt-tint-2: #D3E7E5;
  --rt-accent: #C97B3D;
  --rt-red: #C2483E;
  --rt-red-bg: #FBEAE8;
  --rt-green: #2E8B57;
  --rt-green-bg: #E8F4EC;
}

/* ---- scope generic .cs- accent colours to Rio Tinto's palette ---- */
.rt-theme .cs-hb-mark .a { background: var(--rt-tint-2); border-color: var(--rt-primary); }
.rt-theme .cs-hb-mark .b { background: var(--rt-primary); }
.rt-theme .cs-dir-tag.win { color: var(--rt-primary); background: var(--rt-tint); }
.rt-theme .cs-dir-tag.mid { color: var(--rt-accent); background: #FBF0E4; }
.rt-theme .cs-dir-tag.fail { color: var(--rt-red); background: var(--rt-red-bg); }
.rt-theme .cs-dec.hero { border-color: var(--rt-primary); box-shadow: 0 0 0 1px var(--rt-primary), 0 24px 50px -30px rgba(27,110,110,.4); }
.rt-theme .cs-dec-tag.hero, .rt-theme .cs-dec-tag.note { color: var(--rt-primary); background: var(--rt-tint); }
.rt-theme .cs-dec-tag.win { color: var(--rt-green); background: var(--rt-green-bg); }
.rt-theme .cs-dec-tag.fail { color: var(--rt-red); background: var(--rt-red-bg); }
.rt-theme .cs-callout::after { color: var(--rt-primary); }
.rt-theme .cs-stat-n { background: linear-gradient(120deg, #1B6E6E 0%, #3E8E8E 50%, #C97B3D 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.rt-theme .cs-build-item .star { color: var(--rt-primary); }
.rt-theme .cs-em-card { background: linear-gradient(135deg, #EAF3F2 0%, #FBF1E7 100%); }
.rt-theme .cs-em-card::after { color: var(--rt-primary); }
.rt-theme .cs-next-link:hover .nl-t, .rt-theme .cs-next-link:hover .cs-next-arrow { color: var(--rt-primary); }
.rt-theme .cs-toggle button.on { color: var(--rt-primary-deep); }
.rt-theme .cs-flow-node.broken { border-color: var(--rt-red); background: var(--rt-red-bg); }
.rt-theme .cs-flow-node.broken .fn-t { color: var(--rt-red); }
.rt-theme .cs-flow-break { background: var(--rt-red); }

/* ---- real Rio Tinto logo lockups ---- */
.rt-client-badge { display: inline-flex; align-items: center; margin-left: clamp(8px, 1.6vw, 20px); }
.rt-client-badge img { height: clamp(18px, 2.6vw, 28px); width: auto; display: block; }
.rt-pill-logo { display: inline-flex; align-items: center; gap: 8px; }
.rt-pill-logo img { height: 20px; width: auto; display: block; }

/* ---- team roles, shown as small tags instead of a dense comma list ---- */
.rt-team-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rt-team-tag { font-size: 13px; font-weight: 500; color: var(--rt-primary-deep); background: var(--rt-tint); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }

/* plain bullet list (bare, no card) used inline with cs-body copy */
.cs-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-list li { font-size: 17px; line-height: 1.65; color: var(--ink-soft); padding-left: 26px; position: relative; text-wrap: pretty; }
.cs-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-mute); }
.cs-list.check li::before { content: "✓"; color: var(--rt-primary); font-weight: 700; }

/* ---- "at a glance" stat strip in the hero ---- */
.rt-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; }
@media (max-width: 760px) { .rt-glance { grid-template-columns: 1fr 1fr; } }
.rt-glance-cell { background: var(--card); padding: 22px 20px; }
.rt-glance-v { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.02em; color: var(--rt-primary); display: flex; align-items: baseline; gap: 8px; }
.rt-glance-v .arrow { font-size: 15px; color: var(--ink-mute); font-weight: 500; }
.rt-glance-l { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; line-height: 1.4; }

/* ---- work-rhythm split bar (discovery vs design & validation) ---- */
.rt-rhythm { margin: 40px 0 8px; }
.rt-rhythm-bar { display: flex; height: 64px; border-radius: var(--r-md); overflow: hidden; }
.rt-rhythm-half { flex: 1; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #fff; position: relative; }
.rt-rhythm-half.a { background: linear-gradient(120deg, var(--rt-primary), var(--rt-primary-deep)); }
.rt-rhythm-half.b { background: linear-gradient(120deg, var(--rt-accent), #A9622C); }
.rt-rhythm-cut { position: absolute; top: -10px; bottom: -10px; left: 50%; width: 2px; background: var(--ink); opacity: .12; }
.rt-rhythm-caption { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; }

/* ---- three-phase work columns (discovery / design / implementation) ---- */
.rt-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 820px) { .rt-phases { grid-template-columns: 1fr; } }
.rt-phase-col { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px; }
.rt-phase-col .ph-k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rt-primary); margin-bottom: 8px; }
.rt-phase-col .ph-t { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-bottom: 16px; }
.rt-phase-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rt-phase-col li { font-size: 14px; line-height: 1.55; color: var(--ink-soft); padding-left: 18px; position: relative; }
.rt-phase-col li::before { content: "▸"; position: absolute; left: 0; color: var(--ink-mute); font-size: 11px; top: 3px; }

/* ---- dark pull-quote band (reuses .cs-quote-band/.cs-quote from imprint.css) ---- */
.rt-theme .cs-quote-mark { color: rgba(255,255,255,.18); }

/* ---- downtime module showcase (Ongoing / Completed / Trends) ---- */
.rt-dt-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.rt-dt-desc { font-size: 14px; color: var(--ink-mute); max-width: 40ch; }

/* ---- shipped-first timeline ---- */
.rt-ship { display: flex; align-items: stretch; gap: 0; margin-top: 40px; flex-wrap: wrap; }
.rt-ship-node { flex: 1; min-width: 150px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 20px 18px; position: relative; }
.rt-ship-node.first { border-color: var(--rt-primary); box-shadow: 0 0 0 1px var(--rt-primary); }
.rt-ship-node .sp-tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.rt-ship-node.first .sp-tag { color: var(--rt-primary); font-weight: 700; }
.rt-ship-node .sp-t { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.rt-ship-node .sp-d { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.rt-ship-arrow { align-self: center; color: var(--ink-mute); padding: 0 12px; flex: 0 0 auto; }
@media (max-width: 760px) { .rt-ship { flex-direction: column; } .rt-ship-arrow { transform: rotate(90deg); padding: 8px 0; align-self: center; } }

/* ---- small chart-type placeholder row ---- */
.rt-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 760px) { .rt-charts { grid-template-columns: 1fr; } }
.rt-chart-ph { border-radius: var(--r-md); border: 1.5px dashed rgba(27,110,110,.3); background: var(--rt-tint); min-height: 140px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.rt-chart-ph .lbl { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--rt-primary-deep); text-align: center; }

/* ---- outcome two-column cards (for users / for business) ---- */
.rt-outgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
@media (max-width: 760px) { .rt-outgrid { grid-template-columns: 1fr; } }
.rt-outcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 30px 32px; }
.rt-outcard h4 { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rt-primary); }
.rt-outcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rt-outcard li { font-size: 15px; line-height: 1.6; color: var(--ink-soft); padding-left: 26px; position: relative; }
.rt-outcard li::before { content: "✓"; position: absolute; left: 0; color: var(--rt-green); font-weight: 700; }

/* ---- data-type chip row (richer operational data) ---- */
.rt-datachips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.rt-datachip { background: var(--rt-tint); border: 1px solid var(--rt-tint-2); color: var(--rt-primary-deep); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 9px 18px; }

/* ---- branded thumbnail for the work-page card ---- */
.thumb-rt-brand {
  background:
    radial-gradient(circle at 22% 28%, #D3E7E5 0%, transparent 55%),
    radial-gradient(circle at 80% 78%, #F3E2CE 0%, transparent 55%),
    linear-gradient(135deg, #EAF3F2 0%, #FBF1E7 100%);
  position: relative; overflow: hidden;
}
.thumb-rt-brand .ti-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(27,110,110,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(27,110,110,.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.thumb-rt-brand .ti-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; }
.thumb-rt-brand .ti-mark { width: 54px; height: 54px; position: relative; flex-shrink: 0; }
.thumb-rt-brand .ti-mark span { position: absolute; width: 34px; height: 34px; border-radius: 10px; }
.thumb-rt-brand .ti-mark .a { top: 0; left: 0; background: var(--rt-tint-2); border: 2.5px solid var(--rt-primary); }
.thumb-rt-brand .ti-mark .b { bottom: 0; right: 0; background: var(--rt-primary); }
.thumb-rt-brand .ti-word { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #1A1F36; white-space: nowrap; }
.thumb-rt-brand .ti-logo { width: 160px; height: auto; }
.thumb-rt-brand .thumb-tag { background: rgba(255,255,255,.92); }
.thumb-rt-brand .thumb-label { color: var(--ink-mute); opacity: .9; }