/* ========================================
   GLOBAL HERO SECTION STYLES - ALL PAGES
   Unified design system for all non-home pages
   ======================================== */

:root {
  /* Hero Layout */
  --hero-max-width: 1180px;
  --hero-padding-desktop-top: 76px;
  --hero-padding-desktop-bottom: 20px;
  --hero-padding-mobile-top: 55px;
  --hero-padding-mobile-left: 22px;
  --hero-padding-mobile-bottom: 59px;
  --hero-mobile-breakpoint: 600px;
  
  /* Hero Colors */
  --hero-bg-gradient: linear-gradient(115deg, #287b7d 0%, #237c82 50%, #1a7c8a 100%);
  --hero-text-primary: #fff;
  --hero-text-secondary: #c0d0db;
  --hero-text-breadcrumb: #a8bdcc;
  --hero-text-link: #83e2db;
  
  /* Typography */
  --hero-h1-font: 700 clamp(38px, 6vw, 62px) / 1.12 var(--display);
  --hero-h1-letter-spacing: -0.055em;
  --hero-h1-margin: 14px 0 12px;
  
  --hero-p-font-size: var(--font-size-base);
  --hero-p-color: #c0d0db;
  --hero-p-line-height: 1.8;
  --hero-p-max-width: 690px;
  
  --hero-label-font-size: var(--font-size-xs);
  --hero-label-font-weight: 700;
  --hero-label-letter-spacing: 0.16em;
  --hero-label-color: #83e2db;
  
  --hero-crumb-font-size: var(--font-size-sm);
  --hero-crumb-letter-spacing: 0.12em;
  --hero-crumb-color: #a8bdcc;
  --hero-crumb-margin-bottom: 24px;
  
  --hero-link-color: #83e2db;
  --hero-link-text-decoration: none;
}

/* ========================================
   BASE HERO STYLES
   ======================================== */

.hero-section {
  position: relative;
  overflow: hidden;
  padding: var(--hero-padding-desktop-top) max(25px, calc((100% - var(--hero-max-width)) / 2)) var(--hero-padding-desktop-bottom);
  background: var(--hero-bg-gradient);
  color: var(--hero-text-primary);
}

/* Remove decorative after pseudo-element */
.hero-section::after {
  content: none !important;
}

/* Generic hero section naming convention */
[class*="-hero"] {
  position: relative;
  overflow: hidden;
  padding: var(--hero-padding-desktop-top) max(25px, calc((100% - var(--hero-max-width)) / 2)) var(--hero-padding-desktop-bottom);
  background: var(--hero-bg-gradient);
  color: var(--hero-text-primary);
}

[class*="-hero"]::after {
  content: none !important;
}

/* ========================================
   HERO TYPOGRAPHY COMPONENTS
   ======================================== */

/* Breadcrumb */
[class*="-crumb"] {
  font-size: var(--hero-crumb-font-size);
  letter-spacing: var(--hero-crumb-letter-spacing);
  color: var(--hero-crumb-color);
  margin-bottom: var(--hero-crumb-margin-bottom);
}

[class*="-crumb"] a {
  color: var(--hero-link-color);
  text-decoration: var(--hero-link-text-decoration);
}

/* Label / Eyebrow */
[class*="-label"] {
  font-size: var(--hero-label-font-size);
  font-weight: var(--hero-label-font-weight);
  letter-spacing: var(--hero-label-letter-spacing);
  color: var(--hero-label-color);
  text-transform: uppercase;
}

/* H1 Heading */
[class*="-hero"] h1 {
  font: var(--hero-h1-font);
  letter-spacing: var(--hero-h1-letter-spacing);
  margin: var(--hero-h1-margin);
  color: var(--hero-text-primary);
}

/* Description Paragraph */
[class*="-hero"] p {
  max-width: var(--hero-p-max-width);
  margin: 0;
  color: var(--hero-p-color);
  font-size: var(--hero-p-font-size);
  line-height: var(--hero-p-line-height);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 600px) {
  [class*="-hero"] {
    padding: var(--hero-padding-mobile-top) var(--hero-padding-mobile-left) var(--hero-padding-mobile-bottom);
  }
  
  [class*="-hero"] h1 {
    margin: 12px 0 10px;
  }
  
  [class*="-hero"] p {
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  [class*="-hero"],
  [class*="-hero"] h1,
  [class*="-hero"] p {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  [class*="-hero"] {
    background: none;
    border: 1px solid #ddd;
    padding: 20px;
  }
  
  [class*="-hero"]::before {
    display: none;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hero-text-primary {
  color: var(--hero-text-primary);
}

.hero-text-secondary {
  color: var(--hero-text-secondary);
}

.hero-text-breadcrumb {
  color: var(--hero-text-breadcrumb);
}

.hero-gradient {
  background: var(--hero-bg-gradient);
}

.hero-max-width {
  max-width: var(--hero-max-width);
  margin: auto;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY SCALE
   ======================================== */

@media (max-width: 900px) {
  [class*="-hero"] {
    --hero-padding-desktop-top: 70px;
    --hero-padding-desktop-bottom: 18px;
  }
}

@media (max-width: 768px) {
  [class*="-hero"] {
    --hero-padding-desktop-top: 65px;
    --hero-padding-desktop-bottom: 32px;
  }
}

@media (max-width: 600px) {
  [class*="-hero"] {
    --hero-padding-mobile-top: 55px;
    --hero-padding-mobile-left: 22px;
    --hero-padding-mobile-bottom: 32px;
  }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  [class*="-hero"] {
    background: var(--hero-bg-gradient);
    color: var(--hero-text-primary);
  }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: more) {
  [class*="-hero"] {
    border: 2px solid var(--hero-text-primary);
  }
  
  [class*="-crumb"] {
    font-weight: 700;
  }
  
  [class*="-label"] {
    font-weight: 800;
  }
}