/**
 * 3-layout.css - Layout System
 * Grid, containers, spacing, sections
 */

/* Main Content */
.main {
  padding: clamp(var(--space-6), 5vw, var(--space-10)) 0 clamp(var(--space-10), 8vw, var(--space-16)) 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Page Containers */
.workshops-page,
.exercises-page,
.icebreakers-page,
.collections-page,
.myworkshopr-page,
.collection-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) 0;
  box-sizing: border-box;
  width: 100%;
}

/* Content Sections */
.section {
  margin-bottom: clamp(var(--space-8), 6vw, 3.5rem);
  padding: clamp(var(--space-4), 3vw, var(--space-6)) 0;
  scroll-margin-top: var(--space-20);
  position: relative;
}

.section:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(3.75rem, 15vw, 7.5rem);
  height: var(--radius-sm);
  background: linear-gradient(90deg,
    rgba(255, 152, 0, 0.6) 0%,
    rgba(255, 152, 0, 0.3) 50%,
    transparent 100%
  );
  border-radius: var(--radius-sm);
}

.section-header {
  margin-bottom: clamp(var(--space-5), 4vw, var(--space-8));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(var(--space-3), 2vw, var(--space-4));
  position: relative;
}

.section-header h2,
.section-title {
  font-size: var(--font-size-3xl);  /* 39.8px - Matches h2, smaller than h1 */
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Cards Grid */
.cards-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(325px, 100%), 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  justify-content: start;
  padding: clamp(var(--space-5), 4vw, 2.25rem) 0;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Homepage 3-column grid - Fixed card size 325px × 225px with 48px spacing */
.cards-grid--fixed {
  display: grid;
  grid-template-columns: repeat(3, 325px);
  gap: var(--space-12);
  column-gap: var(--space-12);
  row-gap: var(--space-12);
  padding: var(--space-5) 0;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: start;
}

/* Responsive Grid - Maintains 325px card width */
@media (max-width: 1100px) {
  .cards-grid--fixed {
    grid-template-columns: repeat(2, 325px);
  }
}

@media (max-width: 768px) {
  .cards-grid--fixed {
    grid-template-columns: repeat(auto-fit, minmax(min(325px, 100%), 1fr));
    gap: var(--space-6);
  }
}

@media (max-width: 480px) {
  .cards-grid--fixed {
    grid-template-columns: repeat(auto-fit, minmax(min(325px, 100%), 1fr));
    gap: var(--space-6);
  }

  .container {
    padding: 0;
  }

  .main {
    padding: var(--space-5) 0;
  }
}

/* Collection Layout */
.collection-description,
.collection-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.exercises-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) !important;
}

@media (max-width: 1100px) {
  .exercises-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .exercises-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   ARTICLES GRID - 3-Column Layout (Left-Aligned)
   CRITICAL: Exactly 1 row with 3 columns
   Card Size: 325px × 225px (fixed)
   Spacing: 36px - Custom spacing for articles
   Alignment: LEFT (start) - Matches other sections
   ======================================== */

.articles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 325px) !important;
  gap: 36px !important;  /* 36px spacing */
  column-gap: 36px !important;
  row-gap: 36px !important;
  justify-content: start !important;  /* LEFT align, not center */
  padding: var(--space-5) 0 !important;  /* 20px vertical padding */
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive: 2 columns on tablets (768px - 1100px) */
@media (max-width: 1100px) {
  .articles-grid {
    grid-template-columns: repeat(2, 325px) !important;
  }
}

/* Responsive: 1 column on mobile (≤768px) */
@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(325px, 100%), 1fr)) !important;
    gap: var(--space-6) !important;
    padding: var(--space-4) 0 !important;
  }
}

/* Extra small devices (≤480px) */
@media (max-width: 480px) {
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5) !important;  /* 20px on mobile */
    padding: var(--space-4) 0 !important;
  }
}

/* Very small devices (≤375px) - Tighter spacing for iPhone SE, etc. */
@media (max-width: 375px) {
  .articles-grid {
    gap: var(--space-4) !important;  /* 16px on very small screens */
    padding: var(--space-3) !important;  /* 12px padding */
  }
}