/* ===========================================
   VIDEO ELEVATOR - BASE STYLES
   =========================================== */

/* Main Content */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--secondary-color);
  min-height: 100vh;
}

/* Hero Sections Wrapper */
.hero-sections-wrapper {
  width: 100%;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elevator-pitch-wrapper {
  width: 100%;
  max-width: 1152px;
  text-align: center;
  padding-bottom: 20px;
}

/* Video Section */
/* Dark section wrapper; seam spacing is global */
.video-section  {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  overflow: visible; /* safe for adjacent tear overlap */
  /* no padding-top or padding-bottom here */
}


/* Elevator Pitch */
.elevator-pitch {
  width: 100%;
  max-width: 1152px;
  text-align: center;
  margin-bottom: 40px;
}

.elevator-pitch p {
  font-family: var(--font-family-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--off-white);
  font-weight: 400;
  position: relative;
  padding: 0 clamp(1rem, 6vw, 3rem);
}

.elevator-pitch-icon {
  width: 12px;
  height: 12px;
  background-image: url('../assets/images/diamond-2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 18px;
}

/* Video Container */
.video-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 100%;
}

/* Video Embed */
.video-embed {
  position: relative;
  width: min(87%, 1162px);
  aspect-ratio: 200 / 113;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.video-embed:hover iframe {
  cursor: pointer;
}

/* Right Cap Image */
.right-cap-image {
  max-width: 40px;
  height: auto;
  flex-shrink: 0;
}

/* Left Cap Image */
.left-cap-image {
  max-width: 40px;
  height: auto;
  flex-shrink: 0;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */

/* Tablet and Large Mobile (≤1024px) */
@media (max-width: 1024px) {
  .elevator-pitch {
    padding: clamp(1rem, 3vw, 2rem) 1rem; /* Much more reasonable padding */
    margin-bottom: 30px;
  }

  .elevator-pitch p {
    padding: 0 clamp(1rem, 3vw, 2rem);
    font-size: 0.95rem;
  }

  .video-container {
    gap: 40px; /* Reduce gap on smaller screens */
  }
}

/* Remove decorative cap images on Large Tablet/Small Desktop and smaller screens */
@media (max-width: 1199px) {
  .left-cap-image,
  .right-cap-image {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .video-container {
    flex-direction: column;
    gap: 20px;
  }

  .video-embed {
    width: 90%;
  }

  /* Add space at the top of elevator-pitch-wrapper */
  .elevator-pitch-wrapper {
    padding-top: 2rem;
  }

  .elevator-pitch {
    padding: clamp(0.75rem, 2vw, 1.5rem) 1rem; /* Significantly reduced padding */
    margin-bottom: 20px;
  }

  .elevator-pitch p {
    padding: 0 clamp(1.5rem, 4vw, 2.5rem); /* Increased side padding for mobile */
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0.5rem; /* Bring p text closer to h2 */
  }

  /* Hide diamond icon on mobile */
  .elevator-pitch-icon {
    display: none;
  }

  /* Hide lines on h2 for mobile */
  .top-h2-line {
    display: none;
  }

  /* Reduce h2 size for mobile */
  .top-h2 {
    font-size: 1.4rem; /* Significantly reduced from 2rem */
    margin-bottom: 0; /* Remove bottom margin to bring closer to p */
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .video-container {
    flex-direction: column;
    gap: 15px;
  }

  .video-embed {
    width: 95%;
  }

  /* Add space at the top of elevator-pitch-wrapper for small mobile */
  .elevator-pitch-wrapper {
    padding-top: 1.5rem;
  }

  .elevator-pitch {
    padding: clamp(0.5rem, 1.5vw, 1rem) 0.75rem; /* Minimal padding for small screens */
    margin-bottom: 15px;
  }

  .elevator-pitch p {
    padding: 0 clamp(1rem, 3vw, 2rem); /* Increased side padding for small mobile */
    font-size: 0.85rem;
    line-height: 1.4;
    margin-top: 0.25rem; /* Bring p text closer to h2 */
  }

  /* Hide diamond icon on small mobile */
  .elevator-pitch-icon {
    display: none;
  }

  /* Hide lines on h2 for small mobile */
  .top-h2-line {
    display: none;
  }

  /* Reduce h2 size further for small mobile */
  .top-h2 {
    font-size: 1.2rem; /* Further reduced for small screens */
    margin-bottom: 0; /* Remove bottom margin to bring closer to p */
  }
}