/* ==========================================================================
   BLOCO: Procedimentos — 2 blocos de cards + cadeira decorativa
   HTML: <section class="procedures" id="procedimentos">
   JS:   js/sections/procedimentos.js
   Figma 844-2095 (grid 16 colunas):
   - .procedures__main  → colunas 1–13 (1151px): título + 2 blocos de 570px
   - .procedures__chair → colunas 14–16 (241 × 564), imagem sangra à direita
   Cada bloco: card ativo 570 × 320 em cima + 2 clicáveis 280 × 128, gap 10.
   ========================================================================== */

.procedures {
  position: relative;
  padding-top: var(--s-120);
  overflow-x: clip; /* a cadeira sangra para fora da tela sem gerar rolagem */
}

.procedures__main {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 13;
}
.procedures__title {
  margin-bottom: var(--title-gap);
}

/* --- Cadeira (692 × 802, PNG transparente) --------------------------------
   Topo alinhado ao topo da seção; passa 20px da borda direita da tela.
   ------------------------------------------------------------------------ */
.procedures__chair {
  position: relative;
  z-index: 0;
  grid-column: 14 / -1;
  pointer-events: none;
}
.procedures__chair img {
  position: absolute;
  top: calc(-1 * var(--s-120));
  right: calc(-1 * var(--grid-margin) - 20px);
  width: clamp(520px, 41.6vw, 692px);
  max-width: none;
}

/* --- Blocos --------------------------------------------------------------- */
.proc-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 3 posições por bloco: 1 = ativo (linha de cima), 2 e 3 = clicáveis */
.proc-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(320px, auto) minmax(128px, auto);
  gap: 10px;
}
.proc[data-pos="1"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
.proc[data-pos="2"] {
  grid-column: 1;
  grid-row: 2;
}
.proc[data-pos="3"] {
  grid-column: 2;
  grid-row: 2;
}

/* --- Card ----------------------------------------------------------------- */
.proc {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s-16);
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-card);
  container-type: inline-size;
  transition: transform var(--dur) var(--ease-out);
}

.proc__title {
  font-family: var(--f-sans);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  font-weight: var(--w-regular);
  color: var(--c-text-subtle);
  text-align: center;
  transition: color var(--dur-fast) var(--ease);
}
/* Card clicável: estilo h4, mas reduz se o card ficar estreito
   ("Odontopediatria" = 7,4 × o tamanho da fonte) */
.proc:not(.is-active) .proc__title {
  font-size: min(var(--t-h4-size), 13cqi);
}
.proc__toggle {
  text-align: inherit;
}
.proc__toggle:focus-visible {
  outline: none;
}
.proc:has(.proc__toggle:focus-visible) {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* Card clicável: o botão cobre o card inteiro */
.proc:not(.is-active) .proc__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.proc:not(.is-active):hover {
  transform: translate3d(0, -2px, 0);
}
.proc:not(.is-active):hover .proc__title {
  color: var(--c-text-strong);
}
.proc:not(.is-active):active {
  transform: translate3d(0, 0, 0) scale(0.99);
}

.proc__body,
.proc__media {
  display: none;
}

/* --- Card ativo ----------------------------------------------------------- */
.proc.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 36px 32px 32px;
}
.proc.is-active .proc__title {
  position: relative;
  z-index: 1;
  color: var(--c-text-strong);
  text-align: left;
}
.proc.is-active .proc__toggle {
  cursor: default;
}
.proc.is-active .proc__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
  max-width: 52%;
}

/* Descrição do tratamento e CTA (indextTXT.html; o index.html usa a lista) */
.proc__desc {
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--c-text);
}
.proc__cta {
  flex: none;
}

.proc__list {
  display: grid;
  gap: 4px;
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--c-text);
}
.proc__list li {
  display: flex;
  gap: var(--s-8);
}
.proc__list li::before {
  content: "•";
  flex: none;
}

.proc.is-active .proc__media {
  --media-shift: -50%;
  --media-scale: 1;
  position: absolute;
  top: 50%;
  right: 12px;
  display: block;
  width: min(56%, 330px);
  pointer-events: none;
  transform: translate3d(0, var(--media-shift), 0) scale(var(--media-scale));
  transition: transform 1100ms var(--ease-out);
}
/* PNGs com fundo opaco (1 tom diferente do card): esfuma as bordas do quadrado */
.proc__media--matte {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
/* PNGs transparentes cujo objeto ocupa quase todo o quadro (aparelho, urgência):
   menores, para ter o mesmo peso visual dos dentes e não encostar na lista */
.proc.is-active .proc__media--fill {
  right: var(--s-24);
  width: min(46%, 270px);
}
/* Zoom sutil da imagem ao passar o mouse no ativo */
.proc.is-active:hover .proc__media {
  --media-scale: 1.04;
}

/* --- Troca de posição -----------------------------------------------------
   Com View Transitions API o navegador anima a troca de posição/tamanho.
   Sem ela (html.no-vt), o conteúdo novo entra com fade.
   ------------------------------------------------------------------------ */
::view-transition-group(*) {
  animation-duration: 560ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.no-vt .proc.is-active .proc__body {
  animation: bd-rise-in 600ms var(--ease-out) both;
}
.no-vt .proc.is-active .proc__media {
  animation: bd-fade-in 700ms var(--ease-out) both;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1200px) {
  .procedures__main {
    grid-column: 1 / -1;
  }
  .procedures__chair {
    display: none;
  }
}

@media (max-width: 960px) {
  .proc-blocks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .proc-block {
    grid-template-rows: minmax(280px, auto) minmax(96px, auto);
  }
  .proc.is-active {
    padding: var(--s-24);
  }
}

@media (max-width: 560px) {
  .proc.is-active .proc__media {
    --media-shift: 0px;
    top: var(--s-16);
    right: var(--s-8);
    width: 42%;
  }
  .proc.is-active .proc__media--fill {
    top: var(--s-24);
    right: var(--s-16);
    width: 34%;
  }
  .proc.is-active .proc__title {
    max-width: 55%;
  }
  .proc.is-active .proc__body {
    max-width: none;
  }
}