/* ============================================
   LAYOUT.CSS — Container, SectionWrapper, SectionHeader
   Zyronix Technical Club
   ============================================ */

/* ── Container ──────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* ── Section Wrapper ────────────────────────── */
.section-wrapper {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

.section-wrapper--alt {
  background: linear-gradient(180deg, transparent 0%, rgba(255,26,26,0.02) 50%, transparent 100%);
}

.section-wrapper--dark {
  background: var(--clr-surface);
}

@media (max-width: 768px) {
  .section-wrapper {
    padding-block: var(--space-16);
  }
}

/* ── Section Header ─────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary-light);
  margin-bottom: var(--space-4);
}

.section-header__eyebrow::before,
.section-header__eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--clr-primary-light);
  opacity: 0.6;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.section-header__subtitle {
  font-size: 1.0625rem;
  color: var(--clr-text-muted);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.7;
}

/* ── Grid Utilities ─────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

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

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

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

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section-header {
    margin-bottom: var(--space-10);
  }
}

/* ── Flex Utilities ─────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* ── Decorative Background Elements ─────────── */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,26,26,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,26,26,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  pointer-events: none;
  z-index: 0;
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.bg-glow--primary {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,26,26,0.10) 0%, transparent 70%);
}

.bg-glow--secondary {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, transparent 70%);
}

/* ── Section content z-index ────────────────── */
.section-content {
  position: relative;
  z-index: 1;
}