/* Shared bento-style components reused across case-study detail pages
   (case-facts bar, callout cards, decision comparisons, shipped-work grid).
   Each page sets --case-accent / --case-accent-deep / --case-tint / --case-dark
   and only needs page-unique visuals in its own stylesheet. */

.case-content .chapter {
  display: block;
  margin-bottom: 18px;
  color: var(--case-accent-deep);
  font: 500 10px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-content blockquote {
  margin: 36px 0;
  padding: 26px 28px;
  border: 0;
  border-left: 4px solid var(--case-accent);
  color: var(--ink);
  background: var(--case-tint);
  font: 500 clamp(23px, 2.5vw, 28px)/1.25 var(--font-display);
  letter-spacing: -.02em;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}

.case-facts > div { padding: 28px 3vw; background: var(--bg); }
.case-facts span { display: block; margin-bottom: 8px; color: var(--case-accent-deep); font: 500 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.case-facts b { font-size: 14px; font-weight: 500; }

.case-summary,
.decision-options,
.product-model,
.shipped-list {
  display: grid;
  gap: 16px;
  margin: 36px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.case-summary,
.decision-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-model { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shipped-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.case-summary.cols-2, .decision-options.cols-2, .product-model.cols-2, .shipped-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-summary.cols-3, .decision-options.cols-3, .product-model.cols-3, .shipped-list.cols-3 { grid-template-columns: minmax(0, 1fr); }

.case-summary > div,
.decision-options > div,
.product-model > div,
.shipped-list > li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, #fff 34%, var(--bg));
  box-shadow: 0 8px 24px rgba(38, 36, 36, .045);
  transition: box-shadow 320ms ease, border-color 320ms ease;
  text-align: left;
}

.case-summary > div > *,
.decision-options > div > *,
.product-model > div > *,
.shipped-list > li > * { position: relative; z-index: 1; }

.decision-options .selected {
  border-color: var(--case-accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--case-accent) 10%, transparent);
}

.case-summary span,
.product-model span,
.option-meta span {
  display: block;
  margin-bottom: 14px;
  color: var(--case-accent-deep);
  font: 500 10px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-model b {
  display: block;
  margin: 0 0 12px;
  font: 500 clamp(23px, 2.3vw, 29px)/1.08 var(--font-display);
  letter-spacing: -.02em;
}

.decision-options h3 {
  margin: 0 0 14px;
  font: 500 23px/1.1 var(--font-display);
}

.case-summary p,
.decision-options p,
.product-model p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.option-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.option-meta span { margin: 0 !important; }
.option-meta em {
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--case-solid, var(--case-accent-deep));
  font: normal 500 10px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-model:not(.experience-model) .model-icon {
  display: block;
  width: 54px;
  height: 54px;
  margin: -8px 0 28px;
  overflow: visible;
  fill: none;
  stroke: var(--case-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shipped-work / takeaway grid: icon + heading + body. */
.shipped-list li::before { content: none; }
.shipped-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 280px;
  padding: 34px !important;
  color: var(--ink);
}
.shipped-icon {
  width: 68px;
  height: 68px;
  margin: 2px 0 32px;
  overflow: visible;
  fill: none;
  stroke: var(--case-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shipped-list strong { display: block; max-width: 360px; color: var(--ink); font: 500 clamp(23px, 2.3vw, 28px)/1.08 var(--font-display); }
.shipped-list span { display: block; margin-top: 12px; max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Stacked variant: compact row layout instead of tall square cards.
   Explicit grid placement (not source order) so the badge sits above
   the icon in a fixed-width column, with heading and body balanced beside it. */
.shipped-list.cols-3 li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 10px;
  align-items: start;
  min-height: 0;
  padding: 28px 0 !important;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.shipped-list.cols-3 li:last-child { border-bottom: 0; }
.shipped-list.cols-3 li::after { display: none; }
.shipped-list.cols-3 .shipped-icon {
  display: none; /* hidden for now; remove this line to bring the icons back */
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  margin: 2px 0 0;
}
.shipped-list.cols-3 li { grid-template-columns: minmax(0, 1fr); }
.shipped-list.cols-3 strong,
.shipped-list.cols-3 span { max-width: none; grid-column: 1; margin: 0; }

/* A quiet light sweep keeps the non-clickable bento cards feeling alive. */
.case-summary > div::after,
.decision-options > div::after,
.product-model > div::after,
.shipped-list > li::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -35% auto -35% -55%;
  width: 36%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.dark) .case-summary > div:hover,
  body:not(.dark) .decision-options > div:hover,
  body:not(.dark) .product-model > div:hover,
  body:not(.dark) .shipped-list:not(.cols-3) > li:hover {
    border-color: color-mix(in srgb, var(--case-accent) 24%, var(--line));
    box-shadow: 0 10px 26px rgba(38, 36, 36, .065);
  }
  .case-summary > div:hover::after,
  .decision-options > div:hover::after,
  .product-model > div:hover::after,
  .shipped-list:not(.cols-3) > li:hover::after {
    animation: bento-shimmer 900ms cubic-bezier(.2, .7, .2, 1);
  }
}

@keyframes bento-shimmer {
  0% { left: -55%; opacity: 0; }
  18% { opacity: .48; }
  70% { opacity: .26; }
  100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-summary > div::after,
  .decision-options > div::after,
  .product-model > div::after,
  .shipped-list > li::after { display: none; }
}

body.dark .case-summary > div::after,
body.dark .decision-options > div::after,
body.dark .product-model > div::after,
body.dark .shipped-list > li::after { display: none; }

body.dark .case-facts > div,
body.dark .case-summary > div,
body.dark .decision-options > div,
body.dark .product-model > div { background: color-mix(in srgb, #fff 3%, var(--bg)); }
body.dark .shipped-list li { background: color-mix(in srgb, #fff 3%, var(--bg)); }
body.dark .shipped-list.cols-3 li { background: transparent; }
body.dark .decision-options .selected { background: var(--case-tint); }

@media (max-width: 980px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .case-facts,
  .case-summary,
  .decision-options,
  .product-model,
  .shipped-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .case-facts > div { padding: 20px var(--page-gutter); }
  .case-content blockquote { margin-block: 28px; padding: 22px 20px; font-size: 23px; }
  .shipped-list li { min-height: 250px; padding: 28px 24px !important; }
  .shipped-icon { width: 62px; height: 62px; margin-bottom: 26px; }
  .shipped-list.cols-3 li { row-gap: 4px; padding: 20px 0 !important; }
}

/* Chaptered image carousel: scroll-snap track, chapter tabs, prev/next. */
.case-carousel {
  position: relative;
  left: 50%;
  width: min(1240px, calc(100vw - (2 * var(--page-gutter))));
  margin-top: 48px;
  transform: translateX(-50%);
}

.carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.carousel-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.carousel-tabs button,
.carousel-controls button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  font: 500 13px/1.2 var(--font-body);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.carousel-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; }
.carousel-tabs button span { color: var(--case-accent-deep); font: 500 10px var(--font-body); letter-spacing: .08em; }
.carousel-tabs button[aria-current="true"] { border-color: var(--case-accent-deep); color: #fff; background: var(--case-accent-deep); }
.carousel-tabs button[aria-current="true"] span { color: inherit; }
body.dark .carousel-tabs button[aria-current="true"] { border-color: var(--terracotta); background: var(--terracotta); }
body.dark .carousel-tabs button:not([aria-current="true"]) { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
body.dark .carousel-controls button { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
@media (hover: hover) and (pointer: fine) {
  body.dark .carousel-tabs button:not([aria-current="true"]):hover,
  body.dark .carousel-controls button:not(:disabled):hover { border-color: var(--case-accent-deep); }
}

.carousel-controls { display: flex; flex: none; align-items: center; gap: 8px; }
.carousel-count { margin-right: 8px; color: var(--muted); font: 500 12px var(--font-body); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.carousel-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 16px; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .carousel-tabs button:not([aria-current="true"]):hover,
  .carousel-controls button:not(:disabled):hover { border-color: var(--case-accent-deep); }
}

.carousel-tabs button:focus-visible,
.carousel-controls button:focus-visible,
.carousel-track:focus-visible { outline: 2px solid var(--case-accent-deep); outline-offset: 3px; }

.carousel-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin: 0;
  scroll-snap-align: start;
}

.carousel-slide img { display: block; width: 100%; height: auto; }

.carousel-slide figcaption > span {
  display: block;
  margin-bottom: 18px;
  color: var(--case-accent-deep);
  font: 500 10px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.carousel-slide h3 { margin: 0 0 16px; font: 500 clamp(26px, 2.8vw, 36px)/1.05 var(--font-display); letter-spacing: -.02em; }
.carousel-slide figcaption p { margin: 0; color: var(--muted); font: 300 16px/1.6 var(--font-body); }

@media (max-width: 900px) {
  .carousel-head { flex-direction: column; align-items: flex-start; }
  .carousel-slide { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
}

@media (max-width: 760px) {
  .case-carousel { margin-top: 36px; }
  .carousel-tabs button { padding: 8px 13px; font-size: 12px; }
}

/* "Continue exploring" footer block shared by case-study pages. */
.case-next {
  display: block;
  margin: 0;
  padding: 52px 12vw 56px;
  color: #fff9ef;
  background: var(--case-dark);
}

.case-next > span {
  display: block;
  margin-bottom: 14px;
  color: var(--case-accent);
  font: 500 10px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-next > a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: #fff9ef;
  font: 500 clamp(26px, 3vw, 40px)/1.05 var(--font-display);
  text-decoration: none;
}

.case-next b { color: var(--case-accent); font-size: .78em; font-weight: 400; }

@media (max-width: 760px) {
  .case-next { padding: 44px var(--page-gutter) 48px; }
}

/* Full-width figure that breaks out of the reading column. */
.case-figure {
  position: relative;
  left: 50%;
  width: min(1240px, calc(100vw - (2 * var(--page-gutter))));
  margin: 8px 0 0;
  transform: translateX(-50%);
}

.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(38, 36, 36, .16));
}

.case-figure figcaption { max-width: 640px; margin-top: 36px; }
.case-figure figcaption h3 { margin: 0 0 14px; font: 500 clamp(26px, 2.8vw, 36px)/1.05 var(--font-display); letter-spacing: -.02em; }
.case-figure figcaption p { margin: 0; color: var(--muted); font: 300 16px/1.6 var(--font-body); }