/* =============================================================
   sec-services.css — Focofy Factory v3.7
   Seção: Services
   Contract: Design Tokens v3.6 / Responsive Contract v1.3
   ACF: group_focofy_pb__sec_services v3.3

   v3.6 → v3.7:
     - [data-columns] grid seletores → min-width: 1024px (mobile-first)
     - max-width: 1024px grid colapso → removido (Tipo A+B)
     - max-width: 768px grid colapso → removido (Tipo B)
     - max-width: 768px → 767px (valor canônico)
     - var(--focus-ring-*) → var(--ds-focus-*)
   ============================================================= */

.services-block {
  --services-card-bg: var(--color-surface-1);
  --services-card-bg-hover: var(--color-surface-1);
  --services-card-border: var(--color-border-subtle);
  --services-card-border-hover: var(--color-border-strong);
  --services-card-shadow: var(--shadow-md);
  --services-card-shadow-hover: var(--shadow-lg);
  --services-card-radius: var(--radius-2xl);
  --services-card-radius-inner: var(--radius-xl);
  --services-card-gap: var(--space-4);
  --services-card-padding: var(--space-4);
  --services-card-padding-lg: var(--space-6);

  --services-media-bg: var(--color-surface-2);
  --services-icon-bg: var(--color-surface-2);
  --services-icon-color: var(--color-accent);
  --services-icon-size: var(--font-size-3xl);

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

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

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

  --services-grid-gap: var(--grid-gap);
  --services-list-gap: var(--space-5);
  --services-list-shell-gap: var(--space-3);
  --services-list-media-columns: minmax(0, 5fr) minmax(0, 6fr);
  --services-list-media-columns-wide: minmax(0, 6fr) minmax(0, 7fr);
  --services-list-media-min-height: calc(var(--space-24) + var(--space-24));
  --services-list-media-min-height-center: calc(var(--space-24) + var(--space-20));

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

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

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

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

.services-block .section__subtitle {
  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(--services-badge-border);
  border-radius: var(--radius-full);
  background: var(--services-badge-bg);
  color: var(--services-badge-color);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

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

.services-block .section__description {
  margin-top: var(--space-4);
  color: var(--services-text-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

.services-block .section__description > :first-child {
  margin-top: 0;
}

.services-block .section__description > :last-child {
  margin-bottom: 0;
}

.services-block--align-left .section__head {
  margin-inline: 0;
  text-align: left;
}


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

/* [data-columns] grid — ativas somente no desktop via min-width: 1024px abaixo */

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

.service-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;
}

.services-block--has-hover .service-card:hover,
.services-block--has-hover .service-card:focus-within {
  transform: translateY(calc(var(--space-1) * -1));
  border-color: var(--services-card-border-hover);
  box-shadow: var(--services-card-shadow-hover);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 40%),
    linear-gradient(180deg, var(--services-card-bg-hover), color-mix(in srgb, var(--services-card-bg-hover) 92%, var(--color-surface-2)));
}

.services-block--has-hover .service-card:hover::before,
.services-block--has-hover .service-card:focus-within::before {
  opacity: 1;
}

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

.service-card--style-minimal {
  box-shadow: var(--shadow-sm);
}

.service-card--style-minimal::before,
.services-block--has-hover .service-card--style-minimal:hover::before,
.services-block--has-hover .service-card--style-minimal:focus-within::before {
  opacity: 0;
}

.service-card--style-highlighted {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--services-card-border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 38%),
    linear-gradient(180deg, var(--services-card-bg), color-mix(in srgb, var(--services-card-bg) 90%, var(--color-surface-2)));
}

/* -------------------------------------------------------------
   Mídia
   ------------------------------------------------------------- */
.service-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--services-media-bg);
}

.service-card__media--landscape {
  aspect-ratio: 16 / 10;
}

.service-card__media--square {
  aspect-ratio: 1 / 1;
}

.service-card__media--portrait {
  aspect-ratio: 4 / 5;
}

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

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

.services-block--has-hover .service-card:hover .service-card__media img,
.services-block--has-hover .service-card:focus-within .service-card__media img {
  transform: scale(1.04);
  filter: saturate(1.04);
}

.service-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) + var(--space-16));
  padding: var(--space-8);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, var(--services-icon-bg)), var(--services-icon-bg));
}

/* icon-wrap / icon — reserva para implementação futura de ícone no card de vitrine
   Não emitidos pelo sec-services.php atual. Mantidos para extensão sem breaking change. */
.service-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-24) + var(--space-4));
  height: calc(var(--space-24) + var(--space-4));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-1) 78%, transparent);
  color: var(--services-icon-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.service-card__icon {
  font-size: var(--services-icon-size);
  line-height: 1;
}

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

.service-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--services-badge-border);
  border-radius: var(--radius-full);
  background: var(--services-badge-bg);
  color: var(--services-badge-color);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

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

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

.services-block--has-hover .service-card:hover .service-card__title a,
.services-block--has-hover .service-card:focus-within .service-card__title a,
.service-card__title a:focus-visible {
  color: var(--color-link-hover);
}

.service-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.service-card__meta-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(var(--space-8) - var(--space-1));
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--services-card-border) 82%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--services-card-bg) 72%, var(--color-surface-2));
  color: var(--services-meta-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.service-card__meta-item--price {
  color: var(--services-price-color);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--services-card-bg));
}

