/* ============================================================
   Avon Business Systems — case-studies page styles ONLY.
   Loaded AFTER the shared /assets/style.css (which supplies all
   tokens and components). Do not duplicate shared styles here.

   The layout handles any number of .case-study articles:
   spacing between entries comes from the adjacent-sibling rule
   below — never add one-off margins to individual entries.
   ============================================================ */

/* ---------- Entry layout ---------- */
.case-study {
  display: grid;
  gap: 2.2rem;
  align-items: stretch;
}

/* Rhythm + divider between entries, however many there are */
.case-study + .case-study {
  margin-top: 4.5rem;
  padding-top: 4.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- Auto-scrolling screenshot viewer ----------
   One browser-chrome frame per case study. The strip inside holds
   every screenshot TWICE (second set aria-hidden) and scrolls
   slowly on a seamless loop. The viewer never exceeds the height
   of the text column beside it: the article grid stretches both
   columns to the same height and the strip is absolutely
   positioned, so it adds no height of its own. */
.cs-media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cs-viewer {
  position: relative;
  flex: none;
  height: 380px; /* small screens: fixed height; desktop overrides */
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.cs-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .55rem .85rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  line-height: 1;
}
.cs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D8CFBC;
}
.cs-url {
  margin-left: .45rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
.cs-viewport {
  position: absolute;
  top: 32px; /* clears the chrome bar */
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.cs-strip {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  animation: cs-scroll var(--cs-scroll-duration, 55s) linear infinite;
}
.cs-strip img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pause while the visitor is looking closely (mouse or keyboard) */
.cs-viewer:hover .cs-strip,
.cs-viewer:focus .cs-strip,
.cs-viewer:focus-within .cs-strip { animation-play-state: paused; }
.cs-viewer:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@keyframes cs-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); } /* exactly one full set */
}
@media (prefers-reduced-motion: reduce) {
  .cs-strip { animation: none; }
}

.cs-viewer-caption {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  /* Desktop: the text column sets the height; the viewer stretches to it */
  .cs-viewer { flex: 1 1 0; min-height: 0; height: auto; }
}

/* ---------- Entry body ---------- */
.cs-body h2 { margin-bottom: .3em; }

.cs-strap {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--green-deep);
  margin-bottom: 1.1rem;
}

.cs-body > p:not(.kicker):not(.cs-strap):not(.cs-visit) { color: var(--muted); }

.cs-subhead {
  font-size: 1.1rem;
  margin: 1.5rem 0 .7rem;
}

/* Feature list (verified facts only) */
.cs-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.cs-features li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  font-size: var(--fs-body-s);
}
.cs-features li::before {
  content: "\2713";
  position: absolute;
  left: .1rem;
  top: 0;
  color: var(--green);
  font-weight: 800;
}

/* Capability tag pills */
.cs-tags {
  list-style: none;
  margin: 0 0 1.7rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Same pill treatment as .featured-note in style.css — keep the
   two in step if either changes. */
.cs-tags li {
  background: #fff;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  color: var(--green-deep);
  font-size: .88rem;
  font-weight: 700;
  padding: .25rem .85rem;
}

.cs-visit { margin: 0; }
.cs-visit .btn svg { flex: none; }

/* ---------- Desktop: mockup and copy side by side ----------
   Default: mockup LEFT, copy RIGHT.
   Add the modifier class "case-study--flip" to an article to put
   its mockup on the RIGHT instead — alternate down the page. */
@media (min-width: 768px) {
  .case-study {
    grid-template-columns: 11fr 9fr;
    gap: 3.5rem;
  }
  /* Flipped entries mirror the column widths too, so the mockup
     keeps the wider (11fr) column whichever side it sits on. */
  .case-study--flip { grid-template-columns: 9fr 11fr; }
  .case-study--flip .cs-media { order: 2; }
}

/* ============================================================
   HUB PAGE: carousel of case studies
   Works without JavaScript (the track is a scroll-snap
   container that can be swiped or scrolled); JS adds arrows,
   dots and keyboard support. Handles any number of slides.
   ============================================================ */
.cs-carousel { position: relative; }

.cs-track {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.cs-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.cs-slide { scroll-snap-align: center; min-width: 0; }

.cs-card {
  height: 100%;
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.cs-card-media { display: block; line-height: 0; min-width: 0; text-decoration: none; color: inherit; }
.cs-card-body { min-width: 0; }
.cs-card-body h3 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  margin-bottom: .35em;
}
.cs-card-body h3 a { color: var(--ink); text-decoration: none; }
.cs-card-body h3 a:hover { color: var(--green-deep); }
.cs-card-body > p { color: var(--muted); }
.cs-card-body .cs-strap { color: var(--green-deep); }

.cs-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin: 0;
}
.cs-visit-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .95rem;
}
.cs-visit-link svg { flex: none; }

/* Arrows + dots */
.cs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.cs-controls[hidden] { display: none; }
.cs-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  cursor: pointer;
}
.cs-arrow:hover:not(:disabled) { background: var(--green-soft); }
.cs-arrow:disabled { opacity: .35; cursor: default; }
.cs-dots { display: flex; align-items: center; gap: .5rem; }
.cs-dot-btn {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.cs-dot-btn.is-current { background: var(--green); }

.cs-index-note {
  margin: 1.6rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
}

@media (min-width: 900px) {
  .cs-card { grid-template-columns: 11fr 9fr; gap: 2.5rem; align-items: center; }
}

/* ============================================================
   DETAIL PAGES
   ============================================================ */
.breadcrumb { margin-bottom: 1rem; }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  font-size: .9rem;
  color: var(--muted);
}
.breadcrumb li + li::before { content: "\203A"; margin-right: .55rem; color: var(--muted); }

.cs-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.6rem 0 0;
}
.cs-head-actions .btn svg { flex: none; }

/* Phone screenshot below the main viewer */
.cs-phone { margin: 3rem 0 0; }
.cs-phone figcaption {
  margin-top: .8rem;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.cs-shot-frame {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  line-height: 0;
  position: relative;
}
.cs-shot-frame .cs-chrome { position: static; }
.cs-shot-frame img { display: block; width: 100%; height: auto; }
.cs-shot-frame--phone {
  border-radius: 26px;
  max-width: 290px;
  margin-inline: auto;
  border: 6px solid #2F2B26;
}

.cs-back { margin: 2.5rem 0 0; font-weight: 700; }
.cs-more { margin: .5rem 0 0; color: var(--muted); }