/* Cases em destaque (Figma: Cases 2677:2072). Intro centralizada; abaixo,
   4 cartões de 1280px (raio 30, borda 1,05px) a 20px um do outro. Dentro de
   cada um: foto de 586px de largura (raio 20) a 44px da borda — 416px de
   altura no Fini e na EMS (cartão de 504) e 448px na Legrand e na Iquine
   (cartão de 536), via --case-ph — e a coluna de texto com logo, título em
   destaque (32px), subtítulo laranja, descrição no topo e divisória +
   legenda colados na base. A foto alterna de lado. */

.cases-detalhado { padding: 56px 0 0; }
@media (min-width: 1024px) {
  /* 142px depois do hero (700 → eyebrow em 842). */
  .cases-detalhado { padding: 142px 0 0; }
}

.cases-detalhado-intro { text-align: center; margin-bottom: 40px; }
.cases-detalhado-intro h2 { max-width: 808px; margin: 0 auto; }
@media (min-width: 1024px) {
  .cases-detalhado-intro { margin-bottom: 64px; }
}

/* Entrada animada (fade + slide-up) ao rolar até a seção. */
.cases-detalhado-intro,
.case-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cases-detalhado-intro.is-visible,
.case-card.is-visible { opacity: 1; transform: none; }
html:not(.js) .cases-detalhado-intro,
html:not(.js) .case-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cases-detalhado-intro,
  .case-card { transition: none; }
}

.cases-detalhado-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 22px;
  background: var(--color-white);
  border: 1.05px solid var(--color-border-blue);
  border-radius: 20px;
}
@media (min-width: 1024px) {
  /* Duas colunas de 586px (fr = proporcional abaixo de 1280), 20px de
     vão e 44px da borda externa até a foto (42,95 de padding + 1,05
     de borda). */
  .case-card {
    grid-template-columns: 586fr 586fr;
    gap: 20px;
    padding: 42.95px;
    border-radius: 30px;
  }
  /* Foto à esquerda: ela vai antes no layout, o texto depois. */
  .case-card--image-left .case-card-photo { order: -1; }
  /* No Figma o texto do cartão com foto à esquerda começa 44px depois
     do início da coluna (x=1014, a foto termina em 950). */
  .case-card--image-left .case-card-body { padding-left: 44px; }
}

.case-card-photo {
  position: relative;
  aspect-ratio: 586 / var(--case-ph, 416);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .case-card-photo { border-radius: 20px; }
}
.case-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* O Figma desenha uma borda de 1,05px (azulada, 20%) por cima da foto. */
.case-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.05px solid var(--color-border-blue);
  border-radius: inherit;
  pointer-events: none;
}

.case-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}
@media (min-width: 1024px) {
  /* Espaço mínimo entre a descrição e a divisória: 20px (no Fini, o cartão
     mais cheio, o Figma tem ~23px; nos demais o espaço é maior e sobra). */
  .case-card-body { gap: 20px; }
  /* A posição do logo (--case-logo-top, medida a partir do topo da foto) e
     da legenda (--case-pad-b, até a base da foto) muda de cartão pra
     cartão no Figma; título, subtítulo e descrição vêm em sequência. */
  .case-card-body { padding-bottom: var(--case-pad-b, 0); }
}

/* Logo no tamanho natural; no desktop desce --case-logo-top a partir do
   topo da foto (Fini 3, EMS 3, Iquine 6, Legrand 25 — a logo da Legrand,
   de 49px, é a mais baixa). */
.case-card-logo { display: block; }
.case-card-logo img { display: block; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
@media (min-width: 1024px) {
  .case-card-logo { margin-top: var(--case-logo-top, 0); }
}

/* Título em destaque (32px bold) a 24px do logo; abaixo o subtítulo
   laranja (o antigo título do cartão, 20px semibold) e a descrição. */
.case-card h3 { max-width: var(--case-hl-w, none); margin: 16px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.22px; color: var(--color-navy); }
@media (min-width: 1024px) {
  .case-card h3 { margin-top: 24px; font-size: 32px; letter-spacing: -0.32px; }
}

.case-card-sub { max-width: var(--case-sub-w, none); margin: 16px 0 0; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.16px; color: var(--color-orange); }
@media (min-width: 1024px) {
  .case-card-sub { margin-top: 32px; font-size: 18px; letter-spacing: -0.18px; }
}

.case-card-desc { max-width: var(--case-desc-w); margin: 12px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }
@media (min-width: 1024px) {
  .case-card-desc { margin-top: 24px; font-size: 16px; }
}

.case-card-divider { width: 100%; max-width: var(--case-line-w); height: 0; margin: 0 0 24px; border: 0; border-top: 1px solid var(--color-border-blue); }
.case-card-caption { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }

/* Mobile/tablet: quebras de linha equilibradas (sem palavra sozinha na
   última linha). No desktop as quebras seguem o Figma. */
@media (max-width: 1023px) {
  .case-card h3,
  .case-card-sub { text-wrap: balance !important; }
  .case-card-desc { text-wrap: pretty !important; }
}