/* =============================================================
   sec-service-single.css — Focofy Factory v3.6
   Seção: Service Single
   Contract: Design Tokens v3.6 / Responsive Contract v1.3

   v3.5 → v3.6:
     - --ss-content-max: 860px → var(--content-max) (DTC v3.6)
     - max-width: 860px no .no-media → var(--ss-content-max)
     - split grid desktop-first → mobile-first (min-width: 1024px)
     - order rules (is-media-*) movidas para min-width: 1024px
     - max-width: 1024px (Tipo B) → removido
     - max-width: 768px → 767px (valor canônico)
     - var(--focus-ring-*) → var(--ds-focus-*)
     - focofy-button → btn (namespace padrão do tema)
   ============================================================= */

/* -------------------------------------------------------------
   Tokens locais da seção
   Todos derivados da Camada 2 (--color-*, --space-*, etc.)
   ------------------------------------------------------------- */
.focofy-service-single {
  --ss-gap:           var(--grid-gap);
  --ss-content-max:   var(--content-max);    /* 860px — DTC v3.6 */
  --ss-media-max:     540px;

  --ss-title-color:   var(--color-heading);
  --ss-text-color:    var(--color-text);
  --ss-muted-color:   var(--color-text-muted);

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

  --ss-icon-bg:       color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-2));
  --ss-icon-border:   color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
  --ss-icon-color:    var(--color-accent);
  --ss-icon-shadow:   var(--shadow-sm);

  --ss-meta-bg:       var(--color-surface-2);
  --ss-meta-border:   var(--color-border-subtle);
  --ss-meta-label:    var(--color-text-muted);
  --ss-meta-value:    var(--color-text);

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

  --ss-pill-bg:       color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2));
  --ss-pill-border:   color-mix(in srgb, var(--color-accent) 14%, var(--color-border-subtle));

  --ss-divider:       var(--color-border-subtle);

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

/* Ajuste de tokens para fundos escuros */
.focofy-section[data-bg="dark"] .focofy-service-single,
.focofy-section--sec-service-single[data-bg="dark"] .focofy-service-single {
  --ss-badge-bg:      color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-2));
  --ss-icon-bg:       var(--color-surface-3);
  --ss-meta-bg:       var(--color-surface-3);
  --ss-meta-border:   var(--color-border-strong);
  --ss-benefit-bg:    var(--color-surface-3);
  --ss-benefit-border: var(--color-border-strong);
}

/* Ajuste para fundos accent / gradient */
.focofy-section[data-bg="accent"] .focofy-service-single,
.focofy-section[data-bg="gradient"] .focofy-service-single {
  --ss-meta-bg:    color-mix(in srgb, var(--color-surface-1) 88%, transparent);
  --ss-benefit-bg: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
}

/* -------------------------------------------------------------
   Raiz
   ------------------------------------------------------------- */
.focofy-service-single {
  position: relative;
}

/* -------------------------------------------------------------
   Body — grade interna (mídia + conteúdo)
   ------------------------------------------------------------- */
.focofy-service-single__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ss-gap);
  align-items: center;
}

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

/* Todos os outros layouts: 1 coluna */
.focofy-service-single--layout-stacked .focofy-service-single__body,
.focofy-service-single--layout-hero    .focofy-service-single__body,
.focofy-service-single--layout-compact .focofy-service-single__body {
  grid-template-columns: 1fr;
}

/* Order rules (is-media-left/right) — ativas somente no desktop via min-width: 1024px abaixo */

/* -------------------------------------------------------------
   Mídia
   ------------------------------------------------------------- */
.focofy-service-single__media {
  position: relative;
  width: 100%;
  max-width: var(--ss-media-max);
}

/* Layouts não-split + media-top: mídia full width */
.focofy-service-single--media-top       .focofy-service-single__media,
.focofy-service-single--layout-stacked  .focofy-service-single__media,
.focofy-service-single--layout-hero     .focofy-service-single__media,
.focofy-service-single--layout-compact  .focofy-service-single__media {
  max-width: 100%;
}

.focofy-service-single__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ss-meta-border);
  box-shadow: var(--shadow-lg);
  background: var(--ss-meta-bg);
}

/* -------------------------------------------------------------
   Conteúdo
   ------------------------------------------------------------- */
.focofy-service-single__content {
  width: 100%;
  max-width: var(--ss-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Sem mídia: conteúdo pode ocupar mais largura */
.focofy-service-single.no-media .focofy-service-single__content {
  max-width: var(--ss-content-max);
}

/* Variantes de largura do container interno */
.focofy-service-single--width-narrow .focofy-service-single__content {
  max-width: 680px;
}

.focofy-service-single--width-wide .focofy-service-single__content {
  max-width: 960px;
}

/* Alinhamento */
.focofy-service-single--align-center .focofy-service-single__content {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.focofy-service-single--align-left .focofy-service-single__content {
  text-align: left;
  align-items: flex-start;
}

/* -------------------------------------------------------------
   Badge
   ------------------------------------------------------------- */
.focofy-service-single__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ss-badge-border);
  border-radius: var(--radius-full);
  background: var(--ss-badge-bg);
  color: var(--ss-badge-color);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.focofy-service-single--align-center .focofy-service-single__badge {
  align-self: center;
}

/* -------------------------------------------------------------
   Ícone
   ------------------------------------------------------------- */
.focofy-service-single__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-12) + var(--space-2));
  height: calc(var(--space-12) + var(--space-2));
  border-radius: var(--radius-xl);
  background: var(--ss-icon-bg);
  border: 1px solid var(--ss-icon-border);
  box-shadow: var(--ss-icon-shadow);
}

