/* ==========================================================================
   CC Games — mobile.css
   Loaded last. Only applies below 768px. Does NOT affect desktop.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Header / Nav ─────────────────────────────────────────────────────── */
  .header-logo {
    height: 60px;
  }

  .nav-item {
    font-size: 18px !important;
    margin: 0 10px !important;
  }

  .nav-menu .nav-item:first-child { margin-left: 0 !important; }
  .nav-menu .nav-item:last-child  { margin-right: 0 !important; }

  /* ── Stat boxes — stack vertically, full width ────────────────────────── */
  .stats-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 0;
  }

  .stat-box {
    width: 90% !important;
    height: 160px !important;
    margin: 8px 0 !important;
  }

  .stat-number {
    font-size: 36px !important;
  }

  .stat-text {
    font-size: 16px !important;
  }

  /* ── Section headings ─────────────────────────────────────────────────── */
  .section-title {
    font-size: 36px !important;
    margin-top: 30px !important;
  }

  .section-description {
    font-size: 16px !important;
    margin-top: -10px !important;
  }

  /* ── Social media buttons block ──────────────────────────────────────── */
  .social-media-buttons {
    max-width: 95% !important;
    margin: 16px auto !important;
    padding: 16px 12px !important;
  }

  .social-media-buttons h2 {
    font-size: 26px !important;
  }

  .button-container {
    flex-direction: column;
    align-items: center;
  }

  /* ── Slideshow — show only active slide on mobile ─────────────────────── */
  .slideshow-container {
    max-width: 95% !important;
    overflow: hidden !important;
  }

  .slides-wrapper {
    transform: none !important;  /* Override JS translateX */
    justify-content: center !important;
  }

  .slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    min-height: unset !important;
    margin: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
    transform: none !important;
  }

  /* Wrapper needs relative positioning to contain absolute slides */
  .slides-wrapper {
    position: relative !important;
    /* Height set by the active slide */
    min-height: 200px;
  }

  .slide.active {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .slide-description {
    font-size: 16px !important;
  }

  /* ── Recent blogs section ─────────────────────────────────────────────── */
  .latest-blog-section {
    max-width: 95% !important;
    padding: 12px !important;
  }

  .latest-blog-title {
    font-size: 22px !important;
    padding: 5px 14px !important;
  }

  .latest-blog-body {
    flex-direction: column;
    padding: 12px !important;
  }

  .blog-thumbnail {
    margin-right: 0 !important;
    margin-bottom: 12px;
  }

  .blog-thumbnail img {
    width: 100% !important;
    height: auto !important;
  }

  .blog-post-title {
    font-size: 16px !important;
  }

  /* ── Blog card grid ───────────────────────────────────────────────────── */
  .blog-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .blogs-page-header h1 {
    font-size: 30px !important;
  }

  .blogs-page-header p {
    font-size: 15px !important;
  }

  /* ── Single blog post ─────────────────────────────────────────────────── */
  .post-page {
    padding: 20px 16px 60px !important;
  }

  .post-game-bar {
    flex-direction: column;
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  .post-play-btn {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }

  /* ── Games page grid ──────────────────────────────────────────────────── */
  .games-page-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px 40px !important;
  }

  /* ── Games page heading ───────────────────────────────────────────────── */
  .games-page-header {
    padding: 0 16px !important;
  }

  /* ── About page ───────────────────────────────────────────────────────── */
  .content {
    max-width: 95% !important;
    padding: 12px !important;
  }

  /* ── Contact form ─────────────────────────────────────────────────────── */
  .contact-form-container {
    max-width: 95% !important;
    padding: 16px 12px !important;
  }

  .form-group-names {
    flex-direction: column;
  }

  .name-field {
    width: 100% !important;
  }

  /* ── Footer ───────────────────────────────────────────────────────────── */
  .footer-nav {
    flex-direction: column;
    gap: 10px !important;
  }

  /* ── General padding so nothing touches screen edges ─────────────────── */
  .section-info {
    padding: 0 16px;
  }
}