/* =========================================================================
   ATHAR — PAGE-LEVEL LAYOUT (Hero & Section-specific structure)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero Section
   ------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);
  overflow: hidden;
  background: var(--color-bg);
  background-image: var(--gradient-mesh);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   Responsive container adjustments
   ------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .container { max-width: var(--container-2xl); }
}

@media (max-width: 768px) {
  .hero-section { min-height: auto; padding-top: var(--space-8); }
}

/* -------------------------------------------------------------------------
   Section background variants
   ------------------------------------------------------------------------- */
.section-alt { background: var(--color-surface); }
.section-dark { background: var(--color-dark-surface); color: var(--color-text-inverse); }
.section-dark h2, .section-dark h3 { color: #fff; }