/* ==========================================================================
   BLOCO: Sobre — missão, cards e galeria de fotos
   HTML: <section class="about" id="sobre">  ·  JS: js/sections/sobre.js
   Figma 844:2141 — grid 16: conteúdo nas colunas 1–8, galeria nas 9–16 (696 cada).
   ========================================================================== */

.about {
  padding-top: 59px;
}
.about__grid {
  row-gap: var(--s-44);
  align-items: center;
}
.about__content {
  grid-column: 1 / 9;
}
.gallery {
  grid-column: 9 / -1;
}
.about__title {
  margin-bottom: var(--title-gap);
}

/* --- Missão --------------------------------------------------------------- */
.mission {
  margin: 0;
  padding: 38px 32px 40px;
}
/* Medidas do estilo h3 (40/44), em Figtree como no Figma */
.mission__text {
  margin: var(--s-24) 0 0;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-text-strong);
}
/* Trechos em dourado: "avaliação individualizada" e "cuidado explicado"
   (gradiente vem da classe .gold-text no HTML — base.css) */
.mission__sign {
  margin-top: var(--s-24);
  text-align: right;
}

/* --- Cards com seta ------------------------------------------------------- */
.about__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16);
  margin-top: var(--s-16);
}
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: var(--s-24);
  text-align: left;
  transition: transform var(--dur) var(--ease-out);
}
.feature__icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 24px;
  height: 24px;
  color: var(--c-text-strong);
  transition:
    transform var(--dur) var(--ease-out),
    color var(--dur) var(--ease);
}
.feature__title {
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  color: var(--c-text-strong);
}
.feature:hover {
  transform: translate3d(0, -2px, 0);
}
.feature:hover .feature__icon {
  transform: translate3d(3px, -3px, 0);
  stroke: url(#g-gold);
}
.feature:active {
  transform: scale(0.99);
}

/* Divisor ao fim do bloco (galeria 2868 → divisor 2972) */
.section-divider--about {
  padding-top: calc(var(--s-120) - 16px);
}

/* --- Galeria (Figma 844-2145: 695 × 952, miniaturas 150 × 80 a 55px da base)
   Troca automática guiada por um timer invisível em CSS (bd-gallery-timer no
   ::after da galeria): quando termina, o sobre.js avança a foto.
   .is-playing → timer rodando · .is-paused → timer congelado (hover/foco/fora da tela)
   ------------------------------------------------------------------------ */
.gallery {
  --gallery-interval: 5s;
  position: relative;
  aspect-ratio: 695 / 952;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-card);
}
.gallery::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gallery.is-playing::after {
  animation: bd-gallery-timer var(--gallery-interval) linear forwards;
}
.gallery.is-playing.is-paused::after {
  animation-play-state: paused;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1000ms var(--ease-out);
}
/* Ken Burns lento na foto ativa */
.gallery__slide.is-active {
  opacity: 1;
  animation: bd-kenburns 9s var(--ease-out) both;
}

/* --- Controle: miniaturas (igual ao Figma) --------------------------------
   Inativas: borda clara de 1px por dentro.
   Ativa: anel de 3px por fora em gradiente dourado brilhante (a miniatura
   continua 150 × 80). O anel é um ::before vazado por máscara, já que
   box-shadow não aceita gradiente.
   ------------------------------------------------------------------------ */
.gallery__thumbs {
  position: absolute;
  left: 50%;
  bottom: 55px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.gallery__thumb {
  --ring: 3px;
  position: relative;
  width: 150px;
  height: 80px;
  border-radius: var(--r-xs);
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke) solid var(--c-text-strong);
  border-radius: inherit;
  transition: opacity var(--dur-fast) var(--ease);
}
.gallery__thumb::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ring));
  padding: var(--ring);
  border-radius: calc(var(--r-xs) + var(--ring));
  background: var(--g-gold-bright);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.gallery__thumb[aria-current="true"]::before {
  opacity: 1;
}
.gallery__thumb[aria-current="true"]::after {
  opacity: 0;
}

/* Com "reduzir movimento": a troca automática continua (sobrepõe a regra
   global de base.css) e as fotos seguem trocando com fade; só o Ken Burns para. */
@media (prefers-reduced-motion: reduce) {
  .gallery.is-playing::after {
    animation-duration: var(--gallery-interval) !important;
  }
  .gallery__slide {
    transition-duration: 1000ms !important;
  }
}

@keyframes bd-kenburns {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

/* Só marca o tempo da troca (elemento invisível de 0 × 0) */
@keyframes bd-gallery-timer {
  from {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1200px) {
  .about__content {
    grid-column: 1 / 5;
  }
  .gallery {
    grid-column: 5 / -1;
  }
}

@media (max-width: 960px) {
  .about__content,
  .gallery {
    grid-column: 1 / -1;
  }
  .gallery {
    aspect-ratio: auto;
    height: min(125vw, 82svh);
  }
}

@media (max-width: 768px) {
  .mission {
    padding: var(--s-24) var(--s-20) var(--s-24);
  }
  .feature {
    min-height: 160px;
    padding: var(--s-20);
  }
  .feature__icon {
    top: 18px;
    right: 18px;
  }
  .gallery__thumbs {
    bottom: var(--s-20);
    width: calc(100% - 40px);
  }
  .gallery__thumb {
    flex: 1;
    width: auto;
    height: 64px;
  }
}