/* ==========================================================================
   Case study pages (thunder-boxe.html). Loaded after style.css:
   reuses its tokens and components, adds only what is missing.
   ========================================================================== */

/* Placeholder text still to be written: impossible to miss, easy to find (search "DA SCRIVERE") */
.todo {
  padding: 0 0.25em;
  border-radius: 4px;
  background: rgba(212, 199, 255, 0.65);
  color: var(--color-ink-charcoal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 1. Apertura ---------- */

.cs-intro { padding-top: calc(var(--header-h) + 32px); }

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 24px;
  font-size: 0.9375rem;
}

.cs-intro__grid { display: grid; gap: 32px; }

.cs-title {
  font-size: var(--text-display);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.cs-intro__lead { margin: 20px 0 24px; }
.cs-intro__main .tags { margin-bottom: 0; }

.cs-meta { margin: 0 0 20px; border-bottom: 1px solid var(--color-soft-mist); }
.cs-meta__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding-block: 12px;
  border-top: 1px solid var(--color-soft-mist);
  font-size: 0.9375rem;
}
.cs-meta dt { color: var(--color-stone-gray); }
.cs-meta dd { margin: 0; font-weight: 460; text-align: right; }

.cs-visit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- 2. Screenshot grande ---------- */

.cs-shot { padding-top: 40px; }

.cs-browser {
  padding: 8px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-soft-mist);
  background: var(--color-paper-white);
}
.cs-browser img {
  width: 100%;
  border-radius: 10px;
  background: var(--color-soft-mist);
}

/* ---------- 3. Richiesta + lavoro ---------- */

.cs-story__grid { display: grid; gap: 40px; }

.cs-block { padding-top: 20px; border-top: 1px solid #d6d2cb; }
.cs-block__num {
  margin-bottom: 20px;
  font-size: 0.875rem;
  font-weight: 540;
  font-variant-numeric: tabular-nums;
  color: var(--color-stone-gray);
}
.cs-block__text {
  max-width: 34em;
  margin-top: 16px;
  font-size: 1.0625rem;
  color: #3d3b39;
}

/* ---------- 4. Da telefono ---------- */

/* Phones: a swipeable row, the next phone peeking in from the right */
.cs-phones {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.cs-phones::-webkit-scrollbar { display: none; }
.cs-phones:focus-visible { outline-offset: -2px; border-radius: 0; }

.cs-phones__list {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-inline: var(--gutter);
  padding-bottom: 4px;
}

.cs-phone {
  flex: none;
  width: min(66vw, 280px);
  scroll-snap-align: start;
}

.cs-phone__frame {
  position: relative;
  padding: 7px;
  border-radius: 34px;
  background: var(--color-ink-charcoal);
}
.cs-phone__frame img {
  width: 100%;
  border-radius: 27px;
  background: var(--color-soft-mist);
}

.cs-phone__caption {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--color-stone-gray);
  text-align: center;
}

/* ---------- Video promo ---------- */

.cs-video { display: grid; gap: 32px; }
.cs-video__lead { margin: 20px 0 20px; }
.cs-video__player { width: min(72vw, 300px); }
.cs-video__player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 27px;
  background: var(--color-ink-charcoal);
}

/* ---------- 5. Risultato ---------- */

.cs-result { display: grid; gap: 32px; }
.cs-result__lead { margin-top: 20px; }

.cs-quote {
  padding: 28px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-soft-mist);
  background: var(--color-paper-white);
}
.cs-quote__mark {
  width: 32px;
  height: 24px;
  margin-bottom: 24px;
  fill: var(--color-lilac-mist);
}
.cs-quote__text { margin: 0; }
.cs-quote__text p {
  font-size: var(--text-heading-sm);
  font-weight: 460;
  line-height: 1.25;
  letter-spacing: -0.014em;
}
.cs-quote__cite {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-soft-mist);
  font-size: 0.9375rem;
  color: var(--color-stone-gray);
}

/* ---------- 6. CTA band ---------- */

.cs-cta__inner { display: grid; gap: 40px; }
.cs-cta .h2 { margin-bottom: 20px; }

.cs-cta__lead {
  max-width: 30em;
  margin-bottom: 28px;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.78);
}

.cs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.cs-cta__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 460;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.cs-cta__link:hover { text-decoration-color: currentColor; }

.cs-cta__steps { margin-bottom: 0; }

/* ---------- Footer: no CTA block above the columns on this page ---------- */

.cs-footer { padding-top: 16px; }
.cs-footer .footer__heading { font-size: 0.875rem; font-weight: 700; line-height: 1.5; }

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
  .cs-intro { padding-top: calc(var(--header-h) + 48px); }
  .cs-shot { padding-top: 56px; }
  .cs-browser { padding: 10px; }
  .cs-browser__bar { padding: 4px 6px 10px; }
  .cs-browser .float-card__url { font-size: 0.8125rem; }

  .cs-story__grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  /* Three phones side by side, no scrolling */
  .cs-phones {
    overflow: visible;
    width: min(100% - 2 * var(--gutter), var(--page-max));
    margin-inline: auto;
  }
  .cs-phones__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 300px));
    justify-content: center;
    gap: 24px;
    width: auto;
    padding: 0;
  }
  .cs-phone { width: auto; }

  .cs-quote { padding: 36px 32px; }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
  .cs-intro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: 80px;
  }

  .cs-phones__list { gap: 40px; }
  .cs-phone:nth-child(2) { transform: translateY(48px); }
  .cs-mobile { padding-bottom: calc(var(--section-gap) + 48px); }

  .cs-video { grid-template-columns: 1fr auto; align-items: center; gap: 80px; }
  .cs-video__player { width: 320px; }

  .cs-result { grid-template-columns: 5fr 6fr; align-items: center; gap: 80px; }
  .cs-quote { padding: 44px 40px; }

  .cs-cta__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
}