/**
 * Hero Section - Comprehensive Responsive Design
 * Political Laboratory Website
 * 
 * Breakpoints:
 * - 4K/Ultra HD: 2560px+
 * - 2K/QHD: 1920px - 2559px
 * - Full HD: 1440px - 1919px
 * - HD/Desktop: 1024px - 1439px
 * - Tablet Landscape: 768px - 1023px
 * - Tablet Portrait: 600px - 767px
 * - Mobile Large: 480px - 599px
 * - Mobile Medium: 375px - 479px
 * - Mobile Small: 320px - 374px
 */

/* ========================================
   BASE HERO SECTION (Mobile First)
   ======================================== */

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #1a2332 50%, #0f1922 100%);
  width: 100%;
  max-width: 100vw;
  padding: 0;
}

[data-bs-theme="light"] .hero-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f5 100%);
}

.hero-content {
  padding: 1rem;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   MOBILE SMALL (320px - 374px)
   ======================================== */

@media (min-width: 320px) and (max-width: 374px) {
  .hero-section {
    padding: 0;
    min-height: 90vh;
  }

  .hero-content {
    padding: 0 0.75rem;
  }

  /* Badge */
  .hero-badge {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  .hero-badge i {
    font-size: 0.875rem;
  }

  /* Title */
  .hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
  }

  /* Description */
  .hero-description {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .stat-card {
    padding: 1rem 0.75rem;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .stat-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }

  .stat-card p {
    font-size: 0.75rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .hero-buttons .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    width: 100%;
  }

  .hero-buttons .btn i {
    font-size: 0.875rem;
  }

  /* Feature Pills - Hidden on mobile */
}

/* ========================================
   MOBILE MEDIUM (375px - 479px)
   ======================================== */

@media (min-width: 375px) and (max-width: 479px) {
  .hero-section {
    padding: 0;
    min-height: 95vh;
  }

  .hero-content {
    padding: 0 1rem;
  }

  /* Badge */
  .hero-badge {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
  }

  .hero-badge i {
    font-size: 1rem;
  }

  /* Title */
  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
  }

  /* Description */
  .hero-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }

  .stat-card {
    padding: 1.25rem 0.875rem;
  }

  .stat-icon {
    width: 45px;
    height: 45px;
    font-size: 1.125rem;
    margin-bottom: 0.625rem;
  }

  .stat-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.375rem;
  }

  .stat-card p {
    font-size: 0.8125rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }

  .hero-buttons .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    width: 100%;
  }

  .hero-buttons .btn i {
    font-size: 0.9375rem;
  }

  /* Feature Pills - Hidden on mobile */
}

/* ========================================
   MOBILE LARGE (480px - 599px)
   ======================================== */

@media (min-width: 480px) and (max-width: 599px) {
  .hero-section {
    padding: 0;
    min-height: 100vh;
  }

  .hero-content {
    padding: 0 1.25rem;
  }

  /* Badge */
  .hero-badge {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
  }

  .hero-badge i {
    font-size: 1.0625rem;
  }

  /* Title */
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    padding: 0 0.75rem;
  }

  /* Description */
  .hero-description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    padding: 0 0.75rem;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 0 0.75rem;
  }

  .stat-card {
    padding: 1.5rem 1rem;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .stat-card h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .stat-card p {
    font-size: 0.875rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 0 0.75rem;
  }

  .hero-buttons .btn {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    width: 100%;
  }

  .hero-buttons .btn i {
    font-size: 1rem;
  }

  /* Feature Pills - Hidden on mobile */
}

/* ========================================
   TABLET PORTRAIT (600px - 767px)
   ======================================== */

@media (min-width: 600px) and (max-width: 767px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 1.5rem;
    max-width: 90%;
  }

  /* Badge */
  .hero-badge {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }

  .hero-badge i {
    font-size: 1.125rem;
  }

  /* Title */
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.75rem;
    padding: 0 1rem;
  }

  /* Description */
  .hero-description {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    padding: 0 1rem;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
  }

  .stat-card {
    padding: 1.75rem 1.25rem;
  }

  .stat-icon {
    width: 55px;
    height: 55px;
    font-size: 1.375rem;
    margin-bottom: 0.875rem;
  }

  .stat-card h3 {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
  }

  .stat-card p {
    font-size: 0.9375rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    width: auto;
  }

  .hero-buttons .btn i {
    font-size: 1.0625rem;
  }

  /* Feature Pills - Hidden on mobile */
}

