/* ============================================
   SOJU88 — Shared Component CSS
   Common header/footer/nav for all pages
   ============================================ */

/* ── Icon Utility ── */
.icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon svg { width:1em; height:1em; display:block; }
.icon-xs { font-size:.85rem; }
.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; }

/* ── Card Image Placeholder with real aspect-ratio ── */
.card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, rgba(124,58,237,.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(124,58,237,.15);
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.card-img-wrap:hover img { transform: scale(1.05); }

.card-img-wrap .card-img-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(124,58,237,.6);
  font-size: 4rem;
  background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,.12), transparent 70%);
}
.card-img-wrap .card-label {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  font-family: 'JetBrains Mono', monospace;
  z-index: 1;
}

/* Shorter card image (reviews, news) */
.card-img-wrap-sm { aspect-ratio: unset; height: 160px; }
.card-img-wrap-news { aspect-ratio: unset; height: 190px; }

/* ── Badge Dot for live/hot status ── */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.status-dot--live { background: #10b981; animation: pulseDot 2s ease-in-out infinite; }
.status-dot--hot { background: #ef4444; }
.status-dot--new { background: #06b6d4; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ── Shared navigation overrides ── */
/* This ensures both sticky and fixed navbars work across all pages */
.site-header,
.navbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

/* ── Reading time icon ── */
.read-time-wrap { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; }
.read-time-wrap .icon { font-size:.9rem; color: #64748b; }

/* ── Rating stars SVG ── */
.star-svg { display:inline-flex; gap:2px; }
.star-svg .icon { font-size:.85rem; }
.star-svg .icon--full svg { fill: #f59e0b; stroke: #f59e0b; }
.star-svg .icon--half svg { fill: none; stroke: #f59e0b; }
.star-svg .icon--empty svg { fill: none; stroke: #64748b; }

/* ── Section decorative line label ── */
.section-label-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #9d5cf0; margin-bottom: 14px;
}
.section-label-line::before,
.section-label-line::after {
  content: ''; flex: 0 0 32px; height: 1px;
  background: linear-gradient(90deg, transparent, #7c3aed);
}
.section-label-line::after {
  background: linear-gradient(90deg, #7c3aed, transparent);
}

/* ── Mobile nav hamburger ── */
.hamburger, .nav-hamburger, .navbar__hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.hamburger span, .nav-hamburger span, .navbar__hamburger span { display:block; width:24px; height:2px; background: #f1f5f9; border-radius:2px; transition: all .3s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Footer shared layout ── */
.footer-grid-responsive {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 1100px) {
  .footer-grid-responsive { grid-template-columns: 1fr 1fr; }
  .footer-grid-responsive > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid-responsive { grid-template-columns: 1fr; }
  .footer-grid-responsive > *:first-child { grid-column: auto; }
}

/* ── Scroll to Top Button ── */
#scroll-top, .scroll-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all .3s cubic-bezier(.4,0,.2,1); z-index: 999;
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
#scroll-top.visible, .scroll-top.visible {
  opacity: 1; visibility: visible; transform: translateY(0);
}
#scroll-top:hover, .scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(124,58,237,.5);
}

/* ============================================
   FULL RESPONSIVE SYSTEM
   ============================================ */

/* iPad landscape & small desktop (900–1100px) */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .internal-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
}

/* iPad portrait (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 0 1.5rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { 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; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .newsletter-inner { flex-direction: column; gap: 2rem; }
  .newsletter-text, .newsletter-form { max-width: 100% !important; width: 100%; flex: none; }
  /* iPad: show hamburger */
  .main-nav, .navbar__nav, .nav-menu { display: none !important; }
  .hamburger, .navbar__hamburger, .nav-toggle { display: flex !important; }
  /* Content layouts */
  .content-grid, .news-layout__inner { grid-template-columns: 1fr !important; }
  .sidebar { display: none; }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .main-nav, .navbar__nav, .nav-menu { display: none !important; }
  .hamburger, .navbar__hamburger, .nav-toggle { display: flex !important; }
  .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, .hero-subtitle { max-width: 100%; text-align: center; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; padding: 16px !important; }
  .stat-divider { display: none !important; }
  .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-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .section { padding: 60px 0 !important; }
  .section-sm { padding: 44px 0 !important; }
  .section-header { margin-bottom: 36px; }
  .newsletter-inner { flex-direction: column; gap: 20px; }
  .newsletter-text, .newsletter-form { max-width: 100% !important; width: 100%; flex: none; }
  .newsletter-input-group { flex-direction: column; border-radius: 12px; }
  .newsletter-input { border-radius: 8px 8px 0 0; }
  .newsletter-btn { border-radius: 0 0 8px 8px; justify-content: center; }
  /* Layout stacks */
  .content-grid, .news-layout__inner { grid-template-columns: 1fr !important; }
  .sidebar { display: none; }
  /* Page hero */
  .page-hero { padding: 100px 0 44px !important; text-align: center; }
  .page-hero__stats { gap: 20px; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-visual { display: none; }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .internal-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
  h1, .hero-title, .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  h2, .section-title { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; }
  .btn { padding: 11px 18px; font-size: .86rem; }
  .author-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .author-card { padding: 18px; }
  .featured-article__body { padding: 20px; }
}

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

/* Touch: disable hover transforms */
@media (hover: none) {
  .card:hover, .glass-card:hover, .news-card:hover { transform: none !important; }
  .btn:hover { transform: none !important; }
}

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

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