/**
 * About Page Component - Design System Implementation
 * 
 * Styles for the about page (sobre.html); the slide-in panel was replaced by a link to it
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     ABOUT PAGE CONTENT (sobre.html)
     ═══════════════════════════════════════════════════════════ */
  
  .about-content {
    padding: var(--space-3);
  }
  
  .about-section {
    margin-bottom: var(--space-8); /* Increased space between topic blocks */
  }
  
  .about-section:last-child {
    margin-bottom: 0;
  }
  
  .about-title {
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    font-size: var(--text-xl-size);
    line-height: var(--text-xl-leading);
    color: var(--color-text);
    margin: 0 0 var(--space-4) 0;
  }
  
  .about-heading {
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    font-size: var(--text-base-size); /* 14px - token equivalent */
    line-height: var(--text-lg-leading);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0; /* Decreased gap between h2 and paragraph */
  }
  
  .about-text {
    font-family: var(--font-sans);
    font-weight: var(--font-normal);
    font-size: var(--text-base-size); /* 14px - token equivalent */
    line-height: var(--text-prose-leading);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0; /* Reduced space between paragraphs */
  }
  
  .about-text:last-child {
    margin-bottom: 0;
  }
  
  .about-list {
    font-family: var(--font-sans);
    font-weight: var(--font-normal);
    font-size: var(--text-base-size); /* 14px - same as paragraph */
    line-height: var(--text-prose-leading);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0; /* Match paragraph spacing */
    padding-left: var(--space-5);
  }
  
  .about-list:last-child {
    margin-bottom: 0;
  }
  
  .about-back-button {
    margin-bottom: var(--space-4);
    display: inline-flex;
  }
}