/* ==========================================================================
   RAM LEELA CONTEST PLATFORM - RESPONSIVE & LAYOUT
   ========================================================================== */

/* Grid Helpers */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Tablet Breakpoint (max-width: 992px) */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-content-grid { grid-template-columns: 1fr !important; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-banner-frame, #hero-carousel { max-width: 560px; margin: 24px auto 0; }
  .countdown-container { justify-content: center; }
  .card-media { height: 180px !important; }
}

/* Tablet: How-to steps in 2 columns */
@media (max-width: 992px) and (min-width: 769px) {
  .step-connector-line { display: none !important; }
}

/* Mobile Breakpoint (max-width: 768px) */
@media (max-width: 768px) {
  .nav-actions .btn { display: none; }

  /* Compact section padding on mobile */
  .one-page-section {
    padding-top: 36px !important;
    padding-bottom: 60px !important;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 12px; }

  .stepper-bar { overflow-x: auto; padding-bottom: 10px; }
  .step-label { display: none; }

  .podium-grid { grid-template-columns: 1fr; gap: 12px; }
  .podium-card.first { order: 1; transform: none; }
  .podium-card.second { order: 2; }
  .podium-card.third { order: 3; }

  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-bar .search-box { width: 100%; }

  .card-participant .card-footer-action { flex-direction: column; gap: 8px; align-items: stretch; }
  .card-participant .card-footer-action .btn { width: 100%; }

  /* Compact gallery card on mobile */
  .card-media { height: 185px !important; }
  .card-content { padding: 8px 10px 10px !important; }

  /* Leaderboard table: smaller font & padding on mobile */
  .card-glass table { font-size: 0.78rem; }
  .card-glass table th, .card-glass table td { padding: 8px 8px !important; }

  .entry-detail-layout { grid-template-columns: 1fr !important; }

  #toast-container { left: 16px; right: 16px; bottom: 16px; }

  #hero-carousel { max-width: 100%; margin: 16px 0 0; border-radius: 12px; }
  #hero-carousel img { max-height: 280px; object-fit: cover; }

  #hero-dots button { width: 10px !important; height: 10px !important; touch-action: manipulation; }

  .hero-bottom-grid { grid-template-columns: 1fr !important; }
  .step-connector-line { display: none !important; }
  .quick-tips-grid { grid-template-columns: 1fr !important; }

  /* Pill group compact */
  .pill-group { gap: 6px; }
  .pill-btn { font-size: 0.78rem !important; padding: 6px 10px !important; }

  /* Modal full-width on mobile */
  .modal-card { margin: 8px !important; }

  /* LCS scoring info bar compact */
  .lcs-info-bar { padding: 10px 12px !important; gap: 12px !important; }

  /* Socials Slider on Mobile */
  .socials-slider-section .banner-item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
  }
  .socials-slider-section .slick-list {
    padding: 6px 22px !important;
  }
  .social-slick-prev {
    left: -4px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.3rem !important;
  }
  .social-slick-next {
    right: -4px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.3rem !important;
  }

  /* Brown Band Section Mobile */
  .brown-band-section {
    padding: 18px 14px !important;
  }
  .brown-band-section .container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .brown-band-section a.btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* Video Requirements Dark Band Mobile */
  .dark-band-video-req {
    padding: 14px 14px !important;
  }
  .dark-band-video-req .container {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .dark-band-video-req a.btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr; gap: 10px; }
  .card-media { height: 185px !important; }
  .section-header h2 { font-size: 1.6rem !important; }

  .socials-slider-section .slick-list {
    padding: 4px 14px !important;
  }
  .social-slick-prev {
    left: -6px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
  }
  .social-slick-next {
    right: -6px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
  }

  /* Floating Social Buttons on Mobile */
  .floating-socials-dock {
    gap: 8px !important;
  }
  .floating-social-btn {
    height: 38px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
  }
  .floating-social-label {
    display: none !important;
  }
  .floating-socials-left .floating-social-btn {
    border-radius: 0 20px 20px 0 !important;
    padding: 0 10px 0 8px !important;
    transform: translateX(0) !important;
  }
  .floating-socials-right .floating-social-btn {
    border-radius: 20px 0 0 20px !important;
    padding: 0 8px 0 10px !important;
    transform: translateX(0) !important;
  }
  .floating-social-icon {
    width: 20px !important;
    height: 20px !important;
  }
}