/*
 * Hero Section Styles
 * 
 * @package Viva_Magenta_V1
 */

.hero-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
}

.hero-section:first-child {
  margin-top: 0;
  padding-top: 0;
}

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

.hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-hero-media);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(214, 51, 132, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: var(--z-hero-overlay);
}

.hero-text {
  position: relative;
  z-index: var(--z-hero-content);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px;
  color: var(--text-white);
  text-align: center;
  animation: fadeInUp 1s ease-out 0.5s both;
}

/* Remove small-hero sizing for bodas revert */
.hero-section.small-hero { height: auto; min-height: 0; padding: 80px 0 60px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); }
.bodas-page .hero-section.small-hero { margin-top:0; padding-top:80px; }
/* Keep eyebrow & ghost styles usable even without small-hero */
.hero-section .eyebrow { display:inline-block; letter-spacing:.08em; font-size:13px; text-transform:uppercase; font-weight:600; background: rgba(255,255,255,0.15); padding:6px 14px; border-radius:30px; margin-bottom:18px; }
.hero-section .cta-button.ghost { background: transparent; border:2px solid rgba(255,255,255,.6); color:#fff; }
.hero-section .cta-button.ghost:hover { background:#fff; color: var(--primary-color); }

.hero-section.small-hero .hero-text { max-width: var(--container-max-width); }
@media (min-width: 900px) {
  .hero-section.small-hero .hero-text { max-width: 1000px; }
}

@media (max-width: 768px) {
  .hero-section.small-hero { padding: 70px 0 50px; }
  .hero-section.small-hero .hero-title { font-size: clamp(1.9rem,8vw,2.6rem);} 
}