/* =========================================
   MOBILE RESPONSIVE OVERHAUL
   Comprehensive mobile-first improvements
   Target: index, list, news, show pages
   ========================================= */

/* =========================================
   GLOBAL FIXES
   ========================================= */

/* Prevent horizontal scroll universally */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Ensure images never overflow */
img {
  max-width: 100%;
  height: auto;
}

/* =========================================
   BREAKPOINT: 1024px (Tablets & smaller desktops)
   ========================================= */
@media (max-width: 1024px) {
  /* Trust grid - 2 cols instead of forced 1 col */
  .trust-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* VIP tiers - 2 cols instead of 1 col at this size */
  .vip-tiers-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* Hero visual card max-width on tablet */
  .floating-glass-card {
    max-width: 380px;
  }

  /* Games grid - 3 cols still fine, reduce to 2 at this point */
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   BREAKPOINT: 768px (Mobile landscape & tablets)
   ========================================= */
@media (max-width: 768px) {

  /* ----------- HEADER ----------- */
  .header-container {
    padding: 0 var(--space-sm);
  }

  /* Hide the signup button in header on mobile (mobile bottom bar shows instead) */
  .header-auth .btn-signup {
    display: none;
  }

  /* ----------- HERO SECTION ----------- */
  .hero {
    padding: calc(var(--header-height) + 1rem) 0 var(--space-xl);
    min-height: auto;
    text-align: center;
  }

  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  .hero-text-content {
    order: 2;
    max-width: 100%;
    padding: 0;
  }

  .hero-visual {
    order: 1;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
    word-break: break-word;
    hyphens: auto;
  }

  .hero-text-content > p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: var(--space-md);
  }

  .badge {
    font-size: 0.7rem;
    padding: 8px 14px;
    letter-spacing: 0.1em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: var(--space-md);
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    padding-top: var(--space-sm);
  }

  .stat-item {
    flex: 1 1 calc(33% - var(--space-sm));
    min-width: 90px;
    text-align: center;
  }

  .stat-item h4 {
    font-size: 1.4rem;
  }

  .stat-item p {
    font-size: 0.7rem;
  }

  /* ----------- FLOATING GLASS CARD ----------- */
  .floating-glass-card {
    max-width: 100%;
    padding: var(--space-md);
    margin: 0 auto;
  }

  .jackpot-amount {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  /* ----------- CONTENT SECTIONS ----------- */
  .content-section {
    padding: var(--space-xl) 0;
  }

  .section-header-centered {
    margin-bottom: var(--space-lg);
  }

  /* ----------- TOURNAMENTS ----------- */
  .tournaments-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tournament-card.featured {
    order: -1;
  }

  .tourney-img {
    height: 180px;
  }

  .tourney-body {
    padding: var(--space-md);
  }

  .tourney-body h3 {
    font-size: 1.2rem;
  }

  .tourney-prize span {
    font-size: 1.1rem;
  }

  /* ----------- GAMES GRID ----------- */
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .game-card-img-wrap {
    height: 160px;
  }

  .game-card-overlay h3 {
    font-size: 1rem;
  }

  .btn-play-game {
    padding: 10px;
    font-size: 0.85rem;
  }

  /* ----------- STEPS / HOW IT WORKS ----------- */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .steps-grid::before {
    display: none;
  }

  .step-card {
    padding: var(--space-md);
  }

  /* ----------- TESTIMONIALS ----------- */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .testimonial-card.featured {
    order: -1;
  }

  .testimonial-text {
    font-size: 0.95rem;
  }

  /* ----------- STATS COUNTER ----------- */
  .stats-counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-counter {
    padding: var(--space-md);
  }

  .counter-number {
    font-size: 2rem;
  }

  .counter-icon {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }

  /* ----------- NEWS PREVIEW ----------- */
  .news-preview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .news-preview-card.large {
    grid-row: auto;
  }

  .news-preview-card.large img {
    height: 220px;
  }

  .news-preview-card img {
    height: 160px;
  }

  .news-preview-content h3 {
    font-size: 1.1rem;
  }

  .news-preview-card.large h3 {
    font-size: 1.3rem;
  }

  /* ----------- BETS TABLE ----------- */
  .bets-table-wrapper {
    margin: var(--space-md) 0;
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bets-table th,
  .bets-table td {
    padding: var(--space-sm);
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .hide-mobile {
    display: none !important;
  }

  /* ----------- VIP TIERS ----------- */
  .vip-tiers-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .vip-tier-horizontal {
    padding: var(--space-md);
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-md);
  }

  .vip-tier-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    flex-shrink: 0;
  }

  .vip-tier-info {
    flex: 1;
    min-width: 0;
  }

  .vip-perks li {
    justify-content: flex-start;
    font-size: 0.9rem;
    padding: 8px 0;
  }

  .vip-action {
    display: flex;
    justify-content: flex-start;
  }

  .vip-action a {
    width: auto;
    display: inline-flex;
  }

  /* ----------- WINNERS / HALL OF CHAMPIONS ----------- */
  .winners-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .winners-text {
    max-width: 100%;
    text-align: center;
  }

  .winners-text .section-title {
    text-align: center !important;
  }

  .total-paid-card {
    text-align: center;
  }

  .winner-testimonial {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .winner-av {
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* ----------- WHY CHOOSE ----------- */
  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .why-card {
    padding: var(--space-lg);
  }

  /* ----------- TRUST GRID ----------- */
  .trust-grid-v2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .trust-card-v2 {
    padding: var(--space-lg);
  }

  /* ----------- FAQ ----------- */
  .faq-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .faq-info {
    text-align: center;
  }

  .faq-info .section-title {
    text-align: center !important;
  }

  .faq-support-card {
    justify-content: center;
    flex-direction: row;
  }

  .faq-question {
    font-size: 1rem;
  }

  /* ----------- FOOTER SECTION ----------- */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  /* ----------- FOOTER REGISTER BANNER ----------- */
  .footer-register-banner {
    padding: var(--space-xl) 0;
  }

  .footer-register-banner h3 {
    font-size: clamp(1.4rem, 6vw, 2rem);
    padding: 0 var(--space-sm);
  }

  .footer-register-banner .btn-primary {
    width: calc(100% - 2rem);
    max-width: 320px;
  }

  /* ----------- CRYPTO STRIP ----------- */
  .crypto-track span {
    font-size: 0.85rem;
    gap: 8px;
  }

  .crypto-track {
    gap: var(--space-lg);
  }

  /* ----------- MOBILE BOTTOM BAR ----------- */
  .mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px 12px;
    gap: 10px;
    z-index: 1001;
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-subtle);
  }

  .mobile-bottom-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.95rem;
    min-height: 48px;
    font-family: var(--font-heading);
  }

  /* Body padding for the bottom bar */
  body {
    padding-bottom: 80px;
  }
}

