/* =============================================================
   sec-cpt-solucoes.css — Focofy Factory v1.0
   Seção: CPT Soluções (listagem / grade / single-card)
   Contract: Design Tokens v3.6 / Responsive Contract v1.3

   BEM root:  .solucoes-block
   Grades:    .solucoes-grid  + data-cols-desktop / tablet / mobile
   Cards:     .solucoes-card
   Single:    .solucoes-single-card
   ============================================================= */

/* -------------------------------------------------------------
   Tokens locais — derivados da Camada 2 (nunca --ds-* direto)
   ------------------------------------------------------------- */
.solucoes-block {
  --sol-card-bg:            var(--color-surface-1);
  --sol-card-bg-hover:      var(--color-surface-1);
  --sol-card-border:        var(--color-border-subtle);
  --sol-card-border-hover:  var(--color-border-strong);
  --sol-card-shadow:        var(--shadow-md);
  --sol-card-shadow-hover:  var(--shadow-lg);
  --sol-card-radius:        var(--radius-2xl);
  --sol-card-radius-inner:  var(--radius-xl);
  --sol-card-gap:           var(--space-4);
  --sol-card-padding:       var(--space-4);
  --sol-card-padding-lg:    var(--space-6);

  --sol-media-bg:           var(--color-surface-2);

  --sol-title-color:        var(--color-heading);
  --sol-text-color:         var(--color-text-muted);
  --sol-price-color:        var(--color-accent);

  --sol-badge-bg:           color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-1));
  --sol-badge-border:       color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
  --sol-badge-color:        var(--color-heading);

  --sol-benefit-bg:         var(--color-surface-2);
  --sol-benefit-border:     var(--color-border-subtle);
  --sol-benefit-color:      var(--color-text);

  --sol-grid-gap:           var(--grid-gap);

  color: var(--color-text);
}

/* Fundo escuro */
.focofy-section[data-bg="dark"] .solucoes-block,
.focofy-section--sec-cpt-solucoes[data-bg="dark"] .solucoes-block {
  --sol-card-bg:           var(--color-surface-2);
  --sol-card-bg-hover:     var(--color-surface-2);
  --sol-card-border:       var(--color-border-strong);
  --sol-card-border-hover: color-mix(in srgb, var(--color-accent) 16%, var(--color-border-strong));
  --sol-media-bg:          var(--color-surface-3);
  --sol-benefit-bg:        var(--color-surface-3);
  --sol-benefit-border:    var(--color-border-strong);
}

/* Fundo accent / gradient */
.focofy-section[data-bg="accent"] .solucoes-block,
.focofy-section[data-bg="gradient"] .solucoes-block,
.focofy-section[data-bg="primary"] .solucoes-block {
  --sol-card-bg:       color-mix(in srgb, var(--color-surface-1) 96%, transparent);
  --sol-card-bg-hover: color-mix(in srgb, var(--color-surface-1) 98%, transparent);
}

/* -------------------------------------------------------------
   Cabeçalho da section
   ------------------------------------------------------------- */
.solucoes-block__header {
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

.solucoes-block__subtitulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--sol-badge-border);
  border-radius: var(--radius-full);
  background: var(--sol-badge-bg);
  color: var(--sol-badge-color);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.solucoes-block__titulo {
  margin: 0;
  color: var(--sol-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

.solucoes-block__descricao {
  margin-top: var(--space-4);
  color: var(--sol-text-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------
   Grid (modo grade)
   ------------------------------------------------------------- */
.solucoes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sol-grid-gap);
  align-items: stretch;
}

/* Colunas ativas no desktop via min-width: 1024px — veja abaixo */

/* -------------------------------------------------------------
   Card base
   ------------------------------------------------------------- */
.solucoes-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sol-card-border);
  border-radius: var(--sol-card-radius);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 40%),
    linear-gradient(180deg, var(--sol-card-bg), color-mix(in srgb, var(--sol-card-bg) 92%, var(--color-surface-2)));
  box-shadow: var(--sol-card-shadow);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.solucoes-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-accent) 8%, transparent),
    transparent 45%,
    color-mix(in srgb, var(--color-accent-2) 8%, transparent)
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.solucoes-card:hover,
.solucoes-card:focus-within {
  transform: translateY(calc(var(--space-1) * -1));
  border-color: var(--sol-card-border-hover);
  box-shadow: var(--sol-card-shadow-hover);
}

.solucoes-card:hover::before,
.solucoes-card:focus-within::before {
  opacity: 1;
}

.solucoes-card > * {
  position: relative;
  z-index: 1;
}

/* Destaque */
.solucoes-card--destaque {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--sol-card-border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 38%),
    linear-gradient(180deg, var(--sol-card-bg), color-mix(in srgb, var(--sol-card-bg) 90%, var(--color-surface-2)));
}

/* -------------------------------------------------------------
   Mídia do card
   ------------------------------------------------------------- */
.solucoes-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sol-media-bg);
  aspect-ratio: 16 / 10;
}

.solucoes-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-overlay) 12%, transparent));
  pointer-events: none;
}

.solucoes-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-base);
}

.solucoes-card:hover .solucoes-card__img,
.solucoes-card:focus-within .solucoes-card__img {
  transform: scale(1.04);
  filter: saturate(1.04);
}

/* -------------------------------------------------------------
   Corpo do card
   ------------------------------------------------------------- */
.solucoes-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sol-card-gap);
  min-width: 0;
  padding: var(--sol-card-padding-lg);
}

