/* ============================
   NEXUS_ — Case study styles
   ============================ */

/* Hero bento (case) */
.case-hero {
  padding: 100px var(--pad) 60px;
  max-width: var(--max);
  margin: 0 auto;
}

.case-hero__back {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 32px;
  display: inline-block;
  transition: color 0.18s var(--ease);
}
.case-hero__back:hover { color: var(--accent); }

.case-hero__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
}

/* Info — full width */
.case-hero__info {
  grid-column: span 4;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.case-hero__tag,
.case-hero__type,
.case-hero__year {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
}

.case-hero__status--online {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 100px;
}

.case-hero__title {
  font-family: var(--sans);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.case-hero__duration {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
}

/* Metrics in hero — 2 cols each */
.case-hero__metric {
  grid-column: span 2;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 130px;
}

/* ======== SHOWCASE (full-width mockup) ======== */
.case-showcase {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 80px;
}

.case-showcase__inner {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.case-showcase__label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ======== MOCKUP DO SHOWCASE ========
   Usa o mesmo sistema .mk-* das thumbnails (styles.css).
   Aqui o frame tem ~1100px em vez de ~376px, então as medidas
   em cqw são reescaladas (~0.42x) para caber mais conteúdo —
   é uma página inteira, não um recorte. */
.case-showcase__inner .mock {
  --h: var(--case-hue, 200);
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0e0e13;
  container-type: inline-size;
  box-shadow:
    inset 0 1px 0 hsl(var(--h) 40% 100% / .05),
    0 30px 70px -24px rgba(0, 0, 0, 0.7);
}

/* Chrome */
.mock--case .mk-chrome { gap: .8cqw; padding: .75cqw 1cqw; }
.mock--case .mk-dots { gap: .45cqw; }
.mock--case .mk-dots i { width: .68cqw; height: .68cqw; }
.mock--case .mk-omni { height: 1.5cqw; gap: .5cqw; padding: 0 .7cqw; border-radius: 1cqw; font-size: .72cqw; }
.mock--case .mk-lock { width: .42cqw; height: .36cqw; }
.mock--case .mk-lock::before { width: .25cqw; height: .19cqw; border-width: .07cqw; }

/* Tela / estrutura */
.mock--case .mk-screen { gap: 1cqw; padding: 1.2cqw 1.4cqw; font-size: .8cqw; }
.mock--case .mk-screen--app { padding: 0; gap: 0; }
.mock--case .mk-rail { width: 4.2cqw; gap: .7cqw; padding: 1.1cqw 0; }
.mock--case .mk-rail i { width: 1.9cqw; height: 1.5cqw; border-radius: .5cqw; }
.mock--case .mk-railmark { width: 2cqw; height: 2cqw; margin-bottom: .45cqw; border-radius: .6cqw; font-size: .95cqw; }
.mock--case .mk-main { gap: .9cqw; padding: 1.1cqw 1.2cqw; }

/* Nav */
.mock--case .mk-nav { gap: .9cqw; }
.mock--case .mk-brand { gap: .6cqw; font-size: 1.25cqw; }
.mock--case .mk-brand--serif { font-size: 1.35cqw; }
.mock--case .mk-brandmark { width: 1.75cqw; height: 1.75cqw; border-radius: .55cqw; font-size: .8cqw; }
.mock--case .mk-links { gap: .95cqw; font-size: .78cqw; }

/* Botões / chips */
.mock--case .mk-btn { padding: .55cqw 1cqw; font-size: .75cqw; }
.mock--case .mk-btn--block { padding: .7cqw; }
.mock--case .mk-tag { padding: .4cqw .75cqw; font-size: .65cqw; }
.mock--case .mk-pill { padding: .38cqw .7cqw; font-size: .64cqw; gap: .4cqw; }
.mock--case .mk-pill i { width: .7cqw; height: .7cqw; border-radius: .22cqw; }
.mock--case .mk-pillrow { gap: .5cqw; }

/* Tipografia */
.mock--case .mk-eyebrow { font-size: .62cqw; }
.mock--case .mk-h1 { font-size: 1.95cqw; }
.mock--case .mk-h1--serif { font-size: 2.35cqw; }
.mock--case .mk-p { font-size: .8cqw; }
.mock--case .mk-title { font-size: 1.05cqw; }
.mock--case .mk-sub { font-size: .68cqw; }
.mock--case .mk-micro { font-size: .64cqw; }
.mock--case .mk-sectiontitle { font-size: 1cqw; }
.mock--case .mk-sectionhead { gap: .7cqw; }

/* Hero */
.mock--case .mk-hero { gap: 1.2cqw; }
.mock--case .mk-hero__text { gap: .65cqw; }
.mock--case .mk-hero--stack { gap: .7cqw; }
.mock--case .mk-actions { gap: .65cqw; }
.mock--case .mk-photo { border-radius: .9cqw; }
.mock--case .mk-photo::after,
.mock--case .mk-swatch::after,
.mock--case .mk-item__thumb::after {
  background: repeating-linear-gradient(118deg, transparent 0 .4cqw, #ffffff14 .4cqw .8cqw);
}
.mock--case .mk-photo__chip { left: .6cqw; right: .6cqw; bottom: .6cqw; gap: .5cqw; padding: .5cqw .6cqw; border-radius: .6cqw; font-size: .64cqw; }
.mock--case .mk-photo__tag { top: .6cqw; left: .6cqw; padding: .32cqw .6cqw; font-size: .6cqw; }
.mock--case .mk-avs i { width: 1.05cqw; height: 1.05cqw; margin-right: -.35cqw; }
.mock--case .mk-av { width: 1.5cqw; height: 1.5cqw; }

/* Superfícies */
.mock--case .mk-row { gap: .7cqw; }
.mock--case .mk-cols { gap: .8cqw; }
.mock--case .mk-colstack { gap: .5cqw; }
.mock--case .mk-list { gap: .5cqw; }
.mock--case .mk-tile { padding: .7cqw .75cqw; border-radius: .7cqw; }
.mock--case .mk-bar { padding: .6cqw .75cqw; border-radius: .7cqw; font-size: .7cqw; }
.mock--case .mk-card { padding: .6cqw; border-radius: .7cqw; gap: .45cqw; }
.mock--case .mk-card b { font-size: .78cqw; }
.mock--case .mk-cards { gap: .7cqw; }

/* Métricas e gráficos */
.mock--case .mk-stat b { font-size: 1.5cqw; }
.mock--case .mk-stat span { font-size: .64cqw; }
.mock--case .mk-delta { top: .65cqw; right: .7cqw; font-size: .62cqw; }
.mock--case .mk-panel { gap: .55cqw; }
.mock--case .mk-panel__head { font-size: .68cqw; }
.mock--case .mk-legend i { width: .55cqw; height: .55cqw; }
.mock--case .mk-spark { height: 2cqw; margin-top: .3cqw; }
.mock--case .mk-progress { height: .45cqw; }

/* Stepper */
.mock--case .mk-steps { gap: .5cqw; }
.mock--case .mk-step { gap: .35cqw; font-size: .62cqw; }
.mock--case .mk-step i { width: 1.9cqw; height: 1.9cqw; font-size: .75cqw; }
.mock--case .mk-step.is-on i { box-shadow: 0 0 0 .22cqw hsl(var(--h) 66% 58% / .16); }
.mock--case .mk-step-line { margin-top: .95cqw; }

/* Formulário */
.mock--case .mk-form { gap: .4cqw; justify-content: flex-start; }
.mock--case .mk-form .mk-list { margin-top: auto; }
.mock--case .mk-label { font-size: .62cqw; }
.mock--case .mk-input { padding: .5cqw .6cqw; margin-bottom: .25cqw; border-radius: .45cqw; font-size: .64cqw; }

/* Agenda */
.mock--case .mk-slot { padding: .5cqw .6cqw; border-radius: .55cqw; font-size: .68cqw; gap: .55cqw; }
.mock--case .mk-slot em { font-size: .62cqw; }
.mock--case .mk-calwrap { gap: .5cqw; }
.mock--case .mk-calhead { font-size: .7cqw; }
/* mês inteiro: as linhas dividem a altura disponível em vez de
   seguirem o aspect-ratio quadrado (que estouraria o cartão) */
.mock--case .mk-cal { gap: .28cqw; flex: 1; min-height: 0; grid-template-rows: auto repeat(5, 1fr); }
.mock--case .mk-cal span { aspect-ratio: auto; border-radius: .3cqw; font-size: .58cqw; }
.mock--case .mk-cal .hd { align-items: flex-end; }
.mock--case .mk-cal .hd { font-size: .55cqw; }

/* Cardápio */
.mock--case .mk-item { padding: .5cqw .6cqw; border-radius: .65cqw; gap: .6cqw; }
.mock--case .mk-item__thumb { width: 2.3cqw; height: 2.3cqw; border-radius: .5cqw; }
.mock--case .mk-item__body b { font-size: .78cqw; }
.mock--case .mk-item__body em { font-size: .62cqw; }
.mock--case .mk-price { font-size: .85cqw; }
.mock--case .mk-tabs { gap: .45cqw; margin-top: .35cqw; }
.mock--case .mk-tabs span { padding: .35cqw .7cqw; font-size: .64cqw; }

/* Editorial */
.mock--case .mk-areas { gap: .9cqw; }
.mock--case .mk-area { gap: .22cqw; padding-top: .65cqw; }
.mock--case .mk-area .mk-num { font-size: .6cqw; }
.mock--case .mk-area b { font-size: .8cqw; }
.mock--case .mk-chipcard { padding: .5cqw .6cqw; border-radius: .6cqw; font-size: .65cqw; gap: .5cqw; }
.mock--case .mk-swatch { width: 1.4cqw; height: 1.4cqw; border-radius: .4cqw; }

/* Tabelas, citação e rodapé */
.mock--case .mk-table { border-radius: .65cqw; }
.mock--case .mk-tr { padding: .45cqw .6cqw; font-size: .68cqw; gap: .55cqw; }
.mock--case .mk-tr:first-child { font-size: .62cqw; }
.mock--case .mk-quote { padding: .65cqw .75cqw; border-radius: .7cqw; gap: .65cqw; }
.mock--case .mk-quote p { font-size: .74cqw; }
.mock--case .mk-quote cite { font-size: .62cqw; }
.mock--case .mk-person { gap: .5cqw; }
.mock--case .mk-person b { font-size: .74cqw; }
.mock--case .mk-person span { font-size: .62cqw; }
.mock--case .mk-foot { padding-top: .65cqw; font-size: .64cqw; }

/* Metrics */
.metric__value {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--text);
}

.metric__label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Case sections */
.case-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px var(--pad);
  border-top: 1px solid var(--border);
}

.case-section__inner {
  max-width: 640px;
}

.case-section__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}

.case-section__title {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.15;
}

.case-section__text {
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* Stack pills */
.case-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.case-stack__item {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color 0.18s var(--ease);
}
.case-stack__item:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Results grid */
.case-results {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 0;
  border-top: 1px solid var(--border);
}

.case-results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}

.case-result {
  padding: 32px 24px;
  text-align: center;
}

/* Quote */
.case-quote {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad);
  border-top: 1px solid var(--border);
}

