/* ============================================
   ARTICLE PAGE STYLES
   ============================================ */

/* ========== ARTICLE HERO ========== */

.article__hero {
  padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--color-cloudburst);
  color: var(--text-on-navy);
}

.article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-on-navy-muted);
  margin-bottom: var(--space-lg);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.article__back:hover {
  color: var(--text-white);
  gap: var(--space-sm);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.article__date {
  font-size: var(--fs-small);
  color: var(--text-on-navy-muted);
}

.article__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-white);
  line-height: var(--lh-normal);
  max-width: 800px;
  text-transform: none;
}

/* ========== ARTICLE BODY ========== */

.article__body {
  max-width: 960px;
  margin: var(--space-2xl) auto var(--space-3xl);
  padding: var(--space-2xl) var(--space-2xl);
  position: relative;
}

/* Override neumorphic hover for article body - no float effect */
.article__body:hover {
  transform: none;
}

.article__intro {
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--text-on-light);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(31, 45, 80, 0.1);
}

.article__body h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-cloudburst);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  line-height: var(--lh-tight);
}

.article__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--text-on-light);
  margin-bottom: var(--space-md);
}

.article__body strong {
  font-weight: var(--fw-semibold);
  color: var(--color-cloudburst);
}

/* ========== ARTICLE CTA ========== */

.article__cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-cloudburst);
  border-radius: var(--radius-md);
  color: var(--text-on-navy);
}

.article__cta h2 {
  color: var(--text-white) !important;
  margin-top: 0 !important;
}

.article__cta p {
  color: var(--text-on-navy) !important;
}

.article__cta strong {
  color: var(--text-white) !important;
}

.article__cta-buttons {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* ========== WHATSAPP CTA BUTTON ========== */

.neu-btn--whatsapp {
  background: #25D366;
  color: var(--text-white);
  box-shadow: 4px 4px 12px rgba(37, 211, 102, 0.35), -4px -4px 12px #ffffff;
}

.neu-btn--whatsapp:hover {
  background: #22c55e;
  box-shadow: 6px 6px 18px rgba(37, 211, 102, 0.45), -6px -6px 18px #ffffff;
  transform: translateY(-2px);
}

.neu-btn--whatsapp:active {
  box-shadow: inset 4px 4px 8px rgba(18, 140, 60, 0.4), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  transform: translateY(0);
}

/* WhatsApp button on navy surface (inside CTA box) */
.article__cta .neu-btn--whatsapp {
  box-shadow: 4px 4px 12px rgba(18, 140, 60, 0.4), -4px -4px 12px rgba(37, 211, 102, 0.3);
}

.article__cta .neu-btn--whatsapp:hover {
  box-shadow: 6px 6px 18px rgba(18, 140, 60, 0.5), -6px -6px 18px rgba(37, 211, 102, 0.4);
}

/* ========== ARTICLE DISCLAIMER ========== */

.article__disclaimer {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--surface-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-light-inset);
  border-left: none;
}

.article__disclaimer p {
  font-size: var(--fs-small) !important;
  color: var(--text-on-light-muted) !important;
  margin-bottom: 0 !important;
}

/* ========== ARTICLE TAGS ========== */

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.article__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-on-light);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--neu-light-raised-sm);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 767px) {
  .article__hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-lg);
  }

  .article__title {
    font-size: var(--fs-h3);
  }

  .article__body {
    padding: var(--space-xl) var(--space-md);
  }

  .article__intro {
    font-size: var(--fs-body);
  }

  .article__cta-buttons {
    flex-direction: column;
  }

  .article__cta-buttons .neu-btn {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .article__body {
    max-width: 90%;
  }
}