/* ═══════════════════════════════════════════════════════════════════
   PLOART — Targeted Mobile Fixes v4
   SAFE: No blanket selectors. No img/*/body overrides.
   Works WITH the Supabase dynamic CSS, not against it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Prevent horizontal scroll — minimal, safe ────────────────── */
html { overflow-x: hidden; }

/* ── 2. Portfolio filter scroll (only on portfolio page) ─────────── */
.portfolio-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start !important;
  margin-inline: -1rem;
  padding-inline: 1rem;
}
.portfolio-filters::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; white-space: nowrap; }

@media (min-width: 768px) {
  .portfolio-filters {
    flex-wrap: wrap !important;
    overflow-x: visible;
    justify-content: center !important;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ── 3. Portfolio grid: 2 cols on mobile, always-visible captions ── */
@media (max-width: 639px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .portfolio-card-caption {
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 12px 8px 8px !important;
  }
  .portfolio-card-caption h4 { font-size: 11px !important; }
  .portfolio-card-caption p { display: none !important; }
}

/* ── 4. Swiper slides — smaller on mobile ────────────────────────── */
@media (max-width: 639px) {
  .project-section-s3 .swiper-slide {
    width: 240px !important;
    height: 180px !important;
  }
  .project-section-s3 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}