/* =================================================================
   HUBSPOT CUSTOM MODULE - CSS PANEL
   Palette: #00754A | #80BAA5 | #EF8943 | #33916e | #17392F
   ================================================================= */

:root {
  --hs-green-dark: #17392F;
  --hs-green-primary: #00754A;
  --hs-green-mid: #33916e;
  --hs-green-light: #80BAA5;
  --hs-orange-accent: #EF8943;
  --hs-white: #FFFFFF;
  --hs-card-bg: rgba(23, 57, 47, 0.75);
  --hs-border-subtle: rgba(128, 186, 165, 0.22);
}

.hs-changes-section {
  position: relative;
  background-color: #00754A;
  padding: 90px 24px 100px;
  overflow: hidden;
  color: var(--hs-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.hs-changes-section * {
  box-sizing: border-box;
}

/* Container */
.changes-container {
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Cabeçalho */
.changes-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px auto;
}

.section-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--hs-green-light);
  margin-bottom: 12px;
  background: rgba(128, 186, 165, 0.12);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(128, 186, 165, 0.3);
}

.changes-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px 0;
  color: var(--hs-white);
}

.text-gradient {
  background: linear-gradient(120deg, #FFFFFF 20%, #80BAA5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.changes-intro {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.changes-intro strong {
  color: var(--hs-white);
  border-bottom: 2px solid var(--hs-orange-accent);
  padding-bottom: 1px;
}

/* Card / Tabela de Comparação */
.timeline-comparison-wrapper {
  margin-bottom: 36px;
}

.comparison-table-card {
  background: var(--hs-card-bg);
  border: 1px solid var(--hs-border-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 24px 30px;
  align-items: center;
  border-bottom: 1px solid rgba(128, 186, 165, 0.12);
  transition: all 0.25s ease;
}

.table-row:last-child {
  border-bottom: none;
}

.table-head {
  background: rgba(0, 117, 74, 0.25);
  font-size: 14px;
  font-weight: 700;
  color: var(--hs-green-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 18px 30px;
}

.interactive-row:hover {
  background: rgba(51, 145, 110, 0.15);
  transform: scale(1.002);
}

.col-category {
  padding-right: 20px;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.category-title strong {
  font-size: 16px;
  color: var(--hs-white);
}

.cat-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.4;
}

.col-period {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Badges de Status e Período */
.badge-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-current {
  background: rgba(128, 186, 165, 0.2);
  color: var(--hs-green-light);
}

.badge-next {
  background: rgba(239, 137, 67, 0.25);
  color: #FFB380;
  border: 1px solid rgba(239, 137, 67, 0.4);
}

/* Pills de Condição */
.pill-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.pill-free {
  background: rgba(51, 145, 110, 0.2);
  color: #72f0b7;
  border: 1px solid rgba(51, 145, 110, 0.4);
}

.pill-alert {
  background: rgba(239, 137, 67, 0.2);
  color: #FFB380;
  border: 1px solid rgba(239, 137, 67, 0.5);
  box-shadow: 0 0 15px rgba(239, 137, 67, 0.15);
}

.pill-neutral {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Callout de Impacto Prático */
.impact-callout-card {
  position: relative;
  background: linear-gradient(135deg, rgba(239, 137, 67, 0.14) 0%, rgba(23, 57, 47, 0.8) 100%);
  border: 1px solid rgba(239, 137, 67, 0.5);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.callout-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--hs-orange-accent);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.callout-icon-wrapper {
  width: 48px;
  height: 48px;
  background: rgba(239, 137, 67, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.callout-icon {
  font-size: 24px;
}

.callout-body {
  flex: 1;
}

.callout-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-orange-accent);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.callout-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--hs-white);
  margin: 0;
}

.callout-text strong {
  color: #FFB380;
}

/* Nota de Rodapé */
.changes-footnote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(128, 186, 165, 0.15);
  padding: 16px 20px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.changes-footnote svg {
  flex-shrink: 0;
  color: var(--hs-green-light);
  margin-top: 2px;
}

.changes-footnote p {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
}

.changes-footnote strong {
  color: var(--hs-green-light);
}

/* Responsividade (Mobile & Tablet) */
@media (max-width: 860px) {
  .hs-changes-section {
    padding: 60px 16px 70px;
  }

  .changes-title {
    font-size: 28px;
  }

  .table-head {
    display: none; /* Em telas menores, transforma em cards verticais */
  }

  .table-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .col-period {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
  }

  .col-period::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-green-light);
  }

  .pill-badge {
    font-size: 12.5px;
    padding: 6px 10px;
  }

  .impact-callout-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
}
/* =================================================================
   HUBSPOT CUSTOM MODULE - JS PANEL
   Interação de Destaque nas Linhas e Animação de Entrada
   ================================================================= */

document.addEventListener("DOMContentLoaded", function () {
  const tableRows = document.querySelectorAll(".interactive-row");
  const calloutCard = document.querySelector(".impact-callout-card");

  // Efeito ao passar o mouse nas linhas de alerta
  tableRows.forEach((row) => {
    row.addEventListener("mouseenter", function () {
      if (this.classList.contains("row-critical") && calloutCard) {
        calloutCard.style.borderColor = "#EF8943";
        calloutCard.style.boxShadow = "0 18px 40px rgba(239, 137, 67, 0.25)";
        calloutCard.style.transition = "all 0.3s ease";
      }
    });

    row.addEventListener("mouseleave", function () {
      if (calloutCard) {
        calloutCard.style.borderColor = "rgba(239, 137, 67, 0.5)";
        calloutCard.style.boxShadow = "0 15px 30px rgba(0, 0, 0, 0.25)";
      }
    });
  });
});