.service-card__excerpt {
  margin: 0;
  color: var(--services-text-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}

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

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

.service-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);
}

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

.service-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);
}

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

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

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

/* -------------------------------------------------------------
   Alinhamentos
   ------------------------------------------------------------- */
.service-card--align-center .service-card__body {
  align-items: center;
  text-align: center;
}

.service-card--align-center .service-card__badge {
  align-self: center;
}

.service-card--align-center .service-card__meta,
.service-card--align-center .service-card__footer {
  justify-content: center;
}

.service-card--align-center .service-card__benefit {
  padding-left: var(--space-4);
  padding-top: var(--space-8);
  text-align: center;
}

.service-card--align-center .service-card__benefit::before {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}


/* -------------------------------------------------------------
   Lista premium
   ------------------------------------------------------------- */
.services-block--layout-list .services-grid {
  grid-template-columns: 1fr;
}

.services-block--layout-list .service-card {
  display: grid;
  grid-template-columns: var(--services-list-media-columns);
  align-items: stretch;
  gap: var(--services-list-shell-gap);
  padding: var(--services-card-padding);
}

.services-block--layout-list .service-card--no-media {
  grid-template-columns: 1fr;
}

.services-block--layout-list .service-card__media {
  min-height: var(--services-list-media-min-height);
  height: 100%;
  border-radius: var(--services-card-radius-inner);
}

.services-block--layout-list .service-card__placeholder {
  min-height: var(--services-list-media-min-height);
  height: 100%;
  border-radius: var(--services-card-radius-inner);
}

.services-block--layout-list .service-card__media--landscape,
.services-block--layout-list .service-card__media--square,
.services-block--layout-list .service-card__media--portrait {
  aspect-ratio: auto;
}

.services-block--layout-list .service-card__body {
  justify-content: center;
  gap: var(--services-list-gap);
  padding: var(--services-card-padding-lg);
  padding-left: var(--space-4);
}

.services-block--layout-list .service-card__title {
  font-size: var(--font-size-3xl);
}

.services-block--layout-list .service-card__excerpt {
  font-size: var(--font-size-lg);
}

.services-block--layout-list.services-block--align-center .service-card {
  grid-template-columns: 1fr;
}

.services-block--layout-list.services-block--align-center .service-card__media,
.services-block--layout-list.services-block--align-center .service-card__placeholder {
  min-height: var(--services-list-media-min-height-center);
}

.services-block--layout-list.services-block--align-center .service-card__body {
  padding-left: var(--services-card-padding-lg);
}

/* -------------------------------------------------------------
   Ações finais da section
   ------------------------------------------------------------- */
.services-block .section__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.services-block--align-left .section__actions {
  justify-content: flex-start;
}

/* -------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------- */
.services-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);
}

@media (min-width: 1440px) {
  .services-block--layout-list .service-card {
    grid-template-columns: var(--services-list-media-columns-wide);
  }

  .services-block--layout-grid .services-grid[data-columns="4"] {
    gap: var(--space-8);
  }
}

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

  /* Grid: [data-columns] ativos no desktop */
  .services-block--layout-grid .services-grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  /* Lista: layout 2-colunas no desktop */
  .services-block--layout-list .service-card {
    grid-template-columns: var(--services-list-media-columns);
  }

  .services-block--layout-list .service-card__title {
    font-size: var(--font-size-3xl);
  }

  .services-block--layout-list .service-card__excerpt {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 1023px) {             /* abaixo de --bp-desktop */
  .services-block .section__head {
    margin-bottom: var(--space-8);
  }

  .services-block--layout-list .service-card__body,
  .services-block--layout-list.services-block--align-center .service-card__body {
    padding: var(--services-card-padding-lg);
  }

  .services-block--layout-list .service-card__media,
  .services-block--layout-list .service-card__placeholder {
    min-height: calc(var(--space-24) + var(--space-16));
  }
}

@media (max-width: 767px) {              /* abaixo de --bp-tablet */
  .services-block .section__title {
    font-size: var(--font-size-3xl);
  }

  .services-block .section__description {
    font-size: var(--font-size-base);
  }

  .service-card__body {
    padding: var(--services-card-padding);
  }

  .services-block--layout-list .service-card {
    padding: var(--space-2);
  }

  .services-block--layout-list .service-card__body,
  .services-block--layout-list.services-block--align-center .service-card__body {
    gap: var(--services-card-gap);
    padding: var(--services-card-padding);
  }

  .services-block--layout-list .service-card__media,
  .services-block--layout-list .service-card__placeholder,
  .services-block--layout-list.services-block--align-center .service-card__media,
  .services-block--layout-list.services-block--align-center .service-card__placeholder {
    min-height: calc(var(--space-24) + var(--space-8));
  }

  .service-card__meta {
    gap: var(--space-2);
  }

  .service-card__meta-item {
    white-space: normal;
  }

  .services-block .section__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-card__media img,
  .service-card__cta,
  .service-card__cta::after,
  .service-card__title a {
    transition: none;
  }

  .services-block--has-hover .service-card:hover,
  .services-block--has-hover .service-card:focus-within,
  .service-card__cta:hover,
  .service-card__cta:focus-visible {
    transform: none;
  }
}