/* ========================================
   TABLET LANDSCAPE (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 2rem;
    max-width: 85%;
  }

  /* Badge */
  .hero-badge {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .hero-badge i {
    font-size: 1.125rem;
  }

  /* Title */
  .hero-title {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  /* Description */
  .hero-description {
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 3.5rem;
    padding: 0 1rem;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    padding: 0 1rem;
    max-width: 95%;
  }

  .stat-card {
    padding: 2rem 1.5rem;
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .stat-card h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .stat-card p {
    font-size: 0.9375rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
    padding: 0 1rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 1.125rem 2.25rem;
    font-size: 1.0625rem;
    width: auto;
  }

  .hero-buttons .btn i {
    font-size: 1.0625rem;
  }

  /* Feature Pills */
  .feature-pills {
    gap: 1rem;
    padding: 0 1rem;
  }

  .feature-pill {
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
  }

  .feature-pill i {
    font-size: 0.9375rem;
  }
}

/* ========================================
   HD/DESKTOP (1024px - 1439px)
   ======================================== */

@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 2rem;
    max-width: 1000px;
  }

  /* Badge */
  .hero-badge {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .hero-badge i {
    font-size: 1.125rem;
  }

  /* Title */
  .hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
  }

  /* Description */
  .hero-description {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 4rem;
    max-width: 800px;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 900px;
  }

  .stat-card {
    padding: 2rem 1.5rem;
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .stat-card h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .stat-card p {
    font-size: 0.95rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 1.5rem;
    margin-bottom: 4rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 1.25rem 2.5rem;
    font-size: 1.0625rem;
  }

  .hero-buttons .btn i {
    font-size: 1.0625rem;
  }

  /* Feature Pills */
  .feature-pills {
    gap: 1rem;
  }

  .feature-pill {
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
  }

  .feature-pill i {
    font-size: 0.9375rem;
  }
}

/* ========================================
   FULL HD (1440px - 1919px)
   ======================================== */

@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 2.5rem;
    max-width: 1200px;
  }

  /* Badge */
  .hero-badge {
    padding: 0.875rem 2.25rem;
    font-size: 1.0625rem;
    margin-bottom: 2.5rem;
  }

  .hero-badge i {
    font-size: 1.25rem;
  }

  /* Title */
  .hero-title {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 2.5rem;
  }

  /* Description */
  .hero-description {
    font-size: 1.375rem;
    line-height: 1.8;
    margin-bottom: 4.5rem;
    max-width: 900px;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-bottom: 4.5rem;
    max-width: 1100px;
  }

  .stat-card {
    padding: 2.5rem 2rem;
  }

  .stat-icon {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
  }

  .stat-card h3 {
    font-size: 3rem;
    margin-bottom: 0.625rem;
  }

  .stat-card p {
    font-size: 1rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 1.75rem;
    margin-bottom: 4.5rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 1.375rem 2.75rem;
    font-size: 1.125rem;
  }

  .hero-buttons .btn i {
    font-size: 1.125rem;
  }

  /* Feature Pills */
  .feature-pills {
    gap: 1.25rem;
  }

  .feature-pill {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
  }

  .feature-pill i {
    font-size: 1rem;
  }
}

/* ========================================
   2K/QHD (1920px - 2559px)
   ======================================== */

@media (min-width: 1920px) and (max-width: 2559px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 3rem;
    max-width: 1400px;
  }

  /* Badge */
  .hero-badge {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    margin-bottom: 3rem;
  }

  .hero-badge i {
    font-size: 1.375rem;
  }

  /* Title */
  .hero-title {
    font-size: 4.5rem;
    line-height: 1.2;
    margin-bottom: 3rem;
  }

  /* Description */
  .hero-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 5rem;
    max-width: 1000px;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 5rem;
    max-width: 1300px;
  }

  .stat-card {
    padding: 3rem 2.5rem;
  }

  .stat-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .stat-card h3 {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
  }

  .stat-card p {
    font-size: 1.125rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 5rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 1.5rem 3rem;
    font-size: 1.25rem;
  }

  .hero-buttons .btn i {
    font-size: 1.25rem;
  }

  /* Feature Pills */
  .feature-pills {
    gap: 1.5rem;
  }

  .feature-pill {
    padding: 0.875rem 2rem;
    font-size: 1.0625rem;
  }

  .feature-pill i {
    font-size: 1.0625rem;
  }
}

/* ========================================
   4K/ULTRA HD (2560px+)
   ======================================== */

@media (min-width: 2560px) {
  .hero-section {
    padding: 0;
  }

  .hero-content {
    padding: 0 4rem;
    max-width: 1800px;
  }

  /* Badge */
  .hero-badge {
    padding: 1.25rem 3rem;
    font-size: 1.375rem;
    margin-bottom: 4rem;
  }

  .hero-badge i {
    font-size: 1.625rem;
  }

  /* Title */
  .hero-title {
    font-size: 6rem;
    line-height: 1.2;
    margin-bottom: 4rem;
  }

  /* Description */
  .hero-description {
    font-size: 2rem;
    line-height: 1.8;
    margin-bottom: 6rem;
    max-width: 1400px;
  }

  /* Stats Grid */
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    margin-bottom: 6rem;
    max-width: 1600px;
  }

  .stat-card {
    padding: 4rem 3rem;
  }

  .stat-icon {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  .stat-card h3 {
    font-size: 4.5rem;
    margin-bottom: 1rem;
  }

  .stat-card p {
    font-size: 1.5rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: row;
    gap: 2.5rem;
    margin-bottom: 6rem;
    justify-content: center;
  }

  .hero-buttons .btn {
    padding: 2rem 4rem;
    font-size: 1.5rem;
  }

  .hero-buttons .btn i {
    font-size: 1.5rem;
  }

  /* Feature Pills */
  .feature-pills {
    gap: 2rem;
  }

  .feature-pill {
    padding: 1.125rem 2.5rem;
    font-size: 1.25rem;
  }

  .feature-pill i {
    font-size: 1.25rem;
  }
}

/* ========================================
   ANIMATED ELEMENTS RESPONSIVE
   ======================================== */

/* Gradient Orbs */
@media (max-width: 767px) {
  .gradient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    width: 200px;
    height: 200px;
    filter: blur(60px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .gradient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    width: 300px;
    height: 300px;
    filter: blur(80px);
  }
}

@media (min-width: 1024px) and (max-width: 1919px) {
  .gradient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    width: 500px;
    height: 500px;
    filter: blur(100px);
  }
}

@media (min-width: 1920px) {
  .gradient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    width: 700px;
    height: 700px;
    filter: blur(120px);
  }
}

/* Grid Overlay */
@media (max-width: 767px) {
  .grid-overlay {
    background-size: 30px 30px;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .grid-overlay {
    background-size: 40px 40px;
  }
}

@media (min-width: 1440px) {
  .grid-overlay {
    background-size: 50px 50px;
  }
}