/* ===== SECTIONS LAYOUT & BACKGROUND ===== */

/* ===== SECTIONS WITHOUT BACKGROUND - Hero image visible everywhere ===== */
.section {
  background: transparent; /* Trasparente per mostrare hero background */
  color: var(--color-text-inverse);
  padding: var(--space-4xl) 0;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 2; /* Sopra il background hero fisso */
}

/* All section dividers and decorations removed */
.section-divider,
.section-divider-top,
.section-divider-bottom,
.section::after,
.section::before {
  display: none;
}

/* All section variants transparent to show hero background */
.section-gray {
  background: transparent;
  color: var(--color-text-inverse);
}

.section-coral {
  background: transparent;
  color: var(--color-text-inverse);
}

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

.section-with-silhouette {
  background: transparent;
  color: var(--color-text-inverse);
}

/* Asymmetric section header */
.section-header {
  text-align: left;
  margin-bottom: var(--space-3xl);
  max-width: none;
  position: relative;
  z-index: 2;
}

.section-header::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: -3rem;
  width: 8rem;
  height: 8rem;
  background: radial-gradient(circle, rgba(234, 95, 71, 0.1), transparent 70%);
  border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
  z-index: -1;
}

.section-header h2 {
  margin-bottom: var(--space-lg);
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary), transparent);
  border-radius: 2px;
  transform: skew(-15deg);
}

.section-header p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 65ch;
  position: relative;
}

/* Section text: white on dark sections, but cards with white background get green text */
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p,
.section li {
  color: var(--color-text-inverse) !important;
}

/* White background cards get green text for proper contrast */
.feature-card h3,
.feature-card p,
.service-card h3,
.service-card p,
.service-card li,
.event-card h3,
.event-card p,
.event-content h3,
.event-content p,
.space-feature-item h4,
.space-feature-item p,
.slide-info h3,
.slide-info p,
.carousel-container h3,
.carousel-container p,
.feature-content h4,
.feature-content p,
.contact-form-container h3,
.contact-form-container p,
.contact-form-container label,
.service-features li {
  color: var(--color-text-primary) !important;
}

/* Elements with transparent/dark backgrounds keep white text */
.stat-card h4,
.stat-card p,
.value-item h4,
.value-item p {
  color: var(--color-text-inverse) !important;
}

.section .section-header p {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== MOBILE SECTIONS OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .section {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }
  
  .section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: 0 var(--space-md);
  }
  
  .section-header::before {
    display: none; /* Remove decorative elements on mobile for cleaner look */
  }
  
  .section-header h2 {
    font-size: clamp(2.4rem, 7vw, 3.2rem);
    line-height: 1.2;
    margin-bottom: var(--space-md);
    text-align: center;
  }
  
  .section-header h2::after {
    left: 50%;
    transform: translateX(-50%) skew(-15deg);
    width: 40%;
  }
  
  .section-header p {
    font-size: clamp(1.4rem, 4vw, 1.7rem);
    line-height: 1.6;
    max-width: 95%;
    margin: 0 auto;
    text-align: center;
  }
  
  .container {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    box-sizing: border-box;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .section {
    padding: var(--space-2xl) 0 var(--space-xl);
  }
  
  .section-header {
    margin-bottom: var(--space-xl);
    padding: 0 var(--space-sm);
  }
  
  .section-header h2 {
    font-size: clamp(2rem, 6vw, 2.8rem);
    margin-bottom: var(--space-sm);
  }
  
  .section-header p {
    font-size: clamp(1.3rem, 3.8vw, 1.6rem);
    line-height: 1.5;
  }
  
  .container {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}