/**
 * Hero Section Component
 * Full-width, full-height hero with image, overlay, and content
 */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hero Media */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero Slideshow */
.hero__slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__slide.slideshow__slide--active {
  pointer-events: auto;
  z-index: 2;
}

.hero__slide.slideshow__slide--exit {
  z-index: 1;
}

/* Effect: Dissolve (Fade) */
.hero__slideshow--dissolve .hero__slide {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero__slideshow--dissolve .hero__slide.slideshow__slide--active {
  opacity: 1;
}

.hero__slideshow--dissolve .hero__slide.slideshow__slide--exit {
  opacity: 0;
}

/* Effect: Slide (Horizontal) */
.hero__slideshow--slide .hero__slide {
  transform: translateX(100%);
  transition: transform 1s ease-in-out;
  opacity: 1;
}

.hero__slideshow--slide .hero__slide.slideshow__slide--active {
  transform: translateX(0);
  opacity: 1;
}

.hero__slideshow--slide .hero__slide.slideshow__slide--exit {
  transform: translateX(-100%);
  opacity: 1;
}

/* Effect: Zoom In */
.hero__slideshow--zoom .hero__slide {
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

.hero__slideshow--zoom .hero__slide .hero__image {
  transform: scale(1.15);
  transition: transform 1.5s ease-in-out;
}

.hero__slideshow--zoom .hero__slide.slideshow__slide--active {
  opacity: 1;
}

.hero__slideshow--zoom .hero__slide.slideshow__slide--active .hero__image {
  transform: scale(1);
}

.hero__slideshow--zoom .hero__slide.slideshow__slide--exit {
  opacity: 0;
}

/* Effect: Pan & Zoom (Ken Burns) */
.hero__slideshow--pan .hero__slide {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero__slideshow--pan .hero__slide .hero__image {
  transform: scale(1.1);
  transition: transform 8s ease-in-out;
}

.hero__slideshow--pan .hero__slide.slideshow__slide--active {
  opacity: 1;
}

.hero__slideshow--pan .hero__slide.slideshow__slide--active .hero__image {
  transform: scale(1.2) translateX(-3%);
}

.hero__slideshow--pan .hero__slide.slideshow__slide--exit {
  opacity: 0;
}

.hero__slideshow--pan .hero__slide.slideshow__slide--exit .hero__image {
  transform: scale(1.1);
}

/* Slideshow Navigation Dots */
.slideshow__navigation {
  position: absolute;
  bottom: var(--space-32);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--space-12);
  align-items: center;
  justify-content: center;
}

.slideshow__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slideshow__dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.slideshow__dot--active {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.3);
}

.slideshow__dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 1);
  outline-offset: 4px;
}

/* Adjust scroll arrow position when slideshow navigation is present */
.hero__slideshow + .hero__overlay + .hero__content + .hero__custom-text + .hero__scroll-arrow,
.hero__slideshow .hero__overlay + .hero__content + .hero__custom-text + .hero__scroll-arrow {
  bottom: calc(var(--space-32) + 50px);
}

@media (min-width: 768px) {
  .slideshow__navigation {
    bottom: var(--space-48);
    gap: var(--space-16);
  }

  .slideshow__dot {
    width: 14px;
    height: 14px;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
  z-index: 2;
}

/* Hero Content */
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

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

@media (min-width: 1024px) {
  .hero__content {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
}

.hero__inner {
  max-width: 800px;
}

/* Content Position Modifiers */
.hero--content-left .hero__inner {
  margin-left: 0;
  margin-right: auto;
}

.hero--content-center .hero__inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero--content-right .hero__inner {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

/* Hero Title */
.hero__title {
  font-size: var(--fs-800);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--fs-900);
  }
}

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

/* Hero Title Typography Presets
 * 
 * USAGE: Add modifier class to hero__title element
 * Example: <h1 class="hero__title hero__title--preset-bold">Your Title</h1>
 * 
 * AVAILABLE PRESETS:
 * - hero__title--preset-bold: Raleway Bold, 700 weight, 1.2 line-height, -0.03em letter-spacing
 */
.hero__title--preset-bold {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #000000;
  opacity: 1;
}

/* Preset variants for light text on dark backgrounds */
.hero--text-light .hero__title--preset-bold {
  color: #ffffff;
}

/* Hero Subtitle */
.hero__subtitle {
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-32);
}

@media (min-width: 768px) {
  .hero__subtitle {
    font-size: var(--fs-500);
  }
}

@media (min-width: 1024px) {
  .hero__subtitle {
    font-size: var(--fs-600);
  }
}

/* Text Color Modifiers */
.hero--text-dark .hero__title,
.hero--text-dark .hero__subtitle {
  color: var(--color-text);
}

.hero--text-light .hero__title,
.hero--text-light .hero__subtitle {
  color: var(--color-text-light);
}

/* Hero Actions */
.hero__actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}

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

.hero--content-right .hero__actions {
  justify-content: flex-end;
}

.hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-32);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-4);
  transition: background-color 0.2s ease;
}

.hero__button:hover,
.hero__button:focus {
  background-color: var(--color-primary-hover);
}

.hero--text-light .hero__button {
  background-color: var(--color-text-light);
  color: var(--color-text);
}

.hero--text-light .hero__button:hover,
.hero--text-light .hero__button:focus {
  background-color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .hero__button {
    padding: var(--space-24) var(--space-48);
    font-size: var(--fs-400);
  }
}

/* Hero Scroll Arrow */
.hero__scroll-arrow {
  position: absolute;
  bottom: var(--space-48);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid currentColor;
  opacity: 0.6;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: hero-bounce 2s infinite;
  padding: 0;
}

