/* ============================================
   ORGANISMS - SECTION FAQ GROUP
   Purposeful Media Design System
   Version: 4.0
   Last Modified: 2025-10-30
   Dependencies: variables-v4.0-20251027.css

   Description:
   This organism provides a section wrapper for multiple Card/FAQ molecules.
   Following Atomic Design principles: Organisms compose Molecules.
   The Card/FAQ molecule handles all FAQ card styling independently.

   Structure:
   1. Outer Section - Full width, optional background
   2. Container - Centers content, provides padding
   3. Items Wrapper - Gray background container that hugs the cards

   Breakpoints:
   - Mobile: 380-767px
   - Tablet: 768-1149px
   - Desktop: 1150-1919px
   - DesktopPlus: 1920px+
   ============================================ */

/* Import dependencies */
@import url('variables-v4.0-20251027.css');

/* ============================================
   SECTION WRAPPER STYLES
   ============================================ */

/* Outer section container */
.section-faq-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  /* Outer section can have optional background image or color */
  background-color: transparent;
}

/* Container centers the FAQ items and provides padding */
.section-faq-group__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: var(--space-16, 64px) var(--space-5, 20px);
  box-sizing: border-box;
  position: relative;
}

/* Items wrapper - gray background that hugs the cards */
.section-faq-group__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-neutral-100, #eceeef);
  border-radius: 20px;
  padding: var(--space-6, 24px);
  box-sizing: border-box;
  position: relative;
}

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

/* Mobile: 380px to 767px */
@media (max-width: 767px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-4, 16px);
  }

  .section-faq-group__items {
    border-radius: 16px;
    padding: var(--space-4, 16px);
  }
}

/* Tablet: 768px to 1149px */
@media (min-width: 768px) and (max-width: 1149px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-8, 32px);
    max-width: 900px;
  }

  .section-faq-group__items {
    border-radius: 18px;
    padding: var(--space-5, 20px);
  }
}

/* Desktop: 1150px to 1919px */
@media (min-width: 1150px) and (max-width: 1919px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px) var(--space-10, 40px);
    max-width: 1100px;
  }

  .section-faq-group__items {
    border-radius: 20px;
    padding: var(--space-6, 24px);
  }
}

/* DesktopPlus: 1920px and wider */
@media (min-width: 1920px) {
  .section-faq-group__container {
    padding: var(--space-16, 64px);
    max-width: 1200px;
  }

  .section-faq-group__items {
    border-radius: 20px;
    padding: var(--space-6, 24px);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .section-faq-group {
    background-color: white;
  }

  .section-faq-group__container {
    padding: 0;
  }

  .section-faq-group__items {
    border-radius: 0;
    padding: var(--space-4, 16px);
  }
}