/* ================================================================
   ARTICLE / CASE STUDY PAGES
   Estilos para conteúdo longo: páginas de blog e cases individuais
   ================================================================ */

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  max-width: 900px;
  margin: 0 auto;
}

/* Grid items default to min-width:auto (their min-content size). Some
   long unbroken run inside the article text pushed .prose's min-content
   past the available track width, so the 1fr column silently grew
   past the container — with body{overflow-x:clip} that meant the
   overflow wasn't scrollable, it was just cut off and unreadable on a
   phone. min-width:0 lets the column shrink to the container and wrap
   normally, like every other grid item fixed this way on this site. */
.article-layout > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .article-layout--sidebar {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--color-gray);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}

.article-meta-bar__category {
  display: inline-flex;
  align-items: center;
  background: rgba(255,102,0,0.1);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.article-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-8);
  aspect-ratio: 16/9;
  background: var(--color-dark);
}

.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------------
   PROSE — tipografia para corpo de texto
   ---------------------------------------------------------------- */

.prose {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-dark-mid);
}

.prose > * + * { margin-top: var(--sp-5); }

.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin-top: var(--sp-10);
  line-height: 1.25;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-dark);
  margin-top: var(--sp-8);
}

.prose p { margin-top: var(--sp-4); }

.prose ul, .prose ol {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prose li { padding-left: 0.3em; }

.prose strong { color: var(--color-dark); font-weight: 600; }

.prose a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(255,102,0,0.35); }
.prose a:hover { text-decoration-color: var(--color-primary); }

.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-dark);
  margin: var(--sp-6) 0;
}

.prose figure { margin: var(--sp-6) 0; }
.prose figure img { width: 100%; border-radius: var(--radius); display: block; }
.prose figcaption {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--sp-2);
  text-align: center;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-8) 0;
}

/* ----------------------------------------------------------------
   STATS STRIP (resultados do case)
   ---------------------------------------------------------------- */

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0;
}

@media (min-width: 640px) {
  .result-stats { grid-template-columns: repeat(4, 1fr); }
}

.result-stat {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}

.result-stat__number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.result-stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

/* ----------------------------------------------------------------
   CTA BOX dentro do artigo
   ---------------------------------------------------------------- */

.inline-cta {
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  text-align: center;
  margin: var(--sp-10) 0;
}

.inline-cta h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: var(--sp-2);
}

.inline-cta p {
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-5);
}

/* .btn is white-space:nowrap by design (buttons shouldn't wrap mid-word),
   but "Solicite um diagnóstico gratuito" at that width needs more room
   than a phone has to give — it rendered past the card's own edge and
   got clipped by body{overflow-x:clip}. Let it size to the card and, as
   a safety net, allow wrapping if the label still doesn't fit. */
@media (max-width: 640px) {
  .inline-cta { padding: var(--sp-6) var(--sp-5); }
  .inline-cta .btn { width: 100%; white-space: normal; }
}

/* ----------------------------------------------------------------
   TAGS / SETORES
   ---------------------------------------------------------------- */

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-border);
}

.article-tag {
  background: var(--color-bg);
  color: var(--color-dark-mid);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

/* ----------------------------------------------------------------
   RELATED GRID (cases/posts relacionados)
   ---------------------------------------------------------------- */

.related-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--sp-6);
}

/* ----------------------------------------------------------------
   CLIENT LOGOS GRID (página Clientes)
   ---------------------------------------------------------------- */

/* Base (≤640px): the 33 client logos on clientes.html used to run
   through this grid via an inline auto-fill(minmax(120px,1fr)) style,
   which only ever fit 2 per row on a phone — 33 logos in 2 lopsided
   columns is a very long scroll. 3 even columns reads as a tidy block
   instead. Desktop keeps the original auto-fill density (unchanged). */
.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

@media (min-width: 641px) {
  .client-logos-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--sp-4);
  }
}

.client-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--sp-2);
  min-height: 72px;
  text-align: center;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

@media (min-width: 641px) {
  .client-logo-card {
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    min-height: 100px;
  }
}

.client-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}

.client-logo-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}

@media (min-width: 641px) {
  .client-logo-card img { max-height: 60px; }
}

.client-logo-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-dark);
}

.client-logo-card__sector {
  font-size: var(--text-xs);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------------
   SECTOR BADGES (lista de setores atendidos)
   ---------------------------------------------------------------- */

.sector-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}

/* background was the same var(--color-bg) as the section behind it
   (section--bg), so the "pill" was invisible — just floating text with
   no shape. White + a border gives it an actual chip outline, matching
   every other tag/badge on the site (e.g. .product-sector-tag). */
.sector-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
}

@media (max-width: 640px) {
  .sector-badges { gap: var(--sp-2); margin-top: var(--sp-6); }
  .sector-badge { font-size: var(--text-xs); padding: 7px 14px; }
}

@media (min-width: 800px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ----------------------------------------------------------------
   DEPOIMENTOS — card único (clientes.html)
   Idêntico ao componente .tst da Home (assets/home/css/home.css) —
   copiado aqui porque clientes.html não carrega home.css inteiro.
   ---------------------------------------------------------------- */
.tst { max-width: 720px; margin: 0 auto; cursor: grab; touch-action: pan-y; }
.tst.is-dragging { cursor: grabbing; user-select: none; }
.tst__card {
  position: relative;
  background:
    radial-gradient(120% 130% at 26% 0%, rgba(255,102,0,.16) 0%, rgba(255,102,0,0) 55%),
    linear-gradient(180deg,#232329 0%,#16161a 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: clamp(28px,4vw,44px) clamp(24px,4vw,40px) clamp(24px,4vw,32px);
  color: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  height: 440px; display: flex; flex-direction: column; overflow: hidden;
}
.tst__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.tst__avatar {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255,102,0,.35);
}
.tst__identity { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.tst__identity strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst__identity span { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst__stars { display: flex; align-items: center; gap: 3px; flex: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 50px; padding: 7px 12px; color: #FFB020; }
.tst__stars svg { width: 13px; height: 13px; }
.tst__headline { color: #fff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem,2.6vw,1.9rem); line-height: 1.15; margin-bottom: 14px; }
.tst__quote { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.8); }
.tst__company { margin-top: auto; padding-top: 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary-light); font-size: .85rem; }

@keyframes psSwapUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .tst__card.is-swap .tst__head,
  .tst__card.is-swap .tst__headline,
  .tst__card.is-swap .tst__quote,
  .tst__card.is-swap .tst__company { animation: psSwapUp .5s cubic-bezier(.25,.46,.45,.94) backwards; }
  .tst__card.is-swap .tst__headline { animation-delay: .05s; }
  .tst__card.is-swap .tst__quote { animation-delay: .1s; }
  .tst__card.is-swap .tst__company { animation-delay: .15s; }
}

.tst__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.tst__dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: background .25s var(--ease), width .25s var(--ease); }
.tst__dots button:hover { background: var(--color-gray-light); }
.tst__dots button.active { background: var(--color-primary); width: 20px; border-radius: 4px; }

@media (max-width: 640px) {
  .tst__card { height: 520px; padding: 24px 20px 20px; border-radius: 16px; }
  .tst__avatar { width: 48px; height: 48px; font-size: 1rem; }
  .tst__identity strong { font-size: .9rem; }
  .tst__identity span { font-size: .75rem; }
  .tst__stars { padding: 5px 9px; gap: 2px; }
  .tst__stars svg { width: 11px; height: 11px; }
  .tst__headline { font-size: clamp(1.15rem,6vw,1.4rem); }
  .tst__quote { font-size: .92rem; line-height: 1.7; }
}