/* ============================================
   RESPONSIVE — MOBILE FIRST
   ============================================ */

/* ---- TABLET (768px+) ---- */
@media (min-width: 768px) {
  :root {
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
  }

  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-3-md { grid-template-columns: repeat(3, 1fr); }
}

/* ---- DESKTOP (1024px+) ---- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-links, .nav-actions { display: flex; }
  .grid-3-lg { grid-template-columns: repeat(3, 1fr); }
  .grid-4-lg { grid-template-columns: repeat(4, 1fr); }
}

/* ---- LARGE DESKTOP (1280px+) ---- */
@media (min-width: 1280px) {
  :root {
    --text-6xl: 5rem;
    --text-7xl: 6rem;
  }
}

/* ============================================
   MOBILE OVERRIDES (max-width)
   ============================================ */

/* < 1024px */
@media (max-width: 1023px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer-brand { grid-column: 1 / -1; }
}

/* < 768px */
@media (max-width: 767px) {
  :root {
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;
    --text-7xl: 3rem;
  }

  .section { padding: var(--space-16) 0; }
  .section-sm { padding: var(--space-12) 0; }
  .section-title { font-size: var(--text-3xl); }
  .section-header { margin-bottom: var(--space-10); }

  .container { padding: 0 var(--space-4); }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-banner { padding: var(--space-8) var(--space-6); }
  .cta-banner h2 { font-size: var(--text-2xl); }
  .cta-banner p { font-size: var(--text-base); }

  .cta-banner-actions { flex-direction: column; }
  .cta-banner-actions .btn { width: 100%; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

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

  .blog-hero-grid { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr !important; gap: var(--space-10) !important; }

  .article-layout { grid-template-columns: 1fr; }
  .toc { display: none; }

  .social-proof { flex-direction: column; align-items: flex-start; }

  .stat-box { padding: var(--space-5); }
  .stat-number { font-size: var(--text-4xl); }

  .faq-question { font-size: var(--text-sm); }

  .profiles-grid { grid-template-columns: repeat(2, 1fr); }

  .search-filter-row { flex-direction: column; }
}

/* < 480px */
@media (max-width: 479px) {
  .grid-4 { grid-template-columns: 1fr; }
  .profiles-grid { grid-template-columns: 1fr; }
}

/* ---- HERO SECTION RESPONSIVE ---- */

@media (max-width: 767px) {
  .hero { padding-top: 100px; min-height: auto; }
  .hero-title { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }
}

/* ---- BLOG POST RESPONSIVE ---- */

@media (max-width: 1023px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc {
    position: static;
    margin-bottom: var(--space-8);
  }
}

/* ---- NAVIGATION RESPONSIVE ---- */

@media (max-width: 1023px) {
  .mobile-menu { display: flex; transform: translateX(100%); }
  .mobile-menu.open { transform: translateX(0); }
}

/* ---- TOUCH OPTIMIZATIONS ---- */

@media (hover: none) {
  .card:hover { transform: none; }
  .blog-card:hover { transform: none; }
  .profile-card:hover img { transform: none; }
  .btn-primary:hover { transform: none; }
}

/* ---- PRINT ---- */

@media print {
  .site-header,
  .site-footer,
  .toc,
  .cta-banner { display: none; }

  body { background: #fff; color: #000; }
}

/* ============================================
   COMMUNITY / LANDING PAGE GRIDS
   ============================================ */

/* .community-grid — 2-col split layouts used site-wide */
@media (max-width: 767px) {
  .community-grid {
    grid-template-columns: 1fr !important;
  }

  /* .content-grid-2 — inner 2-col comparison/info grids */
  .content-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* 4-col stats → 2-col on mobile */
  .stats-4-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Blog header search row */
  .blog-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-6) !important;
  }

  .blog-header-search {
    width: 100% !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }

  /* Paypig hero — reduce extreme min-height */
  .paypig-hero-section {
    min-height: auto !important;
  }

  .paypig-hero-section .container {
    padding-bottom: var(--space-12) !important;
  }

  /* Hero CTA button groups — full width on small screens */
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* 4-col stats → 1-col on tiny screens */
@media (max-width: 479px) {
  .stats-4-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   PROFILE CARDS — MOBILE HORIZONTAL LAYOUT
   ============================================
   On desktop: portrait 3/4 card with bottom overlay gradient.
   On mobile: horizontal list row — thumbnail left, info right.
   Eliminates the cramped text-over-image problem on small screens.
   ============================================ */

@media (max-width: 767px) {

  /* Grid: single column list */
  .profiles-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  /* Card: horizontal flex row, fixed height */
  .profile-card {
    aspect-ratio: unset !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    height: 96px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }

  .profile-card:hover {
    border-color: var(--color-border-hover) !important;
    box-shadow: 0 0 20px rgba(141, 60, 255, 0.1);
  }

  /* Thumbnail: square crop on the left */
  .profile-card img {
    width: 96px !important;
    height: 96px !important;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0 !important;
  }

  /* Info area: static, takes remaining width */
  .profile-card-overlay {
    position: static !important;
    background: transparent !important;
    padding: var(--space-3) var(--space-4) !important;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0; /* prevent text overflow */
  }

  /* Name */
  .profile-card-info h3 {
    font-size: var(--text-base) !important;
    font-weight: 700;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Location / type tags */
  .profile-card-info p {
    font-size: 11px !important;
    margin-top: 2px !important;
    line-height: 1.4;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Online indicator */
  .profile-card-online {
    font-size: 10px !important;
    margin-top: 4px !important;
  }

  .profile-card-online::before {
    width: 5px;
    height: 5px;
  }

  /* Badge: reposition to top-right corner of info area */
  .profile-card-badge {
    top: var(--space-3) !important;
    right: var(--space-3) !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============================================
   CONTACT PAGE — MOBILE FIXES
   ============================================ */

@media (max-width: 767px) {
  /* Reduce form card padding so content isn't squeezed */
  .contact-form-card {
    padding: var(--space-6) !important;
  }

  /* Hero section top padding — less aggressive on mobile */
  .contact-hero {
    padding-top: 110px !important;
    padding-bottom: var(--space-10) !important;
  }
}