/* =============================================================================
 * Tiger Art Shop — Responsive Layout System
 * css/responsive.css
 *
 * Breakpoints:
 *   2xl  ≥ 1600px   Ultra-wide — extra columns, wider containers
 *   xl   ≥ 1280px   Desktop standard (base design target)
 *   lg   ≥ 1024px   Small desktop / large tablet landscape
 *   md   ≥ 768px    Tablet portrait
 *   sm   ≥ 480px    Large phone landscape
 *   xs   < 480px    Phone portrait (narrowest)
 *
 * Strategy:
 *   - All containers use clamp() for fluid horizontal padding
 *   - Grids use auto-fill/auto-fit + minmax() wherever possible
 *   - Fixed column counts collapse gracefully at each breakpoint
 *   - Sidebars hide/show via transform rather than display:none so
 *     transitions are smooth
 *   - Tables gain horizontal scroll wrappers on small screens
 *   - Admin panels collapse sidebar to a bottom nav drawer on mobile
 * ============================================================================= */

/* ── 0. Foundation — fluid container padding ───────────────────────────────── */

.container,
.header-main,
.cat-nav-inner,
.main-wrap,
.footer-inner,
.nav-inner {
  width: 100%;
  box-sizing: border-box;
  padding-left:  clamp(12px, 3vw, 28px);
  padding-right: clamp(12px, 3vw, 28px);
}

/* Prevent any element ever overflowing its parent horizontally */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed { max-width: 100%; }

/* ── 1. Fluid type scale ────────────────────────────────────────────────────── */

/* Large display headings scale down on narrow screens */
.hero-h1,
.overview-heading,
.hero-heading {
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.15;
}

/* ── 2. HOMEPAGE (index.php) ────────────────────────────────────────────────── */

/* Max width for the main content — grows to fill wide screens */
.main-wrap { max-width: min(1600px, 100%); }

/* Sidebar + content split */
.side-main {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
}

/* Category grid — fluid columns */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

/* Product grid — fluid columns */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
}

/* Stalls / stores grid */
.stalls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Promo tiles */
.promo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

/* Hero banner */
.hero-banner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
}

/* How it works */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

/* Sell section */
.sell-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Trust bar */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Plans */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

/* Carousel item count scales with viewport */
.carousel-item {
  flex: 0 0 clamp(140px, calc(100% / 6), 220px);
}

/* ── 3. STOREFRONT (storefront.php) ─────────────────────────────────────────── */

.hero-inner {
  display: grid;
  grid-template-columns: 1fr clamp(240px, 30vw, 380px);
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
}

/* Product grid already uses auto-fill minmax — inherits from above */

.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
}

/* ── 4. PRODUCT DETAIL (product-detail.php) ─────────────────────────────────── */

.product-layout {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 38vw, 480px);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* ── 5. SELLER ADMIN dashboard (seller-admin/index.php) ─────────────────────── */

/* Sidebar — fixed on desktop, slide-over on mobile */
.sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dashboard stats row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* Revenue chart + top items row */
.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

/* Settings two-column */
.settings-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}

/* ── 6. MAIN ADMIN dashboard (main-admin/index.php) ──────────────────────────── */

.platform-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

/* ── 7. FORM rows ───────────────────────────────────────────────────────────── */

.form-row.c2 { grid-template-columns: 1fr 1fr; }
.form-row.c3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── 8. Tables — horizontal scroll wrapper on small screens ─────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 520px; }


/* =============================================================================
 * BREAKPOINT: 2xl — ≥ 1600px  (ultra-wide monitors, 4K screens)
 * Add extra content width, more grid columns
 * ============================================================================= */
