/**
 * Hero Component Styles - Air Tasman Website
 * Shared hero styles for hero sections across pages
 * @author Air Tasman Development Team
 * @version 1.0.0
 */

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-bg-hero);
}

/* Hero Background Image Container */
.hero-background,
.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background img,
.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Background Overlay */
.hero-background::after,
.hero__background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-dark);
  z-index: 2;
}

/* Hero Content Container */
.hero-container,
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
}

/* Content alignment variants */
.hero--left .hero-container,
.hero--left .hero__content {
  text-align: left;
}

.hero--right .hero-container,
.hero--right .hero__content {
  text-align: right;
}

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

.hero-headline,
.hero__headline,
.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subheadline,
.hero__subheadline,
.hero__tagline {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-white);
  margin-bottom: var(--space-xl);
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Hero Logo (for login page) */
.hero__logo {
  max-width: 180px;
  height: auto;
  margin-bottom: var(--space-lg);
  filter: brightness(0) invert(1);
}

/* =============================================
   HERO SIZE VARIANTS
   ============================================= */

/* Compact hero (70vh) */
.hero--compact {
  min-height: 70vh;
}

/* Medium hero (80vh) */
.hero--medium {
  min-height: 80vh;
}

/* Large hero (100vh - default) */
.hero--large {
  min-height: 100vh;
}

/* Full screen hero (100vh with no padding) */
.hero--fullscreen {
  min-height: 100vh;
  height: 100vh;
}

.hero--fullscreen .hero-container,
.hero--fullscreen .hero__content {
  padding-top: 80px; /* Account for fixed header */
}

/* =============================================
   HERO CONTENT POSITIONING
   ============================================= */

/* Centered content (default) */
.hero--center .hero-container,
.hero--center .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: inherit;
}

/* Bottom positioned content */
.hero--bottom .hero-container,
.hero--bottom .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-3xl);
}

/* Top positioned content */
.hero--top .hero-container,
.hero--top .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(80px + var(--space-3xl)); /* Header height + spacing */
}

/* =============================================
   HERO BACKGROUND VARIANTS
   ============================================= */

/* Gradient overlay variants */
.hero--gradient-light .hero-background::after,
.hero--gradient-light .hero__background::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.hero--gradient-dark .hero-background::after,
.hero--gradient-dark .hero__background::after {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.hero--gradient-brand .hero-background::after,
.hero--gradient-brand .hero__background::after {
  background: linear-gradient(
    135deg,
    rgba(0, 102, 204, 0.7) 0%,
    rgba(0, 82, 163, 0.8) 100%
  );
}

/* No overlay variant */
.hero--no-overlay .hero-background::after,
.hero--no-overlay .hero__background::after {
  display: none;
}

/* =============================================
   HERO ANIMATIONS
   ============================================= */

/* Fade in animation */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero--animate .hero-container,
.hero--animate .hero__content {
  animation: heroFadeIn 1s var(--ease-out);
}

/* Parallax effect */
.hero--parallax .hero-background,
.hero--parallax .hero__background {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Ken Burns effect */
.hero--ken-burns .hero-background img,
.hero--ken-burns .hero__background img {
  animation: kenBurns 20s linear infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurns {
  0% {
    transform: scale(1) translateX(0) translateY(0);
  }
  100% {
    transform: scale(1.1) translateX(-2%) translateY(-1%);
  }
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet styles */
@media (max-width: 1023px) {
  .hero {
    min-height: 80vh;
  }
  
  .hero--compact {
    min-height: 60vh;
  }
  
  .hero--medium {
    min-height: 70vh;
  }
  
  .hero-headline,
  .hero__headline,
  .hero__title {
    font-size: var(--font-size-2xl);
  }
  
  .hero-subheadline,
  .hero__subheadline,
  .hero__tagline {
    font-size: var(--font-size-lg);
  }
  
  .hero-container,
  .hero__content {
    padding: 0 var(--space-md);
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  .hero {
    min-height: 70vh;
  }
  
  .hero--compact {
    min-height: 50vh;
  }
  
  .hero--medium {
    min-height: 60vh;
  }
  
  .hero-headline,
  .hero__headline,
  .hero__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-xs);
  }
  
  .hero-subheadline,
  .hero__subheadline,
  .hero__tagline {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-lg);
  }
  
  .hero-container,
  .hero__content {
    padding: 0 var(--space-sm);
  }
  
  .hero__logo {
    max-width: 140px;
    margin-bottom: var(--space-md);
  }
  
  .hero--top .hero-container,
  .hero--top .hero__content {
    padding-top: calc(64px + var(--space-xl)); /* Mobile header height + spacing */
  }
  
  .hero--bottom .hero-container,
  .hero--bottom .hero__content {
    padding-bottom: var(--space-2xl);
  }
}

/* Large desktop styles */
@media (min-width: 1440px) {
  .hero-headline,
  .hero__headline,
  .hero__title {
    font-size: 56px;
  }
  
  .hero-subheadline,
  .hero__subheadline,
  .hero__tagline {
    font-size: 28px;
  }
}

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

/* High contrast mode */
@media (prefers-contrast: high) {
  .hero-background::after,
  .hero__background::after {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .hero-headline,
  .hero__headline,
  .hero__title,
  .hero-subheadline,
  .hero__subheadline,
  .hero__tagline {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero--animate .hero-container,
  .hero--animate .hero__content {
    animation: none;
  }
  
  .hero--ken-burns .hero-background img,
  .hero--ken-burns .hero__background img {
    animation: none;
  }
  
  .hero--parallax .hero-background,
  .hero--parallax .hero__background {
    transform: none;
    will-change: auto;
  }
}

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

@media print {
  .hero {
    min-height: auto;
    max-height: 300px;
    background: var(--color-white);
    color: var(--color-black);
    break-inside: avoid;
  }
  
  .hero-background,
  .hero__background {
    display: none;
  }
  
  .hero-headline,
  .hero__headline,
  .hero__title {
    color: var(--color-black);
    text-shadow: none;
    font-size: var(--font-size-2xl);
  }
  
  .hero-subheadline,
  .hero__subheadline,
  .hero__tagline {
    color: var(--color-gray-700);
    text-shadow: none;
    font-size: var(--font-size-lg);
  }
  
  .hero__logo {
    filter: none;
    max-width: 120px;
  }
}

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

/* Text color overrides */
.hero--dark-text .hero-headline,
.hero--dark-text .hero__headline,
.hero--dark-text .hero__title,
.hero--dark-text .hero-subheadline,
.hero--dark-text .hero__subheadline,
.hero--dark-text .hero__tagline {
  color: var(--color-gray-800);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Background color fallbacks */
.hero--blue {
  background: var(--color-primary);
}

.hero--gradient {
  background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
}

.hero--white {
  background: var(--color-white);
}

.hero--gray {
  background: var(--color-gray-100);
}