/* ══════════════════════════════════════════
   PILLARS — Relaxamento / Beleza / Clean Beauty
   Tríptico com vídeo curto por pilar. No desktop, a coluna sob o cursor
   se alarga; no celular, os três empilham e só o visível toca.
══════════════════════════════════════════ */

#pillars {
  display: flex;
  height: clamp(560px, 92vh, 880px);
  padding: 0;
  background: var(--verde-escuro);
}

.pillar-block {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: none;
  outline: none;
  transition: flex-grow 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
#pillars:hover .pillar-block,
#pillars:focus-within .pillar-block { flex-grow: 0.82; }
#pillars .pillar-block:hover,
#pillars .pillar-block:focus-visible,
#pillars .pillar-block.is-active { flex-grow: 1.5; }

/* ── Mídia: poster + vídeo ── */
.pillar-media { position: absolute; inset: 0; background: #0b2624; }
.pillar-media img,
.pillar-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-media video { opacity: 0; pointer-events: none; }
.pillar-block.is-playing .pillar-media video { opacity: 1; }
.pillar-block:hover .pillar-media img,
.pillar-block:hover .pillar-media video { transform: scale(1.04); }

/* ── Véu verde (leitura do texto) ── */
.pillar-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0, 52, 47, 0.90) 0%,
    rgba(0, 52, 47, 0.50) 38%,
    rgba(0, 52, 47, 0.14) 70%,
    rgba(0, 52, 47, 0.05) 100%);
  transition: background 0.6s ease;
}
.pillar-block:hover .pillar-overlay {
  background: linear-gradient(to top,
    rgba(0, 52, 47, 0.84) 0%,
    rgba(0, 52, 47, 0.40) 45%,
    rgba(0, 52, 47, 0.06) 100%);
}

/* linha fina entre colunas */
.pillar-block:not(:last-child)::after {
  content: '';
  position: absolute; top: 8%; bottom: 8%; right: 0;
  width: 1px;
  background: rgba(248, 244, 239, 0.14);
  z-index: 2;
}

/* ── Texto (alinhado à base) ── */
.pillar-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 44px 40px;
  z-index: 3;
}
.pillar-eyebrow {
  display: block;
  font-family: 'Prompt', sans-serif;
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--verde-menta);
  margin-bottom: 14px;
}
.pillar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin-bottom: 8px;
  text-transform: none;
}
.pillar-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem; font-weight: 300; font-style: italic;
  color: var(--verde-menta);
  margin-bottom: 0;
}
/* descrição e botão só aparecem quando a coluna está em foco */
.pillar-text {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.84rem; font-weight: 300;
  line-height: 1.75;
  color: rgba(248, 244, 239, 0.78);
  max-width: 320px;
  margin: 0;
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s 0.1s ease, margin 0.7s ease;
}
.pillar-block:hover .pillar-text,
.pillar-block:focus-visible .pillar-text,
.pillar-block.is-active .pillar-text { max-height: 200px; opacity: 1; margin: 16px 0 22px; }
.pillar-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s 0.15s ease, transform 0.5s 0.15s ease;
}
.pillar-btn svg { transition: transform 0.3s ease; }
.pillar-block:hover .pillar-btn,
.pillar-block:focus-visible .pillar-btn,
.pillar-block.is-active .pillar-btn { opacity: 1; transform: none; }
.pillar-block:hover .pillar-btn svg { transform: translateX(4px); }

@media (max-width: 900px) {
  #pillars { flex-direction: column; height: auto; }
  .pillar-block { flex: none; aspect-ratio: 4 / 5; max-height: 72vh; transition: none; }
  #pillars:hover .pillar-block,
  #pillars .pillar-block:hover,
  #pillars .pillar-block.is-active { flex-grow: 0; }
  .pillar-block:not(:last-child)::after { display: none; }
  .pillar-content { padding: 30px 24px; }
  .pillar-text { max-height: none; opacity: 1; margin: 12px 0 18px; }
  .pillar-btn { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .pillar-title { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-block, .pillar-media img, .pillar-media video, .pillar-text, .pillar-btn, .pillar-overlay { transition: none; }
  .pillar-media video { display: none; }
}