/* =========================================
   BREAKPOINT: 600px (Small tablets / large phones)
   ========================================= */
@media (max-width: 600px) {
  /* Games - 2 cols on landscape phones */
  .games-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Stats - keep 2 cols */
  .stats-counter-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .stat-counter {
    padding: var(--space-sm);
  }
}

/* =========================================
   BREAKPOINT: 480px (Portrait phones)
   ========================================= */
@media (max-width: 480px) {
  :root {
    --header-height: 64px;
  }

  /* ----------- HERO ----------- */
  .hero {
    padding: calc(var(--header-height) + 0.75rem) 0 var(--space-lg);
  }

  .hero h1 {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .hero-visual {
    display: none; /* Hide on portrait phones to save vertical space */
  }

  .hero-stats {
    gap: var(--space-xs);
    padding-top: var(--space-xs);
  }

  .stat-item {
    flex: 1 1 calc(33% - 8px);
    min-width: 80px;
  }

  .stat-item h4 {
    font-size: 1.2rem;
  }

  .stat-item p {
    font-size: 0.65rem;
  }

  /* ----------- BADGE ----------- */
  .badge {
    font-size: 0.65rem;
    padding: 7px 12px;
    display: none; /* Hide on very small screens */
  }

  /* ----------- CONTENT SECTION ----------- */
  .content-section {
    padding: var(--space-lg) 0;
  }

  /* ----------- SECTION TITLES ----------- */
  .section-title {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    line-height: 1.2;
  }

  /* ----------- GAMES ----------- */
  .games-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .game-card-img-wrap {
    height: 160px;
  }

  /* ----------- STEPS ----------- */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .step-card {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .step-icon {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }

  /* ----------- TESTIMONIALS ----------- */
  .testimonial-card {
    padding: var(--space-md);
  }

  .testimonial-text {
    font-size: 0.9rem;
  }

  /* ----------- STAT COUNTERS ----------- */
  .stats-counter-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  .counter-number {
    font-size: 1.5rem;
  }

  .counter-label {
    font-size: 0.75rem;
  }

  /* ----------- VIP TIERS ----------- */
  .vip-tier-horizontal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .vip-perks li {
    justify-content: center;
  }

  .vip-action a {
    width: 100%;
    justify-content: center;
  }

  /* ----------- WINNER TESTIMONIALS ----------- */
  .winner-testimonial {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .winner-quote p {
    font-size: 0.9rem;
  }

  /* ----------- TRUST CARDS ----------- */
  .trust-card-v2 {
    padding: var(--space-md);
  }

  .trust-icon-wrap {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }

  .trust-content h3 {
    font-size: 1.1rem;
  }

  .trust-content p {
    font-size: 0.9rem;
  }

  /* ----------- WHY CARDS ----------- */
  .why-card {
    padding: var(--space-md);
  }

  .why-card h3 {
    font-size: 1.1rem;
  }

  .why-card p,
  .why-card li {
    font-size: 0.9rem;
  }

  /* ----------- FAQ ----------- */
  .faq-question {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .faq-answer p {
    font-size: 0.9rem;
  }

  .faq-support-card {
    flex-direction: column;
    text-align: center;
  }

  /* ----------- NEWS PREVIEW ----------- */
  .news-preview-card.large img,
  .news-preview-card img {
    height: 160px;
  }

  .news-preview-content {
    padding: var(--space-sm);
  }

  .news-preview-content h3 {
    font-size: 1rem;
  }

  .news-preview-card.large h3 {
    font-size: 1.1rem;
  }

  .news-preview-content p {
    font-size: 0.85rem;
  }

  /* ----------- TOURNEY CARDS ----------- */
  .tourney-tag {
    font-size: 0.65rem;
    padding: 6px 10px;
  }

  .tourney-img {
    height: 160px;
  }

  .tourney-body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .tourney-body h3 {
    font-size: 1.1rem;
  }

  /* ----------- PAID VALUE ----------- */
  .paid-val {
    font-size: 2rem;
  }

  /* ----------- BUTTONS ----------- */
  .btn-primary,
  .btn-secondary {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }

  /* ----------- PROVIDER LOGOS ----------- */
  .provider-logo {
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  /* ----------- MOBILE BOTTOM BAR SMALLER ----------- */
  .mobile-bottom-bar a {
    font-size: 0.875rem;
    padding: 10px 8px;
  }

  /* ----------- FOOTER ----------- */
  .footer-top {
    gap: var(--space-md);
  }

  footer, #main-footer {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  /* ----------- FOOTER REGISTER BANNER ----------- */
  .footer-register-banner h3 {
    font-size: clamp(1.2rem, 7vw, 1.6rem);
  }

  /* ----------- CONTAINER PADDING ----------- */
  .container {
    width: min(94%, var(--container-max));
  }
}

/* =========================================
   BREAKPOINT: 360px (Very small phones)
   ========================================= */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 1.5rem;
  }

  .stat-item h4 {
    font-size: 1.1rem;
  }

  .stat-item p {
    font-size: 0.6rem;
    letter-spacing: 0;
  }

  .counter-number {
    font-size: 1.3rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }

  .mobile-bottom-bar a {
    font-size: 0.8rem;
  }

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

/* =========================================
   RESOURCES PAGES (list, news, show)
   ========================================= */
@media (max-width: 768px) {

  /* Page container - account for mobile bottom bar */
  .page-container {
    padding-top: calc(var(--header-height) + 1rem);
  }

  /* Page hero padding */
  .page-hero {
    padding: var(--space-lg) 0 var(--space-xl);
    margin-bottom: var(--space-lg);
  }

  /* Page title size */
  .page-title,
  .landing-title,
  .article-title {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }

  /* Breadcrumb */
  .breadcrumb-nav {
    font-size: 0.75rem;
    padding: 8px 14px;
    gap: 8px;
  }

  /* Hero meta items */
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .hero-meta-item {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* Article body text */
  .article-body {
    font-size: 1rem;
    line-height: 1.8;
  }

  .article-body h2 {
    font-size: 1.5rem;
  }

  .article-body h3 {
    font-size: 1.2rem;
  }

  .article-body blockquote {
    font-size: 1rem;
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-lg) 0;
  }

  /* Article container */
  .article-container {
    padding: 0 var(--space-sm) var(--space-xl);
  }

  /* Article main visual */
  .article-main-visual {
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
  }

  /* News grid */
  .news-grid-glow {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .news-glow-img {
    height: 180px;
  }

  /* Pagination */
  .pagination {
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-btn {
    padding: 10px 18px;
    font-size: 0.8rem;
  }

  /* Ad wrapper */
  .ad-wrapper {
    margin-top: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: var(--space-md) 0 var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .page-title,
  .landing-title,
  .article-title {
    font-size: clamp(1.3rem, 7vw, 1.8rem);
  }

  .news-glow-img {
    height: 160px;
  }

  .news-glow-content h3 {
    font-size: 1rem;
  }

  .news-glow-content p {
    font-size: 0.875rem;
  }

  .news-card-glow {
    padding: var(--space-sm);
  }

  .article-body h2 {
    font-size: 1.3rem;
  }

  .article-body h3 {
    font-size: 1.1rem;
  }

  .page-btn {
    padding: 9px 14px;
    font-size: 0.75rem;
  }
}

/* =========================================
   SAFE AREA INSETS (Notched devices)
   ========================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-bottom-bar {
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
      height: auto;
    }

    body {
      padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    #main-header,
    header {
      padding-top: env(safe-area-inset-top);
    }
  }
}

/* =========================================
   LANDSCAPE ORIENTATION FIXES
   ========================================= */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + 0.5rem) 0 var(--space-lg);
  }

  .hero h1 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .hero-visual {
    display: none;
  }

  .hero-stats {
    flex-direction: row;
    justify-content: center;
  }

  .stat-item {
    flex: 0 1 auto;
  }

  .content-section {
    padding: var(--space-lg) 0;
  }
}