/* ============================================
   SOJU88 — Global Responsive + Icon CSS
   Covers: Desktop, iPad (768-1024px), Mobile
   ============================================ */

/* ── Icon Base Styles ── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  width: 1em;
  height: 1em;
  display: block;
}
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }
.icon-2xl { font-size: 2.5rem; }
.icon-3xl { font-size: 3.5rem; }
.icon-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

/* Card image icon wrapper */
.card-icon-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-card-hover, #1a1a2e) 0%, rgba(124,58,237,.12) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border, rgba(124,58,237,.2));
}
.card-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,.1), transparent 70%);
}
.card-icon-wrap .icon {
  position: relative;
  z-index: 1;
  font-size: 4rem;
  color: var(--color-primary-light, #9d63f5);
  opacity: .85;
  filter: drop-shadow(0 0 16px rgba(124,58,237,.4));
}
.card-icon-wrap .card-label {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  font-family: var(--font-mono, monospace);
  z-index: 1;
}

/* Card image wrap for shorter cards */
.card-icon-wrap-sm {
  height: 140px;
  aspect-ratio: unset;
}
.card-icon-wrap-news {
  height: 180px;
  aspect-ratio: unset;
}

/* ── Section Label SVG dot ── */
.section-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary, #7c3aed);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Scroll to Top Arrow ── */
#scroll-top .icon,
.scroll-top .icon {
  font-size: 1.1rem;
  color: #fff;
}

/* ==========================================
   GLOBAL RESPONSIVE BREAKPOINTS
   ========================================== */

/* Desktop (> 1024px) — default styles in style.css */

/* ── Large Tablet / Small Laptop (900px – 1100px) ── */
@media (max-width: 1100px) {
  .internal-links-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ── iPad / Tablet (768px – 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trending-reviews-grid {
    grid-template-columns: 1fr !important;
  }
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .authors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .newsletter-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .newsletter-text,
  .newsletter-form {
    max-width: 100%;
    flex: none;
    width: 100%;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-content {
    max-width: 100%;
  }
  /* iPad nav: show hamburger */
  .main-nav { display: none !important; }
  .hamburger { display: flex !important; }
}

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {
  /* Nav */
  .main-nav { display: none !important; }
  .hamburger { display: flex !important; }

  /* Hero */
  .hero {
    padding: 80px 0 60px !important;
    min-height: auto !important;
  }
  .hero-content { text-align: center; }
  .hero-badge { margin: 0 auto 20px; display: inline-flex; }
  .hero-desc { max-width: 100%; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 20px;
  }
  .stat-divider { display: none; }

  /* Grids */
  .grid-3,
  .grid-2,
  .grid-4,
  .news-grid,
  .reviews-grid { grid-template-columns: 1fr !important; }
  .trending-reviews-grid { grid-template-columns: 1fr !important; }
  .authors-grid { grid-template-columns: 1fr !important; }
  .internal-links-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }

  /* Sections */
  .section { padding: 64px 0 !important; }
  .section-sm { padding: 48px 0 !important; }
  .section-header { margin-bottom: 40px; }

  /* Newsletter */
  .newsletter-inner { flex-direction: column; gap: 24px; }
  .newsletter-text, .newsletter-form { max-width: 100%; width: 100%; }
  .newsletter-input-group { flex-direction: column; }
  .newsletter-input { border-radius: 8px 8px 0 0; }
  .newsletter-btn { border-radius: 0 0 8px 8px; text-align: center; }

  /* Cards */
  .card-icon-wrap { height: 180px; aspect-ratio: unset; }

  /* Buttons */
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Small Mobile ≤ 480px ── */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .internal-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero h1, .hero-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .section-title, h2.section-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  .btn { padding: 12px 20px; font-size: .87rem; }
  .author-card { padding: 20px; }
  .author-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Extra Small ≤ 360px ── */
@media (max-width: 360px) {
  .internal-links-grid { grid-template-columns: 1fr !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── Touch device optimizations ── */
@media (hover: none) {
  .card:hover { transform: none; }
  .glass-card:hover { transform: none; }
  .btn:hover { transform: none; }
  .author-social-link:hover { background: var(--accent-glow, rgba(124,58,237,.35)); color: var(--accent-light, #9d5cf0); }
}

/* ── Accessibility: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Large desktop ≥ 1440px ── */
@media (min-width: 1440px) {
  :root { --container-max: 1380px; }
}