/**
 * SportsPulse - Responsive Styles
 * Mobile-first responsive design approach
 * @version 1.0.0
 */

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--orange);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* =============================================================================
   MOBILE FIRST BASE STYLES (< 576px)
   ============================================================================= */

/* Already defined in style.css */

/* =============================================================================
   SMALL DEVICES (≥ 576px) - Landscape Phones
   ============================================================================= */

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }

  .hero-main-card {
    height: 350px;
  }
}

/* =============================================================================
   MEDIUM DEVICES (≥ 768px) - Tablets
   ============================================================================= */

@media (min-width: 768px) {
  /* Top Bar */
  .top-bar__social {
    display: flex !important;
  }

  /* Hero Section */
  .hero-main-card {
    height: 400px;
  }

  /* Stats Bar */
  #stats-bar {
    display: block !important;
  }

  /* Section Padding */
  .section-pad {
    padding: 52px 0;
  }

  /* Sport Sections */
  .sport-section {
    padding: 48px 0;
  }

  /* Newsletter Banner */
  #newsletter-banner h2 {
    font-size: 2.5rem;
  }
}

/* =============================================================================
   LARGE DEVICES (≥ 992px) - Desktops
   ============================================================================= */

@media (min-width: 992px) {
  /* Navigation */
  .navbar-nav {
    flex-direction: row;
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* Hero Section */
  .hero-main-card {
    height: 420px;
  }

  /* Trending List */
  .trending-list li {
    padding: 16px 0;
  }

  /* Video Cards */
  .video-card:hover img {
    transform: scale(1.06);
  }
}

/* =============================================================================
   EXTRA LARGE DEVICES (≥ 1200px) - Large Desktops
   ============================================================================= */

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  /* Typography */
  .section-title {
    font-size: 1.5rem;
  }

  /* Hero Main Card */
  .hero-main-card .article-title {
    font-size: 1.8rem;
  }
}

/* =============================================================================
   XXL DEVICES (≥ 1400px) - Larger Desktops
   ============================================================================= */

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* =============================================================================
   MOBILE SPECIFIC ADJUSTMENTS
   ============================================================================= */

@media (max-width: 767px) {
  /* Hide elements on mobile */
  #stats-bar {
    display: none;
  }

  .top-bar__social {
    display: none;
  }

  /* Live Scores Bar - Mobile Optimizations */
  #live-scores-bar {
    padding-bottom: 8px;
  }

  .scores-bar-header {
    padding: 6px 0;
  }

  .scores-bar-title {
    font-size: 0.75rem;
  }

  .scroll-hint {
    display: none !important;
  }

  .scores-scroll-container {
    padding: 12px 0;
  }

  .score-card {
    min-width: 160px;
    padding: 10px 12px;
  }

  .league-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .team-name {
    font-size: 0.82rem;
  }

  .team-score {
    font-size: 1rem;
  }

  .team-score.winner {
    font-size: 1.1rem;
  }

  .game-status {
    font-size: 0.65rem;
    padding: 3px 6px;
  }

  /* Adjust sizing */
  .hero-main-card {
    height: 280px;
  }

  .hero-main-card .article-title {
    font-size: 1.2rem !important;
  }

  /* Section padding */
  .section-pad {
    padding: 36px 0;
  }

  #videos,
  #podcasts {
    padding: 36px 0;
  }

  #newsletter-banner {
    padding: 40px 0;
  }

  #newsletter-banner h2 {
    font-size: 1.6rem;
  }

  /* Footer */
  #footer {
    padding: 40px 0 20px;
  }

  /* Trending Numbers */
  .trending-num {
    font-size: 1.5rem;
    min-width: 28px;
  }

  /* Writer Cards */
  .writer-card {
    margin-bottom: 20px;
  }

  /* Back to Top Button */
  #backToTop {
    bottom: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  /* Hide non-essential elements */
  #topBar,
  #mainNav,
  #ticker-bar,
  #stats-bar,
  #newsletter-banner,
  #advertise,
  #footer,
  #backToTop,
  .top-bar,
  .navbar,
  .pod-play,
  .play-btn {
    display: none !important;
  }

  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  article {
    page-break-inside: avoid;
  }
}