/* Network monitoring and automation case: only additions to case-site.css, every rule scoped to .case-portal. */
.case-portal .cs-lead+.cs-lead {
  margin-top:12px
}
.case-portal .cp-status {
  background:#e7f6ec;
  border-color:#5bb47a;
  color:#1f5d36
}
.case-portal .cp-demo-note {
  margin:20px 0 0;
  padding:12px 18px;
  border-radius:14px;
  border:1px dashed #d9c7ab;
  background:var(--card);
  color:var(--muted);
  font-size:15px
}
/* Twelve directions: compact numbered cards, four columns on wide screens. */
.case-portal .cp-areas {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  counter-reset:area
}
.case-portal .cp-areas li {
  position:relative;
  padding:20px 20px 20px 22px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #6d4a1f0f;
  counter-increment:area
}
.case-portal .cp-areas li::before {
  content:counter(area,decimal-leading-zero);
  display:block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em
}
.case-portal .cp-areas h3 {
  font-size:19px;
  margin:0 0 8px
}
.case-portal .cp-areas p {
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  color:#3c4046
}
/* Walkthroughs: steps beside the screenshots. */
.case-portal .cp-story-no {
  margin:0 0 6px;
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.case-portal .cp-story {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin-top:12px
}
.case-portal .cp-story-wide {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)
}
.case-portal .cp-story-text {
  max-width:72ch;
  font-size:17px;
  line-height:1.6
}
.case-portal .cp-story-text>p {
  margin:0
}
.case-portal .cp-step-h {
  margin:22px 0 8px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent)
}
.case-portal .cp-story-text .cp-step-h:first-child {
  margin-top:0
}
.case-portal .cp-steps {
  margin:0;
  padding-left:1.4em
}
.case-portal .cp-steps li+li {
  margin-top:8px
}
.case-portal .cp-story-media .cs-shot,.case-portal .cp-story-side .cs-shot {
  margin:0
}
.case-portal .cp-story-side {
  display:grid;
  gap:24px
}
.case-portal .cp-connect .cs-shot {
  width:min(100%,680px)
}
/* Bot messages quoted from the scenario source, styled as a dialogue but captioned as text, not a screenshot. */
.case-portal .cp-chat {
  margin:0;
  padding:18px;
  border-radius:20px;
  background:#eef3fb;
  border:1px solid #d5deec
}
.case-portal .cp-chat-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-weight:700;
  color:#29364a
}
.case-portal .cp-chat-badge {
  padding:2px 10px;
  border-radius:999px;
  background:#2f62e6;
  color:#fff;
  font-size:13px;
  letter-spacing:.04em
}
.case-portal .cp-chat-list {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.case-portal .cp-chat-list li {
  padding:10px 14px;
  border-radius:4px 16px 16px 16px;
  background:#fff;
  box-shadow:0 2px 6px #1e2a4014;
  font-size:15.5px;
  line-height:1.5
}
.case-portal .cp-chat figcaption {
  margin-top:12px;
  color:var(--muted);
  font-size:14px
}
/* How operations are built: six short cards. */
.case-portal .cp-eng {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:20px
}
.case-portal .cp-eng article {
  padding:20px 22px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line)
}
.case-portal .cp-eng h3 {
  font-size:19px;
  margin:0 0 8px
}
.case-portal .cp-eng p {
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:#3c4046
}
.case-portal .cp-plans {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.case-portal .cp-monitor .cs-text p+p {
  margin-top:14px
}
@media(max-width:1399px) {
  .case-portal .cp-areas {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:1099px) {
  .case-portal .cp-areas,.case-portal .cp-eng {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .case-portal .cp-story,.case-portal .cp-story-wide {
    grid-template-columns:1fr
  }
  .case-portal .cp-plans {
    grid-template-columns:1fr
  }
}
@media(max-width:699px) {
  .case-portal .cp-areas,.case-portal .cp-eng {
    grid-template-columns:1fr
  }
  .case-portal .cp-story-text {
    font-size:16px
  }
  .case-portal .cp-chat {
    padding:14px
  }
}
/* Georgian: the kicker stays in ordinary letters (uppercase may turn into Mtavruli); the shorter heading gets
   a little more line room and breaks only between words. */
.case-portal:lang(ka) .cs-kicker {
  text-transform:none;
  letter-spacing:.04em
}
.case-portal:lang(ka) h1 {
  line-height:1.14;
  letter-spacing:-.02em;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:manual;
  text-wrap:balance
}
@media(max-width:359px) {
  .case-portal:lang(ka) h1 {
    overflow-wrap:anywhere
  }
}
/* Long desktop captures: crop only the page preview; the anchor keeps the full original.
   Coordinates below are fractions of each approved source image, not new raster assets. */
.case-portal .cp-preview {
  margin:0
}
.case-portal .cp-preview-window {
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:8px;
  aspect-ratio:2160 / var(--preview-height);
  max-height:460px
}
.case-portal .cp-preview img {
  display:block;
  width:100%;
  height:auto;
  transform:translateY(var(--preview-offset))
}
/* Subscriber: status strip, access verdict, subscriber and MAC context (source y=180). */
.case-portal .cp-preview-subscriber {
  --preview-height:1700;
  --preview-offset:-7.0423%
}
/* Outage: incident summary and restored/unreachable ONU rows (source y=100). */
.case-portal .cp-preview-outage {
  --preview-height:1500;
  --preview-offset:-4.3687%
}
/* Server: all headline metrics and the complete main traffic graph (source y=180). */
.case-portal .cp-preview-device {
  --preview-height:1000;
  --preview-offset:-6.5383%
}
/* Logs: event heading, quick filter and the first event rows (source y=1760). */
.case-portal .cp-preview-logs {
  --preview-height:1304;
  --preview-offset:-57.4413%;
  max-width:1120px;
  margin:20px auto 0
}
.case-portal .cp-preview figcaption {
  flex-wrap:wrap;
  gap:4px 12px
}
.case-portal .cp-story-media {
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:20px;
  align-items:start
}
.case-portal .cp-phone {
  width:190px;
  max-width:100%
}
.case-portal .cp-outage-note {
  grid-column:1 / -1;
  max-width:68ch;
  font-size:17px;
  line-height:1.6
}
.case-portal .cp-outage-note .cp-step-h {
  margin-top:0
}
.case-portal .cp-outage-note p {
  margin:0
}
.case-portal .cp-monitor {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:start
}
.case-portal .cp-monitor .cs-text p:first-child {
  margin-top:0
}
.case-portal .cp-logs-intro {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:none
}
.case-portal .cp-logs-intro p {
  max-width:68ch;
  margin:0
}
/* MAX: a shared image row independent of the length of the two explanations. */
.case-portal .cp-max {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin-top:16px
}
.case-portal .cp-max h3 {
  font-size:21px;
  margin:0 0 12px
}
.case-portal .cp-max-power {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px
}
.case-portal .cp-max-power h3 {
  grid-column:1 / -1
}
.case-portal .cp-max p {
  max-width:72ch;
  margin:0;
  font-size:17px;
  line-height:1.6
}
.case-portal .cp-max-gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  align-items:start;
  margin-top:24px
}
.case-portal .cp-max-gallery .cs-shot {
  width:100%;
  max-width:280px;
  margin:0
}
.case-portal .cp-max-gallery .cs-shot a {
  width:fit-content;
  max-width:100%
}
.case-portal .cp-max-gallery img {
  display:block;
  height:340px;
  width:auto;
  max-width:100%;
  object-fit:contain
}
.case-portal .cp-max-gallery figcaption {
  flex-direction:column;
  gap:4px;
  font-size:15px
}
.case-portal .cp-max-gallery .cp-max-request-shot {
  border-left:1px solid var(--line);
  padding-left:20px
}
.case-portal .cp-max-note {
  margin-top:20px
}
@media(min-width:1600px) {
  .case-portal .cp-story-media {
    grid-template-columns:minmax(0,1fr) 210px
  }
  .case-portal .cp-phone {
    width:210px
  }
}
@media(max-width:1099px) {
  .case-portal .cp-monitor {
    grid-template-columns:1fr
  }
  .case-portal .cp-connect .cp-story-side {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start
  }
  .case-portal .cp-story-media {
    grid-template-columns:minmax(0,1fr) 210px
  }
  .case-portal .cp-phone {
    width:210px
  }
  .case-portal .cp-max {
    grid-template-columns:1fr
  }
  .case-portal .cp-max-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:699px) {
  .case-portal .cp-connect .cp-story-side,
  .case-portal .cp-story-media,
  .case-portal .cp-logs-intro,
  .case-portal .cp-max-power,
  .case-portal .cp-max-gallery {
    grid-template-columns:1fr
  }
  .case-portal .cp-max-power {
    row-gap:12px
  }
  .case-portal .cp-max-power h3 {
    margin-bottom:0
  }
  .case-portal .cp-phone {
    width:210px;
    justify-self:center
  }
  .case-portal .cp-max-gallery .cs-shot {
    justify-self:center
  }
  .case-portal .cp-max-gallery .cp-max-request-shot {
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--line);
    padding-top:20px
  }
  .case-portal .cp-max p,.case-portal .cp-outage-note {
    font-size:16px
  }
}
/* Engineering notes: cards linking to separate pages under /cases/portal/<slug>/ (see docs/PORTAL-NOTES.md). */
/* Text on the left, the note cards on the right, like the home "About" block; one column below the home 1099px breakpoint. */
.case-portal .cp-notes-chapter {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 60px;
  align-items:start
}
.case-portal .cp-notes {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  gap:22px;
  margin:0;
  padding-top:clamp(4px,1vw,12px);
  padding:0;
  list-style:none
}
.case-portal .cp-note-card {
  display:grid;
  align-content:start;
  gap:8px;
  height:100%;
  padding:24px 26px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #6d4a1f0f;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .25s,box-shadow .25s,transform .25s
}
.case-portal .cp-note-card:hover {
  color:var(--ink);
  border-color:var(--amber);
  box-shadow:0 14px 34px #c4781f2b;
  transform:translateY(-2px)
}
.case-portal .cp-note-tag {
  margin:0;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em
}
.case-portal .cp-note-card h3 {
  margin:0;
  font-size:clamp(21px,1.9vw,25px);
  line-height:1.2
}
.case-portal .cp-note-card p {
  margin:0;
  color:#3c4046;
  font-size:16px;
  line-height:1.55
}
.case-portal .cp-note-card .cp-note-more {
  margin-top:6px;
  color:var(--accent);
  font-weight:700
}
.case-portal .cp-notes-soon {
  max-width:76ch;
  margin:14px 0 0;
  color:var(--muted);
  font-size:16px
}
@media(prefers-reduced-motion:reduce) {
  .case-portal .cp-note-card,.case-portal .cp-note-card:hover {
    transition:none;
    transform:none
  }
}
@media(max-width:1099px) {
  .case-portal .cp-notes-chapter {
    grid-template-columns:1fr
  }
}