/*
 * Antes e Depois - Hygienize Child
 * Secao fixa do tema (HYG-007A): comparacao visual antes/depois.
 */

.hyg-before-after {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--hyg-space-5);
}

@media (min-width: 768px) {
  .hyg-before-after {
    grid-template-columns: 1fr auto 1fr;
  }
}

.hyg-before-after__item {
  background-color: var(--hyg-color-surface);
  border-radius: var(--hyg-radius-lg);
  overflow: hidden;
}

/* Proporcao fixa + object-fit: cover — as duas fotos (fontes/dimensoes
   diferentes) ficam com a mesma altura visual lado a lado. */
.hyg-before-after__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.hyg-before-after__badge {
  position: absolute;
  top: var(--hyg-space-4);
  left: var(--hyg-space-4);
  padding: var(--hyg-space-1) var(--hyg-space-3);
  border-radius: var(--hyg-radius-full);
  font-family: var(--hyg-font-family-base);
  font-size: var(--hyg-font-size-small);
  font-weight: var(--hyg-font-weight-semibold);
  color: var(--hyg-color-on-primary);
  box-shadow: var(--hyg-shadow-sm);
}

.hyg-before-after__badge--before {
  background-color: var(--hyg-color-text-muted);
}

.hyg-before-after__badge--after {
  background-color: var(--hyg-color-primary);
}

.hyg-before-after__divider {
  display: none;
}

@media (min-width: 768px) {
  .hyg-before-after__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--hyg-radius-full);
    background-color: var(--hyg-color-primary);
    color: var(--hyg-color-on-primary);
    font-size: 1.25rem;
    font-weight: var(--hyg-font-weight-bold);
  }
}