/* =====================================================
   PanekaGamer — Mobile + Theme Fixes v7
   ===================================================== */

/* --------------------------------------------------
   FEATURED POST HERO — stacked layout on mobile
   Image on top, solid text panel below
   -------------------------------------------------- */
@media (max-width: 767px) {

  /* Card: column flex */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl {
    display: flex !important;
    flex-direction: column !important;
    min-height: unset !important;
  }

  /* Image: capped at 200px, full width, cover crop */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl img.aspect-\[21\/8\],
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl div.aspect-\[21\/8\] {
    aspect-ratio: unset !important;
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  /* Hide the full-bleed gradient overlay — not needed in stacked mode */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl > .absolute.inset-0 {
    display: none !important;
  }

  /* Text panel: pull out of absolute, solid dark background */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl > .absolute.bottom-0.left-0 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    background: #0f1117 !important;
    padding: 0.85rem 1rem 1rem !important;
    z-index: 1 !important;
  }

  /* Title */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl h1 {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Show 2-line excerpt */
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl p.text-gray-300,
  .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl p.text-gray-400 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.78rem !important;
    margin-bottom: 0.6rem !important;
    color: #9ca3af !important;
  }

  /* Breathing room below navbar */
  .container.mx-auto.px-4.py-8,
  .container.mx-auto.px-4.py-8.max-w-7xl {
    padding-top: 2rem !important;
  }
}

/* --------------------------------------------------
   FEATURED POST — light theme overrides
   -------------------------------------------------- */
[data-theme="light"] .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl > .absolute.bottom-0.left-0,
[data-theme="light"] .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl > .relative.bottom-auto.left-auto {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
}

[data-theme="light"] .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl h1 {
  color: #111827 !important;
}

[data-theme="light"] .mb-12.relative.group.cursor-pointer.overflow-hidden.rounded-xl p.text-gray-300 {
  color: #6b7280 !important;
}

/* --------------------------------------------------
   BLOG CONTENT — light mode prose fix
   -------------------------------------------------- */
[data-theme="light"] .prose-invert,
[data-theme="light"] .prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #e8380d;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #4b5563;
  --tw-prose-bullets: #9ca3af;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e8380d;
  --tw-prose-captions: #6b7280;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
}

[data-theme="light"] .prose-invert :where(p):not(:where([class~="not-prose"] *)),
[data-theme="light"] .prose-invert :where(li):not(:where([class~="not-prose"] *)),
[data-theme="light"] .prose-invert :where(td):not(:where([class~="not-prose"] *)),
[data-theme="light"] .prose-invert :where(th):not(:where([class~="not-prose"] *)) {
  color: #374151 !important;
}

[data-theme="light"] .prose-invert :where(h1,h2,h3,h4,h5,h6):not(:where([class~="not-prose"] *)) {
  color: #111827 !important;
}

[data-theme="light"] .prose-invert :where(strong,b):not(:where([class~="not-prose"] *)) {
  color: #111827 !important;
}

[data-theme="light"] .prose-invert :where(blockquote):not(:where([class~="not-prose"] *)) {
  color: #374151 !important;
  border-left-color: #e8380d !important;
}

[data-theme="light"] .prose-invert :where(a):not(:where([class~="not-prose"] *)) {
  color: #e8380d !important;
}

[data-theme="light"] .prose-invert :where(code):not(:where([class~="not-prose"] *)) {
  color: #111827 !important;
  background: #f3f4f6;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

[data-theme="light"] .prose-invert :where(hr):not(:where([class~="not-prose"] *)) {
  border-color: #e5e7eb !important;
}

[data-theme="light"] article .text-white { color: #111827 !important; }
[data-theme="light"] article .text-gray-100 { color: #1f2937 !important; }
[data-theme="light"] article .text-gray-200 { color: #374151 !important; }
[data-theme="light"] article .text-gray-300 { color: #374151 !important; }
[data-theme="light"] article .text-gray-400 { color: #4b5563 !important; }

/* --------------------------------------------------
   NEWSLETTER POPUP — compact on mobile
   -------------------------------------------------- */
@media (max-width: 639px) {
  .z-\[100\] > div {
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 0 0.5rem !important;
  }
  .z-\[100\] .p-6 { padding: 1rem !important; }
  .z-\[100\] h2, .z-\[100\] h3 { font-size: 1rem !important; line-height: 1.3 !important; }
  .z-\[100\] p { font-size: 0.8rem !important; line-height: 1.4 !important; }

  input[type="email"], input[type="text"],
  input[type="search"], select, textarea { font-size: 16px !important; }
}

/* ── Download Button ─────────────────── */
.pg-download-wrap {
  margin: 24px 0;
  text-align: center;
}
.pg-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff !important;
  text-decoration: none !important;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(59,130,246,.35);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .2px;
}
.pg-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(59,130,246,.45);
}
.pg-download-btn:active {
  transform: translateY(0);
}