@media (min-width: 1600px) {
  .main-wrap,
  .header-main,
  .cat-nav-inner,
  .footer-inner { max-width: 1800px; }

  /* More product columns on wide displays */
  .prod-grid    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .cat-grid     { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .stalls-grid  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* Wider hero image panel */
  .hero-inner   { grid-template-columns: 1fr 460px; }
  .product-layout { grid-template-columns: 1fr 520px; }

  /* Footer — more breathing room */
  .footer-grid  { gap: 48px; }

  /* Admin: wider stat cards */
  .platform-stats { grid-template-columns: repeat(5, 1fr); }
  .stats-grid     { grid-template-columns: repeat(4, 1fr); }

  /* Carousel shows more items */
  .carousel-item  { flex: 0 0 calc(100% / 8); }
}

/* =============================================================================
 * BREAKPOINT: lg — < 1280px  (small laptop, large tablet landscape)
 * ============================================================================= */
@media (max-width: 1279px) {
  /* Collapse sidebar + main layout */
  .side-main { grid-template-columns: 1fr; }
  .sidebar   { display: none; } /* index.php left sidebar */

  /* Narrower hero image column */
  .hero-inner       { grid-template-columns: 1fr 280px; gap: 28px; }
  .product-layout   { grid-template-columns: 1fr 340px; gap: 32px; }

  /* Admin sidebar collapses */
  :root { --sidebar: 220px; }

  /* 4 product columns max */
  .prod-grid    { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .carousel-item{ flex: 0 0 calc(100% / 5); }

  /* Two-col admin panels stack to single col */
  .chart-row    { grid-template-columns: 1fr; }
  .two-col      { grid-template-columns: 1fr; }
}

/* =============================================================================
 * BREAKPOINT: md — < 1024px  (tablet portrait, large phone landscape)
 * ============================================================================= */
@media (max-width: 1023px) {
  /* ── Homepage ── */
  .hero-banner   { grid-template-columns: 1fr; }
  .hero-side     { display: none; }
  .promo-tiles   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .cat-grid      { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .prod-grid     { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .stalls-grid   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .hiw-grid      { grid-template-columns: repeat(2, 1fr); }
  .sell-section  { grid-template-columns: repeat(2, 1fr); }
  .trust-bar     { grid-template-columns: repeat(2, 1fr); }
  .plans-grid    { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
  .carousel-item { flex: 0 0 calc(100% / 4); }

  /* ── Storefront ── */
  .hero-inner    { grid-template-columns: 1fr; gap: 24px; }
  .about-strip   { grid-template-columns: 1fr; }
  .reviews-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* ── Product detail ── */
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .related-grid   { grid-template-columns: repeat(3, 1fr); }

  /* ── Admin dashboards ── */
  :root { --sidebar: 200px; }
  .platform-stats { grid-template-columns: repeat(3, 1fr); }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .settings-grid  { grid-template-columns: 1fr; }
  .chart-row      { grid-template-columns: 1fr; }
  .two-col        { grid-template-columns: 1fr; }
  .form-row.c3    { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
 * BREAKPOINT: sm — < 768px  (tablet portrait / large phone)
 * ============================================================================= */
@media (max-width: 767px) {
  /* ── Global ── */
  h1, .hero-h1 { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* ── Homepage ── */
  .search-cat    { display: none; }
  .logo-text     { font-size: 16px; }
  .cat-grid      { grid-template-columns: repeat(3, 1fr); }
  .prod-grid     { grid-template-columns: repeat(2, 1fr); }
  .stalls-grid   { grid-template-columns: repeat(2, 1fr); }
  .promo-tiles   { grid-template-columns: repeat(2, 1fr); }
  .sell-section  { grid-template-columns: 1fr; }
  .hiw-grid      { grid-template-columns: repeat(2, 1fr); }
  .trust-bar     { grid-template-columns: repeat(2, 1fr); }
  .plans-grid    { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .carousel-item { flex: 0 0 calc(100% / 3); }

  /* ── Storefront ── */
  .reviews-grid  { grid-template-columns: 1fr; }
  .footer-inner  { grid-template-columns: 1fr; }

  /* ── Product detail ── */
  .related-grid  { grid-template-columns: repeat(2, 1fr); }
  .details-grid  { grid-template-columns: 1fr; }

  /* ── Admin dashboards: collapse sidebar to drawer ── */
  .main          { margin-left: 0 !important; }
  .sidebar {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    z-index: 100 !important;
    padding: 0 !important;
  }
  .sb-brand, .sb-bottom, .sb-section { display: none !important; }
  .sb-nav {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .sb-link {
    flex: 1 !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 10px 6px !important;
    font-size: 9px !important;
    min-width: 56px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .sb-link .icon { font-size: 18px !important; }
  .sb-badge { display: none !important; }
  .mode-pill { display: none !important; }

  /* Push content above the bottom nav */
  .main { padding-bottom: 70px !important; }
  .content { padding: 16px !important; }

  /* Topbar compact */
  .topbar { height: 50px !important; padding: 0 14px !important; }
  .topbar-title { font-size: 16px !important; }
  .topbar-mode-badge { display: none !important; }

  /* Platform stats full width */
  .platform-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr) !important; }

  /* Form rows collapse */
  .form-row.c2, .form-row.c3 { grid-template-columns: 1fr !important; }

  /* Modals full screen */
  .modal-bg { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Admin login card */
  .wrap { padding: 0 12px !important; }
  .card { padding: 24px 20px !important; }

  /* Tables: hide less important columns */
  .table-wrap table th:nth-child(n+5),
  .table-wrap table td:nth-child(n+5) { display: none; }
}

/* =============================================================================
 * BREAKPOINT: xs — < 480px  (phone portrait, smallest)
 * ============================================================================= */
@media (max-width: 479px) {
  /* ── Homepage ── */
  .cat-grid      { grid-template-columns: repeat(3, 1fr); }
  .prod-grid     { grid-template-columns: repeat(2, 1fr); }
  .stalls-grid   { grid-template-columns: 1fr 1fr; }
  .promo-tiles   { grid-template-columns: 1fr 1fr; }
  .trust-bar     { grid-template-columns: 1fr 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
  .carousel-item { flex: 0 0 calc(100% / 2); }

  /* Announcement bar wraps */
  .ann { font-size: 11px; text-align: center; padding: 8px 12px; }

  /* Header search shrinks */
  .search-bar { max-width: 100% !important; }
  .header-main { gap: 8px; }

  /* ── Storefront hero ── */
  .hero-inner    { padding: 24px 0; }

  /* ── Product detail ── */
  .related-grid  { grid-template-columns: repeat(2, 1fr); }

  /* ── Admin stats: single column ── */
  .platform-stats { grid-template-columns: 1fr 1fr !important; }
  .stats-grid     { grid-template-columns: 1fr 1fr !important; }

  /* Seller editor: hide side panels on mobile */
  .left-panel,
  .right-panel { display: none !important; }
  .editor {
    grid-template-columns: 1fr !important;
    grid-template-rows: 52px 1fr !important;
  }
  .editor-topbar { padding: 0 10px !important; }
  .et-tabs { display: none !important; }

  /* All tables: only show 3 cols */
  .table-wrap table th:nth-child(n+4),
  .table-wrap table td:nth-child(n+4) { display: none; }

  /* Bottom nav even more compact */
  .sb-link { min-width: 46px !important; padding: 8px 4px !important; }
  .sb-link .icon { font-size: 16px !important; }
}

/* =============================================================================
 * ORIENTATION — landscape phone (tall but narrow in landscape)
 * ============================================================================= */
@media (max-width: 767px) and (orientation: landscape) {
  /* On phone landscape the bottom nav would eat too much height — switch to side rail */
  .sidebar {
    width: 56px !important;
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: none !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
  }
  .sb-nav {
    flex-direction: column !important;
    width: 56px !important;
  }
  .sb-link {
    min-width: unset !important;
    width: 56px !important;
    padding: 12px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  .main {
    margin-left: 56px !important;
    padding-bottom: 0 !important;
  }
  .content { padding: 14px !important; }

  /* Homepage: carousel items are taller than wide in landscape — show more */
  .carousel-item { flex: 0 0 calc(100% / 4); }
}

/* =============================================================================
 * Print — strip navigation, keep content readable
 * ============================================================================= */
@media print {
  .sidebar, .topbar, .header, .ann, .toast,
  .modal-bg, .btn, button { display: none !important; }
  .main { margin: 0 !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  a { color: #000 !important; text-decoration: underline; }
  .panel, .stat-card, .pstat { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* =============================================================================
 * Accessibility — respect prefers-reduced-motion
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}