.case-quote__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.case-quote__text {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 28px;
  border-left: 3px solid var(--accent);
  padding-left: 24px;
}

.case-quote__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.case-quote__cite strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
}
.case-quote__cite span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* CTA */
.case-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad);
  border-top: 1px solid var(--border);
}

.case-cta__inner {
  max-width: 640px;
}

/* Responsive case */
@media (max-width: 920px) {
  .case-hero__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-hero__info { grid-column: span 2; }
  .case-hero__metric { grid-column: span 1; }
  .case-results__grid { grid-template-columns: repeat(2, 1fr); }

  .case-showcase__inner { padding: 20px; }
}

@media (max-width: 640px) {
  :root { --pad: 16px; }

  .case-hero { padding: 80px var(--pad) 32px; }
  .case-hero__grid { grid-template-columns: 1fr; }
  .case-hero__info,
  .case-hero__metric { grid-column: span 1; }

  .case-results__grid { grid-template-columns: 1fr 1fr; }

  .case-section { padding: 48px var(--pad); }
  .case-quote { padding: 48px var(--pad); }
  .case-cta { padding: 48px var(--pad); }
  .case-showcase { padding-bottom: 56px; }
  .case-showcase__inner { padding: 16px; }
  .case-showcase__label { font-size: 11px; margin-bottom: 14px; }

  /* O screenshot é desktop: em vez de encolher até virar borrão,
     mantém a largura mínima e rola na horizontal. */
  .case-showcase__inner { overflow-x: auto; }
  .case-showcase__inner .mock { min-width: 760px; }
}

/* Forja — multi-panel showcase */
.forja-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.forja-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-1);
}

@media (max-width: 720px) {
  .forja-panels { grid-template-columns: 1fr; }
}

.case-hero__live { margin-top: 18px; align-self: flex-start; }

/* Captura real: página inteira, rola dentro da moldura */
.mock--case .mk-screen--shot { overflow-y: auto; overscroll-behavior: contain; }
.mock--case .mk-shot { height: auto; object-fit: initial; }