/* components.css — componentes reutilizáveis. BEM simplificado: .bloco, .bloco__elemento, .bloco--modificador. */

/* Botão — Figma "ButtonBuy" (304:405). Únicos botões da interface. */

.btn {
  --btn-pad-y: var(--dm-space-12);
  --btn-pad-x: var(--dm-space-24);
  --btn-radius: var(--dm-radius-xl);
  --btn-bg: transparent;
  --btn-border: var(--dm-white);
  --btn-fg: var(--dm-white);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dm-space-8);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 2px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  text-align: center;
  font-size: var(--dm-text-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;

  transition:
    background-color 0.3s var(--dm-ease),
    border-color 0.3s var(--dm-ease),
    color 0.3s var(--dm-ease);
}

.btn:hover,
.btn:focus-visible {
  --btn-bg: var(--dm-primary);
  --btn-border: var(--dm-primary);
}

.btn--primary {
  --btn-bg: var(--dm-white);
  --btn-border: var(--dm-white);
  --btn-fg: var(--dm-grey-10);
}

/* Mesma especificidade do .btn:hover acima — precisa vir depois para ganhar. */
.btn--primary:hover,
.btn--primary:focus-visible {
  --btn-bg: var(--dm-primary-100);
  --btn-border: var(--dm-primary-100);
}

/* --dm-focus some sobre fundo escuro — anel de foco destes botões é branco de propósito. */
.btn:focus-visible {
  outline-color: var(--dm-white);
  outline-offset: 4px;
}

/* Curtain — fundo reusável em cortina, Figma "bg" da hero (4221:1841) */

.curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.curtain__slats,
.curtain__vignette,
.curtain__backdrop {
  position: absolute;
  inset: 0;
}

/* ⚠ 30% é o teto do movimento vertical do glow, sincronizado com RANGE_Y em frontend.js. */
.curtain__glow {
  position: absolute;
  inset: 0 0 -30% 0;
  z-index: 1;
  background-image: var(--dm-gradient-glow);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 76.923%;
  transform: translate3d(var(--curtain-glow-x, 0%), var(--curtain-glow-y, 0%), 0);
  transition: transform 700ms var(--dm-ease);
}

.curtain__glow.is-live {
  will-change: transform;
}

.curtain__glow.is-wandering {
  transition: transform 2600ms var(--dm-ease);
}

.curtain__slats {
  z-index: 2;
  display: flex;
}

.curtain__slat {
  flex: 1 1 0;
  min-width: 0;
  background-image: var(--dm-gradient-slat);
}

.curtain__vignette {
  z-index: 3;
  background-image: var(--dm-gradient-vignette);
}

.curtain__backdrop {
  z-index: 4;
  background-image: var(--dm-gradient-backdrop);
}

@media (max-width: 768px) {
  .curtain__slat:nth-child(even) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtain__glow {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* Nav link — Figma "Nav Link" (304:348) */

/* Tipografia varia por contexto (header usa Mono/sm) — por isso não é embutida aqui, ao contrário de .btn/.link. */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--dm-space-4);
  border-bottom: 2px solid transparent;
  color: var(--dm-white);
  transition: border-color 0.3s var(--dm-ease);
  text-transform: uppercase;
}

.nav-link:hover,
.nav-link:focus-visible {
  border-bottom-color: var(--dm-grey-80);
}

.nav-link[aria-current="page"] {
  border-bottom-color: var(--dm-grey-80);
}

/* Link — Figma "Link" (304:482) */

.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--dm-space-12);
  border-bottom: 2px solid var(--dm-grey-50);
  color: var(--dm-white);
  font-size: var(--dm-text-md);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  transition: border-color 0.3s var(--dm-ease);
}

.link:hover,
.link:focus-visible {
  border-bottom-color: var(--dm-white);
}

/* Botão flutuante do WhatsApp — Figma 4184:2186 */

.whatsapp-float {
  position: fixed;
  right: 0;
  bottom: var(--dm-space-64);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding-left: var(--dm-space-4);
  border-top-left-radius: var(--dm-space-6);
  border-bottom-left-radius: var(--dm-space-6);
  background-color: rgb(255 255 255 / 4%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--dm-primary);
  transition:
    background-color 0.3s var(--dm-ease),
    color 0.3s var(--dm-ease);
}

.whatsapp-float:focus-visible {
  outline-color: var(--dm-white);
  outline-offset: 4px;
}

/* hover:hover evita que o primeiro toque no mobile fique preso no estado hover. */
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    background-color: rgb(255 255 255 / 8%);
    color: var(--dm-primary-100);
  }
}

/* Card de post — Figma "Card blog" 505:1239 · "Article Info" 321:1051 */

/* Compartilhado entre blog-list.php e single.php — por isso mora na base, não em archive.css. */

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-32);
}

.post-card__media {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: var(--dm-grey-20);
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dm-space-16);
}

.post-card__title {
  overflow-wrap: break-word;
  color: var(--dm-white);
}

.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__link:focus-visible {
  outline: none;
}

.post-card__link:focus-visible::after {
  outline: 2px solid var(--dm-white);
  outline-offset: 4px;
}

.post-card__date {
  color: var(--dm-primary);
}

.post-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dm-space-4) var(--dm-space-8);
  border: 2px solid var(--dm-primary);
  color: var(--dm-primary);
  text-transform: uppercase;
}

/* ⚠ scale, nunca transform: [data-animate] já ocupa transform nestes elementos para a entrada. */
@media (hover: hover) and (pointer: fine) {
  .post-card__img {
    transition: scale 0.6s var(--dm-ease);
  }

  .post-card:hover .post-card__link {
    text-decoration: underline;
  }

  .post-card:hover .post-card__img {
    scale: 1.04;
  }
}

/* Acordeão */

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dm-space-16);
  width: 100%;
  padding-block: var(--dm-space-24);
  text-align: left;
}

.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--dm-ease);
}

.accordion.is-open .accordion__body {
  grid-template-rows: 1fr;
}

.accordion__body-inner {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .accordion__body,
  .whatsapp-float,
  .post-card__img {
    transition: none;
  }

  .post-card:hover .post-card__img {
    scale: 1;
  }
}