/* =============================================================
   PakSpeaks — mobile.css
   Responsive overrides for tablet and mobile viewports
   ============================================================= */

/* -------------------------------------------------------------
   TABLET — up to 1024px
   ------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .sports-trending-wrap {
    grid-template-columns: 1fr 280px !important;
  }

  .hero-title {
    font-size: 2.2rem;
  }
}

/* -------------------------------------------------------------
   TABLET SMALL — 481px – 768px
   Two-column grids where appropriate
   ------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* -------------------------------------------------------------
   MOBILE — up to 768px
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Body padding to account for smaller ticker + navbar */
  body {
    padding-top: calc(56px + 34px);
  }

  /* Container */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Sections */
  .section {
    padding: 28px 0 !important;
  }

  /* --------------------------------------------------
     TICKER
     -------------------------------------------------- */
  .ticker-bar {
    height: 34px !important;
  }

  .ticker-label {
    padding: 0 8px !important;
    font-size: 0.62rem !important;
    min-width: 70px !important;
    gap: 6px !important;
  }

  .ticker-item {
    font-size: 0.72rem;
  }

  .ticker-dot {
    width: 6px;
    height: 6px;
  }

  /* --------------------------------------------------
     NAVBAR
     -------------------------------------------------- */
  .navbar {
    top: 34px !important;
    height: 56px !important;
  }

  .navbar-inner {
    height: 56px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }

  .nav-links {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }

  #navbar-auth-buttons {
    display: none !important;
  }

  .nav-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .user-name-nav {
    display: none !important;
  }

  .navbar-actions {
    gap: 4px !important;
  }

  /* --------------------------------------------------
     GRIDS — single column by default
     -------------------------------------------------- */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --------------------------------------------------
     HERO
     -------------------------------------------------- */
  .hero-card,
  #hero-container {
    height: 65vw !important;
    min-height: 240px !important;
    max-height: 380px !important;
  }

  .hero-content {
    padding: 20px !important;
  }

  .hero-title {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
  }

  .hero-meta {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* --------------------------------------------------
     SPORTS + TRENDING SPLIT
     -------------------------------------------------- */
  .sports-trending-wrap {
    display: block !important;
  }

  .sports-trending-wrap > div:nth-child(2) {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
  }

  /* --------------------------------------------------
     STARTUPS GRID
     -------------------------------------------------- */
  .startups-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* --------------------------------------------------
     ARTICLE CARDS
     -------------------------------------------------- */
  .card-image-wrap {
    height: 48vw !important;
    max-height: 200px !important;
  }

  .card-excerpt {
    display: none !important;
  }

  /* --------------------------------------------------
     SECTION HEADERS
     -------------------------------------------------- */
  .section-header {
    margin-bottom: 16px !important;
  }

  .section-title {
    font-size: 1.05rem !important;
  }

  /* --------------------------------------------------
     TRENDING WIDGET
     -------------------------------------------------- */
  .trending-number {
    font-size: 1.3rem;
  }

  /* --------------------------------------------------
     NEWSLETTER
     -------------------------------------------------- */
  .newsletter-section {
    padding: 28px 16px !important;
    border-radius: 14px !important;
  }

  .newsletter-title {
    font-size: 1.3rem !important;
  }

  .newsletter-subtitle {
    font-size: 0.9rem !important;
  }

  .newsletter-form {
    flex-direction: column !important;
  }

  .newsletter-form > * {
    width: 100% !important;
  }

  /* --------------------------------------------------
     FOOTER
     -------------------------------------------------- */
  .footer {
    padding-bottom: 80px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .footer-desc {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* --------------------------------------------------
     BOTTOM NAV — show on mobile
     -------------------------------------------------- */
  .bottom-nav {
    display: flex !important;
  }

  /* --------------------------------------------------
     MOBILE MENU OVERLAY
     -------------------------------------------------- */
  .mobile-menu-overlay {
    display: block !important;
  }

  /* --------------------------------------------------
     TOASTS — move to bottom on mobile
     -------------------------------------------------- */
  #toast-container {
    top: auto !important;
    bottom: 70px !important;
    left: 12px !important;
    right: 12px !important;
  }

  .toast {
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* --------------------------------------------------
     SEARCH OVERLAY
     -------------------------------------------------- */
  .search-overlay {
    padding: 60px 16px 24px !important;
  }

  .search-overlay-input {
    font-size: 1rem !important;
    padding: 14px 16px 14px 46px !important;
  }

  /* --------------------------------------------------
     DIVIDER
     -------------------------------------------------- */
  .divider {
    margin: 0 14px;
  }
}

/* -------------------------------------------------------------
   REDUCED MOTION — accessibility
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-content {
    animation: none !important;
  }

  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}