/* /public/css/layout/container.css */

/* ==================================================================
   1. Main Content Container
   ================================================================== */
   .container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    /* UPDATED: Added vertical padding to prevent content touching header */
    padding: var(--space-8) var(--space-6); 
  }
  
  @media (max-width: 767px) {
    .container {
      /* On mobile, slightly tighter horizontal padding, keep vertical breathing room */
      padding: var(--space-6) var(--space-4);
    }
  }
  
  /* ==================================================================
     2. Section Sub-Headers (for use within page content)
     ================================================================== */
  .section-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto var(--space-12);
  }
  
  .section-header__title {
    font-size: clamp(1.875rem, 5vw, 2.5rem); /* Adjusted for better scale */
    font-weight: 700;
    color: var(--color-slate-900);
    line-height: 1.2;
    margin: 0 0 var(--space-4) 0;
  }
  
  .section-header__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-slate-600);
    line-height: var(--line-height-loose);
    margin: 0;
    max-width: 65ch; /* Improves readability */
    margin-left: auto;
    margin-right: auto;
  }
  
  @media (max-width: 767px) {
    .section-header {
      margin-bottom: var(--space-8);
    }
    .section-header__title {
      font-size: 1.75rem;
    }
    .section-header__subtitle {
      font-size: var(--font-size-base);
    }
  }