.solucoes-card__title {
  margin: 0;
  color: var(--sol-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

.solucoes-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.solucoes-card:hover .solucoes-card__title-link,
.solucoes-card:focus-within .solucoes-card__title-link,
.solucoes-card__title-link:focus-visible {
  color: var(--color-link-hover);
}

.solucoes-card__resumo {
  margin: 0;
  color: var(--sol-text-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}

.solucoes-card__benefits {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.solucoes-card__benefit {
  position: relative;
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--sol-benefit-border);
  border-radius: var(--radius-lg);
  background: var(--sol-benefit-bg);
  color: var(--sol-benefit-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.solucoes-card__benefit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent-2) 56%, var(--color-accent)));
  transform: translateY(-50%);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.solucoes-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.solucoes-card__preco {
  color: var(--sol-price-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.solucoes-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-4));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 88%, var(--color-surface-1)),
    color-mix(in srgb, var(--color-accent-hover) 88%, var(--color-surface-dark))
  );
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}

.solucoes-card__cta::after {
  content: "→";
  line-height: 1;
  transition: transform var(--transition-base);
}

.solucoes-card__cta:hover,
.solucoes-card__cta:focus-visible {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-md);
  filter: brightness(1.02);
}

.solucoes-card__cta:hover::after,
.solucoes-card__cta:focus-visible::after {
  transform: translateX(var(--space-1));
}

/* -------------------------------------------------------------
   Single-card (modo single: uma solução em destaque)
   ------------------------------------------------------------- */
.solucoes-single-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sol-grid-gap);
  border: 1px solid var(--sol-card-border);
  border-radius: var(--sol-card-radius);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 40%),
    var(--sol-card-bg);
  box-shadow: var(--sol-card-shadow);
  overflow: hidden;
}

/* Layout split — 2 colunas no desktop via min-width: 1024px abaixo */

.solucoes-single-card__media {
  position: relative;
  overflow: hidden;
  background: var(--sol-media-bg);
}

.solucoes-single-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: calc(var(--space-24) + var(--space-16));
}

.solucoes-single-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sol-card-gap);
  padding: var(--sol-card-padding-lg);
}

.solucoes-single-card__title {
  margin: 0;
  color: var(--sol-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

.solucoes-single-card__resumo {
  margin: 0;
  color: var(--sol-text-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

.solucoes-single-card__benefits {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.solucoes-single-card__benefit {
  position: relative;
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--sol-benefit-border);
  border-radius: var(--radius-lg);
  background: var(--sol-benefit-bg);
  color: var(--sol-benefit-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.solucoes-single-card__benefit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent-2) 56%, var(--color-accent)));
  transform: translateY(-50%);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.solucoes-single-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.solucoes-single-card__preco {
  color: var(--sol-price-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.solucoes-single-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-4));
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 88%, var(--color-surface-1)),
    color-mix(in srgb, var(--color-accent-hover) 88%, var(--color-surface-dark))
  );
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}

.solucoes-single-card__cta:hover,
.solucoes-single-card__cta:focus-visible {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-md);
  filter: brightness(1.02);
}

.solucoes-single-card__link {
  color: var(--color-link);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.solucoes-single-card__link:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------- */
.solucoes-block a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ds-focus-size, 3px) color-mix(in srgb, var(--ds-focus-color, var(--color-accent)) var(--ds-focus-opacity-pct, 50%), transparent);
}

/* -------------------------------------------------------------
   Desktop — ≥ 1024px
   ------------------------------------------------------------- */
@media (min-width: 1024px) {             /* --bp-desktop */

  /* Grade: colunas via data-cols-desktop */
  .solucoes-block--grade .solucoes-grid[data-cols-desktop="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solucoes-block--grade .solucoes-grid[data-cols-desktop="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solucoes-block--grade .solucoes-grid[data-cols-desktop="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Single-card: layout split → 2 colunas */
  .solucoes-block--layout-split .solucoes-single-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------
   Tablet — 768px – 1023px
   ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {  /* --bp-tablet → --bp-desktop */

  /* Grade: colunas via data-cols-tablet */
  .solucoes-block--grade .solucoes-grid[data-cols-tablet="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solucoes-block--grade .solucoes-grid[data-cols-tablet="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solucoes-block__header {
    margin-bottom: var(--space-8);
  }
}

/* -------------------------------------------------------------
   Mobile — < 768px
   ------------------------------------------------------------- */
@media (max-width: 767px) {              /* abaixo de --bp-tablet */

  .solucoes-block__titulo {
    font-size: var(--font-size-3xl);
  }

  .solucoes-block__descricao {
    font-size: var(--font-size-base);
  }

  .solucoes-block__header {
    margin-bottom: var(--space-8);
  }

  /* Grade: colunas via data-cols-mobile */
  .solucoes-block--grade .solucoes-grid[data-cols-mobile="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solucoes-card__body {
    padding: var(--sol-card-padding);
  }

  .solucoes-single-card__title {
    font-size: var(--font-size-2xl);
  }

  .solucoes-single-card__resumo {
    font-size: var(--font-size-base);
  }

  .solucoes-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .solucoes-single-card__cta {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------
   Prefers reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .solucoes-card,
  .solucoes-card::before,
  .solucoes-card__img,
  .solucoes-card__cta,
  .solucoes-card__cta::after,
  .solucoes-card__title-link,
  .solucoes-single-card__cta {
    transition: none;
  }

  .solucoes-card:hover,
  .solucoes-card:focus-within,
  .solucoes-card__cta:hover,
  .solucoes-card__cta:focus-visible,
  .solucoes-single-card__cta:hover,
  .solucoes-single-card__cta:focus-visible {
    transform: none;
  }
}