/**
 * Section Components
 * Page sections, containers, hero areas
 */

/* ==========================================================================
   Container
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Container Variants */
.container--narrow {
  max-width: var(--container-md);
}

.container--wide {
  max-width: 100%;
}

.container--flush {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Section
   ========================================================================== */
.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* Section Variants - Spacing */
.section--small {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--large {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.section--flush-top {
  padding-top: 0;
}

.section--flush-bottom {
  padding-bottom: 0;
}

/* Section Variants - Background */
.section--white {
  background-color: var(--color-background-body);
}

.section--neutral {
  background-color: var(--neutral-50);
}

.section--alt {
  background-color: var(--neutral-100);
}

.section--primary {
  background-color: var(--primary-600);
  color: var(--color-text-inverse);
}

.section--dark {
  background-color: var(--neutral-900);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Section Header
   ========================================================================== */
.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section__header--left {
  text-align: left;
}

.section__header--right {
  text-align: right;
}

.section__title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

@media (min-width: 1024px) {
  .section__title {
    font-size: var(--font-size-4xl);
  }
}

.section--primary .section__title,
.section--dark .section__title {
  color: var(--color-text-inverse);
}

.section__description {
  margin: 0 auto;
  max-width: 48rem;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.section--primary .section__description,
.section--dark .section__description {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: var(--space-20);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 0;
    padding-bottom: var(--space-32);
  }
}

.hero--large {
  min-height: 600px;
  display: flex;
  align-items: center;
}

.hero__content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
}

.hero__content--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero__title {
  margin: 0 0 var(--space-6) 0;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--font-size-5xl);
  }
}

.hero__description {
  margin: 0 0 var(--space-8) 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__content--center .hero__actions {
  justify-content: center;
}

.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(139, 77, 139, 0.8) 0%, rgba(109, 44, 112, 0.6) 100%);
  z-index: 5;
}

.hero--dark .hero__title,
.hero--dark .hero__description {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Simple Hero (Webshop Page)
   ========================================================================== */
.section--hero-simple {
  padding: var(--space-12) 0;
  background: var(--neutral-100);
  text-align: center;
}

@media (min-width: 768px) {
  .section--hero-simple {
    padding: var(--space-16) 0;
  }
}

.hero-simple__title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--primary-600);
}

@media (min-width: 768px) {
  .hero-simple__title {
    font-size: var(--font-size-5xl);
  }
}

.hero-simple__subtitle {
  font-size: var(--font-size-base);
  color: var(--neutral-600);
  margin: 0;
  max-width: 65ch;
  white-space: pre-line;
}

@media (min-width: 768px) {
  .hero-simple__subtitle {
    font-size: var(--font-size-lg);
  }
}

/* ==========================================================================
   Featured Section
   ========================================================================== */
.section--featured {
  background: linear-gradient(135deg, var(--neutral-50) 0%, var(--color-background-body) 100%);
}

/* ==========================================================================
   Grid Layouts in Sections
   ========================================================================== */
.section__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .section__grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .section__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .section__grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Content Width Constraints
   ========================================================================== */
.max-w-prose {
  max-width: 65ch;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Section Utilities (replaces Tailwind classes)
   ========================================================================== */

/* CTA Section Centering */
.section__cta {
  text-align: center;
  margin-top: var(--space-12);
}

/* Centered Content Blocks */
.section__content--centered {
  max-width: 48rem; /* 768px */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__content--centered .section__description {
  margin-bottom: var(--space-8);
}

/* Newsletter Component */
.newsletter__content {
  max-width: 42rem; /* 672px */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.newsletter__description {
  margin-bottom: var(--space-8);
}

.newsletter__form {
  margin-top: var(--space-6);
}