/* 
  CUBE CSS Architecture
  - Composition
  - Utility
  - Block
  - Exception
*/

/* ==========================================================================
   SETTINGS & TOKENS
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #D8A7CA;
  --color-secondary: #B19CD9;
  --color-accent: #F4C2C2;
  --color-bg-light: #FDF2F8;
  --color-bg-white: #FFFFFF;
  --color-text-primary: #2D3748;
  --color-text-secondary: #4A5568;
  --color-text-muted: #718096;
  --color-border: #2D3748;
  --color-success: #68D391;

  /* Typography */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Crimson Text', Georgia, serif;
  
  --size-step-0: clamp(1rem, 3vw + 1rem, 1.25rem);
  --size-step-1: clamp(1.25rem, 4vw + 1rem, 1.5rem);
  --size-step-2: clamp(1.5rem, 5vw + 1rem, 2rem);
  --size-step-3: clamp(2rem, 6vw + 1rem, 3.5rem);

  /* Spacing */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */

  /* Borders & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 50%;
  
  --shadow-light: 0 2px 12px rgba(216, 167, 202, 0.15);
  --shadow-medium: 0 4px 20px rgba(216, 167, 202, 0.20);
}

/* ==========================================================================
   RESET
   ========================================================================== */
/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
*, *::before, *::after { box-sizing: border-box; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0; }
body { min-height: 100vh; min-height: 100dvh; line-height: 1.6; overflow-x: hidden; font-family: var(--font-base); color: var(--color-text-primary); background: linear-gradient(135deg, var(--color-bg-light) 0%, #FEFCFF 100%); }
h1, h2, h3, h4, button, input, label { line-height: 1.1; }
h1, h2, h3, h4 { text-wrap: balance; font-family: var(--font-display); }
a:not([class]) { color: currentColor; text-decoration-skip-ink: auto; }
img, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
textarea:not([rows]) { min-height: 10em; }
:target { scroll-margin-block: 5ex; }

/* ==========================================================================
   COMPOSITION (Layouts)
   ========================================================================== */
/* Wrapper: Centraliza e limita a largura */
.wrapper {
  width: min(100% - 2rem, 87.5rem);
  margin-inline: auto;
}

/* Flow: Adiciona espaço vertical entre elementos irmãos */
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* Sidebar: Layout de duas colunas responsivo */
.sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.sidebar-layout > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%; /* Ponto de quebra */
}

.sidebar-layout > :last-child {
  flex-basis: 35rem;
  flex-grow: 1;
}

/* Cluster: Agrupa itens horizontalmente */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* Grid: Layout de grid simples */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid[data-cols="3"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

/* ==========================================================================
   UTILITIES (Single Purpose)
   ========================================================================== */
.text-center { text-align: center; }
.text-primary { color: #A855A7; }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.font-display { font-family: var(--font-display); }
.font-bold { font-weight: 600; }
.bg-white { background-color: var(--color-bg-white); }
.shadow-md { box-shadow: var(--shadow-medium); }
.radius-lg { border-radius: var(--radius-lg); }
.border { border: 1px solid var(--color-border); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Espaçamentos utilitários */
.py-xl { padding-block: var(--space-xl); }
.py-md { padding-block: var(--space-md); }
.py-sm { padding-block: var(--space-sm); }
.py-xs { padding-block: var(--space-xs); }
.py-0 { padding-block: 0; }

.px-xl { padding-inline: var(--space-xl); }
.px-md { padding-inline: var(--space-md); }
.px-sm { padding-inline: var(--space-sm); }
.px-xs { padding-inline: var(--space-xs); }
.px-0 { padding-inline: 0; }

.p-xl { padding: var(--space-xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ==========================================================================
   BLOCKS (Components)
   ========================================================================== */

/* Header Block */
.hero-header {
  --flow-space: var(--space-lg);
}

.hero-title {
  font-size: var(--size-step-3);
  font-weight: 600;
  color: var(--color-text-primary);
}

.highlight {
  color: #A855A7;
  position: relative;
  display: inline-block;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 2px;
  opacity: 0.3;
}

/* Benefit List Block */
.benefit-list {
  padding: 0;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  color: var(--color-text-secondary);
}

.benefit-icon {
  font-size: 1.25rem;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-light);
}

/* Card Block */
.card {
  background: var(--color-bg-white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--color-border);
}

/* Author Card Specifics */
.author-card {
  text-align: center;
}

.author-image {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-medium);
  border: 2px solid #A855A7;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

/* Stat Block */
.stat-item {
  background: var(--color-bg-white);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: #A855A7;
  margin-bottom: var(--space-xs);
}

/* Newsletter Block */
.newsletter-signup {
  --flow-space: var(--space-md);
}

/* Footer Block */
.site-footer {
  text-align: center;
  font-size: 0.875rem;
  padding-block: var(--space-xl);
}

.site-footer a {
  color: #A855A7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up > * {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ==========================================================================
   EXCEPTIONS & MEDIA QUERIES
   ========================================================================== */
@media (max-width: 768px) {
  .sidebar-layout {
    flex-direction: column;
    gap: var(--space-xl);
  }
  
  .sidebar-layout > :last-child {
    flex-basis: auto;
    order: -1; /* Imagem acima no mobile */
  }
  
  .card {
    padding: var(--space-lg);
  }
}