/*
 * Case 01 product page (site/pages/case-01.html).
 * Builds on case-offer.css: adds the online / box format picker, the comparison cards,
 * the suspect list and a few image crops. Everything is scoped to .c1-page.
 */

/* ---------- Gallery: 4 slides ---------- */
.c1-page .co-thumbs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Format picker ---------- */
.c1-formats {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.c1-formats legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--co-muted);
  font: 600 var(--co-small) / 1.4 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.c1-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.c1-format {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.c1-format input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.c1-format-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 14px 16px;
  border: 1px solid var(--co-line-strong);
  background: var(--co-card);
  transition:
    border-color 160ms var(--co-ease),
    background 160ms var(--co-ease);
}
.c1-format input:checked + .c1-format-body {
  border-color: var(--co-accent);
  background: var(--co-raise);
  box-shadow: inset 0 0 0 1px var(--co-accent);
}
.c1-format input:focus-visible + .c1-format-body {
  outline: 3px solid var(--co-accent);
  outline-offset: 3px;
}
.c1-format-badge {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--co-accent);
  color: var(--co-accent-ink);
  font: 700 12px / 1.35 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c1-format-badge--plain {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--co-line-strong);
  color: var(--co-muted);
}
.c1-format-name {
  margin-top: 6px;
  color: var(--co-strong);
  font: 600 24px / 1.1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.c1-format-price {
  color: var(--co-text);
  font: 600 17px / 1.25 var(--font-display);
  letter-spacing: 0.03em;
}
.c1-format-note {
  color: var(--co-muted);
  font-size: var(--co-small);
}

/* ---------- Format panels ---------- */
/* Without JavaScript both panels show, each under its own heading. */
.c1-panel + .c1-panel {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--co-line);
}
.c1-panel-title {
  margin-top: 26px;
  font-size: 26px !important;
}
.c1-panel .co-price {
  margin-top: 14px !important;
}
.c1-buy.is-enhanced .c1-panel + .c1-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.c1-buy.is-enhanced .c1-panel-title {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: the picker already names the panel; heading kept for assistive tech. */
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.c1-buy.is-enhanced .c1-panel .co-price {
  margin-top: 24px !important;
}
.c1-unlock {
  width: 100%;
  margin-top: 16px;
  background: transparent;
}
.c1-unlock[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
.c1-unlock-error {
  margin-top: 10px !important;
  padding: 10px 12px;
  border-left: 3px solid #ff6b57;
  background: var(--co-raise);
  color: var(--co-strong);
  font-size: 14px;
}
.c1-unlock-note {
  margin-top: 10px !important;
  color: var(--co-muted);
  font-size: 14px;
  text-align: center;
}
.c1-markets {
  margin-top: 24px;
}

/* ---------- Suspects (dossier tab) ---------- */
.c1-suspects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 14px !important;
}
.c1-suspects li {
  display: grid;
  padding: 10px 14px;
  border: 1px solid var(--co-line);
  background: var(--co-card);
}
.c1-suspects b {
  color: var(--co-strong);
  font: 600 19px / 1.2 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.c1-suspects span {
  color: var(--co-muted);
  font-size: 14px;
}

/* ---------- Comparison ---------- */
.c1-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.c1-compare-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 24px 24px;
  border: 1px solid var(--co-line);
  background: var(--co-card);
}
.c1-compare-tag {
  color: var(--co-accent);
  font: 700 var(--co-small) / 1.5 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.c1-compare-card h3 {
  margin-top: 6px;
  font-size: 30px;
}
.c1-compare-card dl {
  margin: 18px 0 22px;
}
.c1-compare-card dl > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 4px 16px;
  padding-block: 12px;
  border-top: 1px solid var(--co-line);
}
.c1-compare-card dt {
  color: var(--co-muted);
  font: 600 var(--co-small) / 1.6 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.c1-compare-card dd {
  margin: 0;
  color: var(--co-text);
  font-size: 15px;
}
.c1-compare-cta {
  margin-top: auto;
}

/* ---------- Evidence crops + desk card ---------- */
.c1-page .co-item .c1-fig--top img {
  object-position: 50% 0;
}
.c1-page .co-item .c1-fig--center img {
  object-position: 50% 50%;
}
.c1-desk-tools {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  padding: 18px;
  background:
    linear-gradient(var(--co-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--co-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--co-raise);
}
.c1-desk-tools span {
  padding: 6px 12px;
  border: 1px solid var(--co-accent);
  background: var(--co-card);
  color: var(--co-strong);
  font: 600 16px / 1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c1-desk-tools span:nth-child(4) {
  border-color: #e0463a;
  color: #ff8a7f;
}

/* ---------- Cross-sell: two cards ---------- */
.c1-xsell-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
}
.c1-card-type {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px;
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 213, 46, 0.16), transparent 60%),
    var(--co-raise);
}
.c1-card-type-name {
  color: var(--co-strong);
  font: 600 clamp(30px, 4vw, 44px) / 1 var(--font-display);
  text-transform: uppercase;
}
.c1-card-type-sub {
  color: var(--co-muted);
  font: 600 var(--co-small) / 1.4 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Case 02's buttons are <button>s; here some are links, and `.case-offer-page a { color: inherit }`
   would otherwise turn their dark label light on the yellow background. */
.c1-page a.co-button {
  color: var(--co-accent-ink);
}
.c1-buy.is-switched .c1-panel {
  animation: none;
}

/* ---------- Sticky bar link (Case 02 uses a button) ---------- */
.c1-page .co-sticky .co-button {
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .c1-format:hover .c1-format-body {
    border-color: var(--co-strong);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1050px) {
  .c1-page .co-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .c1-format-body {
    padding: 12px 12px 14px;
  }
  .c1-format-name {
    font-size: 21px;
  }
  .c1-format-price {
    font-size: 15px;
  }
  .c1-compare-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .c1-compare-card {
    padding: 22px 16px 18px;
  }
  .c1-compare-card h3 {
    font-size: 26px;
  }
  .c1-compare-card dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .c1-desk-tools span {
    padding: 4px 8px;
    font-size: 13px;
  }
  .c1-xsell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c1-card-type {
    padding: 12px;
  }
  .c1-page .co-sticky .co-button {
    font-size: 17px;
  }
}