.focofy-service-single__icon i {
  font-size: var(--font-size-2xl);
  line-height: 1;
  color: var(--ss-icon-color);
}

/* -------------------------------------------------------------
   Título
   ------------------------------------------------------------- */
.focofy-service-single__title {
  margin: 0;
  color: var(--ss-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* -------------------------------------------------------------
   Introdução / resumo
   ------------------------------------------------------------- */
.focofy-service-single__intro {
  color: var(--ss-muted-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

.focofy-service-single__intro p {
  margin: 0 0 var(--space-4);
}

.focofy-service-single__intro p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------
   Meta (preço / duração / formato)
   ------------------------------------------------------------- */
.focofy-service-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.focofy-service-single--align-center .focofy-service-single__meta {
  justify-content: center;
}

.focofy-service-single__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ss-meta-border);
  border-radius: var(--radius-lg);
  background: var(--ss-meta-bg);
}

.focofy-service-single__meta-label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-meta-label);
}

.focofy-service-single__meta-value {
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ss-meta-value);
}

/* Variante: inline (sem caixas) */
.focofy-service-single--meta-inline .focofy-service-single__meta {
  gap: var(--space-5);
  align-items: center;
}

.focofy-service-single--meta-inline .focofy-service-single__meta-item {
  background: transparent;
  border: 0;
  padding: 0;
  min-width: auto;
  border-radius: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Variante: pills */
.focofy-service-single--meta-pills .focofy-service-single__meta-item {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* Variante: cards (padrão com shadow extra) */
.focofy-service-single--meta-cards .focofy-service-single__meta-item {
  min-width: 140px;
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------
   Benefícios
   ------------------------------------------------------------- */
.focofy-service-single__benefits-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.focofy-service-single__benefits-title {
  margin: 0;
  color: var(--ss-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

.focofy-service-single__benefits {
  margin: 0;
  padding: 0;
}

/* Lista simples */
.focofy-service-single__benefits--list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.focofy-service-single__benefits--list li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--ss-benefit-border);
  border-radius: var(--radius-lg);
  background: var(--ss-benefit-bg);
  color: var(--ss-benefit-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.focofy-service-single__benefits--list li::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);
}

/* Pills */
.focofy-service-single__benefits--pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.focofy-service-single--align-center .focofy-service-single__benefits--pills {
  justify-content: center;
}

.focofy-service-single__benefit-pill {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space-8) + var(--space-2));
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--ss-pill-border);
  background: var(--ss-pill-bg);
  color: var(--ss-benefit-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* Cards */
.focofy-service-single__benefits--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.focofy-service-single__benefit-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ss-benefit-border);
  background: var(--ss-benefit-bg);
  color: var(--ss-benefit-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-relaxed);
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------
   Descrição completa (conteúdo do post)
   ------------------------------------------------------------- */
.focofy-service-single__description {
  color: var(--ss-text-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}

.focofy-service-single__description > :first-child { margin-top: 0; }
.focofy-service-single__description > :last-child  { margin-bottom: 0; }

.focofy-service-single__description h2,
.focofy-service-single__description h3,
.focofy-service-single__description h4 {
  color: var(--ss-title-color);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.focofy-service-single__description p,
.focofy-service-single__description ul,
.focofy-service-single__description ol,
.focofy-service-single__description blockquote {
  margin-bottom: var(--space-4);
}

.focofy-service-single__description ul,
.focofy-service-single__description ol {
  padding-left: var(--space-6);
}

.focofy-service-single__description a {
  color: var(--color-link);
}

.focofy-service-single__description a:hover {
  color: var(--color-link-hover);
}

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.focofy-service-single__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.focofy-service-single--align-center .focofy-service-single__cta {
  justify-content: center;
}

/* -------------------------------------------------------------
   Variante hero
   ------------------------------------------------------------- */
.focofy-service-single--layout-hero {
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 36%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-accent-2) 8%, transparent), transparent 36%),
    var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------- */
.focofy-service-single 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);
  border-radius: var(--radius-sm);
}

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

  /* split: 2 colunas no desktop */
  .focofy-service-single--layout-split .focofy-service-single__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* order rules — só fazem sentido em 2 colunas */
  .focofy-service-single__body.is-media-left .focofy-service-single__media  { order: 1; }
  .focofy-service-single__body.is-media-left .focofy-service-single__content { order: 2; }
  .focofy-service-single__body.is-media-right .focofy-service-single__content { order: 1; }
  .focofy-service-single__body.is-media-right .focofy-service-single__media  { order: 2; }
}

/* -------------------------------------------------------------
   Responsivo — --bp-tablet: 768px
   ------------------------------------------------------------- */
@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .focofy-service-single {
    --ss-gap: var(--space-8);
  }

  .focofy-service-single__title {
    font-size: var(--font-size-3xl);
  }

  .focofy-service-single__intro {
    font-size: var(--font-size-base);
  }

  .focofy-service-single__meta {
    flex-direction: column;
    gap: var(--space-2);
  }

  .focofy-service-single--meta-pills .focofy-service-single__meta,
  .focofy-service-single--meta-inline .focofy-service-single__meta {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .focofy-service-single__meta-item {
    width: 100%;
    min-width: 0;
  }

  .focofy-service-single--meta-pills .focofy-service-single__meta-item,
  .focofy-service-single--meta-inline .focofy-service-single__meta-item {
    width: auto;
  }

  .focofy-service-single__benefits--cards {
    grid-template-columns: 1fr;
  }

  .focofy-service-single__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .focofy-service-single--layout-hero {
    padding: var(--space-6);
  }
}

/* -------------------------------------------------------------
   Prefers reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .focofy-service-single__media img {
    transition: none;
  }
}