.hero__scroll-arrow:hover {
  transform: translateX(-50%) translateY(4px);
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.hero__scroll-arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.hero__scroll-arrow svg {
  width: 24px;
  height: 24px;
}

.hero--text-dark .hero__scroll-arrow {
  color: var(--color-text);
}

.hero--text-light .hero__scroll-arrow {
  color: var(--color-text-light);
}

.hero--text-light .hero__scroll-arrow:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: currentColor;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-8px);
  }
  60% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@media (min-width: 768px) {
  .hero__scroll-arrow {
    bottom: var(--space-64);
    width: 56px;
    height: 56px;
  }

  .hero__scroll-arrow svg {
    width: 28px;
    height: 28px;
  }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow {
    animation: none;
  }
  
  .hero__scroll-arrow:hover {
    transform: translateX(-50%);
  }
}

/* Hero Custom Text Section */
.hero__custom-text {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.hero__custom-text .container {
  pointer-events: auto;
}

.hero__custom-text-content {
  max-width: 100%;
}

.hero__custom-text-content p {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  text-align: justify;
  text-align-last: justify;
}

/* Font Size: Small */
.hero__custom-text--size-small .hero__custom-text-content {
  max-width: 350px;
}

.hero__custom-text--size-small .hero__custom-text-content p {
  font-size: 2em;
}

@media (min-width: 768px) {
  .hero__custom-text--size-small .hero__custom-text-content {
    max-width: 450px;
  }

  .hero__custom-text--size-small .hero__custom-text-content p {
    font-size: 3em;
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--size-small .hero__custom-text-content {
    max-width: 550px;
  }

  .hero__custom-text--size-small .hero__custom-text-content p {
    font-size: 4em;
  }
}

/* Font Size: Medium (Default) */
.hero__custom-text--size-medium .hero__custom-text-content {
  max-width: 490px;
}

.hero__custom-text--size-medium .hero__custom-text-content p {
  font-size: 3em;
}

@media (min-width: 768px) {
  .hero__custom-text--size-medium .hero__custom-text-content {
    max-width: 650px;
  }

  .hero__custom-text--size-medium .hero__custom-text-content p {
    font-size: 4em;
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--size-medium .hero__custom-text-content {
    max-width: 800px;
  }

  .hero__custom-text--size-medium .hero__custom-text-content p {
    font-size: 5em;
  }
}

/* Font Size: Large */
.hero__custom-text--size-large .hero__custom-text-content {
  max-width: 600px;
}

.hero__custom-text--size-large .hero__custom-text-content p {
  font-size: 4em;
}

@media (min-width: 768px) {
  .hero__custom-text--size-large .hero__custom-text-content {
    max-width: 800px;
  }

  .hero__custom-text--size-large .hero__custom-text-content p {
    font-size: 5em;
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--size-large .hero__custom-text-content {
    max-width: 1000px;
  }

  .hero__custom-text--size-large .hero__custom-text-content p {
    font-size: 6em;
  }
}

/* Font Size: Extra Large */
.hero__custom-text--size-xlarge .hero__custom-text-content {
  max-width: 700px;
}

.hero__custom-text--size-xlarge .hero__custom-text-content p {
  font-size: 3em;
}

@media (min-width: 768px) {
  .hero__custom-text--size-xlarge .hero__custom-text-content {
    max-width: 950px;
  }

  .hero__custom-text--size-xlarge .hero__custom-text-content p {
    font-size: 6.25em;
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--size-xlarge .hero__custom-text-content {
    max-width: 1200px;
  }

  .hero__custom-text--size-xlarge .hero__custom-text-content p {
    font-size: 7.5em;
  }
}

/* Custom Text Position: Top Left */
.hero__custom-text--top-left {
  top: var(--space-64);
  left: 0;
  right: 0;
}

.hero__custom-text--top-left .container {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .hero__custom-text--top-left {
    top: var(--space-80);
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--top-left {
    top: var(--space-96);
  }
}

/* Custom Text Position: Top Right */
.hero__custom-text--top-right {
  top: var(--space-64);
  left: 0;
  right: 0;
}

.hero__custom-text--top-right .container {
  display: flex;
  justify-content: flex-end;
}

.hero__custom-text--top-right .hero__custom-text-content {
  text-align: right;
}

@media (min-width: 768px) {
  .hero__custom-text--top-right {
    top: var(--space-80);
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--top-right {
    top: var(--space-96);
  }
}

/* Custom Text Position: Bottom Left */
.hero__custom-text--bottom-left {
  bottom: var(--space-64);
  left: 0;
  right: 0;
}

.hero__custom-text--bottom-left .container {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .hero__custom-text--bottom-left {
    bottom: var(--space-80);
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--bottom-left {
    bottom: var(--space-96);
  }
}

/* Custom Text Position: Bottom Right */
.hero__custom-text--bottom-right {
  bottom: var(--space-64);
  left: 0;
  right: 0;
}

.hero__custom-text--bottom-right .container {
  display: flex;
  justify-content: flex-end;
}

.hero__custom-text--bottom-right .hero__custom-text-content {
  text-align: right;
}

@media (min-width: 768px) {
  .hero__custom-text--bottom-right {
    bottom: var(--space-80);
  }
}

@media (min-width: 1024px) {
  .hero__custom-text--bottom-right {
    bottom: var(--space-96);
  }
}

/* Custom Text inherits text color from hero modifiers */
.hero--text-dark .hero__custom-text-content {
  color: var(--color-text);
}

.hero--text-light .hero__custom-text-content {
  color: var(--color-text-light);
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .hero__scroll-arrow {
    width: 40px;
    height: 40px;
    bottom: var(--space-32);
  }
  
  .hero__scroll-arrow svg {
    width: 20px;
    height: 20px;
  }
}