/* ============================================================
   OLIMPO.LINK — responsive.css (Lote KK)
   Unified responsive rules for the entire CMS.
   Loaded AFTER public-site.css so it wins on conflicts.
   ============================================================ */

/* ---------- Global normalizations ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, iframe, embed, object, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Touch target + iOS no-zoom on focus */
@media (pointer: coarse) {
  button, a.btn, a.btn-primary, a.btn-soft, a.btn-secondary, .btn, input[type=submit], input[type=button] {
    min-height: 44px;
  }
}
@media (max-width: 768px) {
  input[type=text], input[type=email], input[type=url], input[type=search], input[type=tel],
  input[type=number], input[type=password], input[type=date], input[type=datetime-local],
  input[type=time], input[type=file], select, textarea {
    font-size: 16px !important;
  }
}

/* ---------- Container fluid ---------- */
.site-shell, .mx-auto.container, .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.site-shell { max-width: 1280px; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) { .site-shell { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1400px) { .site-shell { max-width: 1360px; } }

/* ---------- Breakpoints overrides ---------- */
@media (max-width: 1024px) {
  .home-hero-shell { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .profile-grid, .prof-grid { grid-template-columns: 1fr !important; }
  .content-layout, .feature-grid, .listing-grid, .doc-grid,
  .mini-card-grid, .metric-grid, .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .prof-hero { grid-template-columns: 1fr !important; text-align: center; gap: 1rem; }
  .prof-hero .prof-avatar { margin: 0 auto; }
  .prof-cta { align-items: center !important; }
  .prof-social { justify-content: center !important; }
}

@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.2; }
  h2 { font-size: clamp(1.25rem, 4vw, 1.6rem) !important; }
  h3 { font-size: clamp(1.05rem, 3.5vw, 1.3rem) !important; }
  .home-search-title { font-size: clamp(1.6rem, 5vw, 2rem) !important; line-height: 1.1 !important; }

  /* Panels */
  .panel-card, .panel-card.pad,
  .prof-hero, .prof-section, .donate-hero, .donate-section,
  section.panel-card { padding: 1.1rem !important; border-radius: 16px !important; }

  /* Hero tweaks */
  .home-search-panel { padding: 1.3rem 1rem !important; border-radius: 20px !important; }
  .home-search-input { min-height: 3.2rem !important; padding: .9rem 1.1rem !important; }
  .home-search-submit { position: static !important; width: 100% !important; margin-top: .6rem !important; }
  .home-signal-card { padding: 1rem !important; border-radius: 14px !important; }
  .home-primary-actions { flex-direction: column; }
  .home-primary-actions .btn-primary, .home-primary-actions .btn-secondary { width: 100%; justify-content: center; }

  /* Grids cascade */
  .stat-grid, .metric-grid, .listing-grid, .feature-grid,
  .doc-grid, .mini-card-grid, .profile-grid, .prof-grid,
  .prof-metrics, .pay-method-grid, .prof-product-grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }
  .prof-metrics { grid-template-columns: repeat(2, 1fr) !important; }

  /* Forms collapse to single col */
  form[onsubmit], .admin-form,
  form.admin-form[style*="grid"],
  form[class*="internal-form"],
  .internal-form, .ps-grid {
    grid-template-columns: 1fr !important;
  }

  /* View_link specific (Tailwind-heavy file) */
  body .grid, body .lg\\:grid-cols-12, body [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
  }
  .mx-auto.w-\\[min\\(1200px\\,calc\\(100\\%-3rem\\)\\)\\],
  .mx-auto[class*="min(1200"] {
    width: calc(100% - 1.5rem) !important;
  }

  /* Admin pages */
  .admin-main-content { padding: .9rem !important; }
  .admin-card { padding: 1rem !important; border-radius: 14px !important; }
  .admin-table { font-size: .82rem; }
  .admin-table th, .admin-table td { padding: .5rem !important; }
  .btn-admin-primary, .btn-ghost, .btn, .btn-sm { padding: .6rem .9rem !important; font-size: .88rem !important; }
  .stat-card { padding: .8rem !important; gap: .5rem !important; grid-template-columns: auto 1fr !important; }
  .stat-card > span.badge { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }

  /* Modals */
  .modal-content, .video-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    padding: 1.1rem !important;
  }
  .prose-block img { border-radius: 10px; }

  /* Forum threads */
  .agora-card, .thread-card { padding: 1rem !important; }

  /* Tables horizontally scroll */
  .table-responsive, .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Profile-section in index (logged-in user panel) */
  #profile-section .grid.grid-cols-1.md\\:grid-cols-2,
  #profile-section .grid.grid-cols-1.xl\\:grid-cols-2,
  #profile-section .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  #profile-section { padding: 1.1rem !important; }
}

@media (max-width: 480px) {
  .site-shell { padding-left: .75rem; padding-right: .75rem; }
  .prof-avatar { width: 88px !important; height: 88px !important; }
  .prof-metrics { grid-template-columns: 1fr 1fr !important; }
  .prof-metric strong { font-size: 1.1rem !important; }
  .prof-metric span { font-size: .65rem !important; }
  .prof-hero { padding: 1rem !important; border-radius: 14px !important; }
  .prof-info h1 { font-size: 1.25rem !important; }
  .home-search-panel { padding: 1.1rem .9rem !important; }
  .home-search-title { font-size: 1.55rem !important; }
  .home-search-lead { font-size: .92rem !important; }
  .panel-card, .panel-card.pad { padding: 1rem !important; border-radius: 14px !important; }
  .video-modal-close { top: .3rem !important; right: .3rem !important; width: 30px !important; height: 30px !important; font-size: 1.1rem !important; }
}

/* Keyboard focus rings everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(255,106,0,.35) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* Skip link for a11y */
.skip-to-content {
  position: absolute; left: -9999px; top: 0;
  background: #ff6a00; color: #fff; padding: .6rem 1rem; z-index: 9999; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-to-content:focus { left: 0; }

/* Print-friendly */
@media print {
  nav, header, footer, .modal, .toast-container, .site-footer, .site-header,
  .home-signal-rail, .home-search-bar, .home-primary-actions { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .panel-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

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