/* ==========================================================================
   CommerceHub — Responsive Layer
   Mobile-first grid/layout utility classes + breakpoint system used to
   replace ad-hoc inline "grid-template-columns" styles across every page.
   Loaded AFTER base.css / components.css / animations.css so it can safely
   extend and fine-tune them for every screen size without touching the
   original visual identity.

   Breakpoint scale (max-width cascade, checked top-down):
     > 1280px  Large Desktop
     1025–1280 Laptop
     769–1024  Large Tablet
     641–768   Small Tablet
     481–640   Large Mobile
     ≤ 480     Mobile Phone
   ========================================================================== */

/* ---------------------------------------------------------------------
   0. Hard guarantees — no horizontal scroll, no overflowing content
   --------------------------------------------------------------------- */
html, body { overflow-x: hidden; width: 100%; }
* { min-width: 0; } /* prevents flex/grid children from forcing overflow */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
.video-wrap img, .video-wrap iframe, .pc-media img { height: 100%; } /* preserve intentional fixed-ratio media */
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
h1, h2, h3, h4, h5, h6, p, span, a, li { overflow-wrap: break-word; word-break: break-word; }

/* ---------------------------------------------------------------------
   1. Responsive grid utility classes
   Use these instead of inline grid-template-columns from now on.
   --------------------------------------------------------------------- */
.grid{ display:grid; gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }

/* Split / asymmetric hero-style layouts (was inline 1fr 1fr, 1.05fr .95fr, 1fr 1.3fr, etc.) */
.split-50{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.split-sidebar{ display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:flex-start; }
.gap-sm{ gap:16px; } .gap-md{ gap:24px; } .gap-lg{ gap:40px; } .gap-xl{ gap:56px; }

/* Generic responsive flex row that wraps early (replaces ad-hoc flex+flex-wrap combos) */
.flex-wrap-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* ---------------------------------------------------------------------
   2. Large Desktop refinement (> 1280px) — nothing to shrink, just cap width
   --------------------------------------------------------------------- */
@media (min-width:1281px){
  .container{ padding-inline:24px; }
}

/* ---------------------------------------------------------------------
   3. Laptop (1025px – 1280px)
   --------------------------------------------------------------------- */
@media (max-width:1280px){
  .container{ padding-inline:22px; }
  h1{ font-size:clamp(2.2rem,4.6vw,3.9rem); }
  .grid-6{ grid-template-columns:repeat(4,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------------------------------------------------------------
   4. Large Tablet (769px – 1024px)
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  :root{ --header-h:76px; }
  /* Sticky purchase-page order summaries only make sense in a 2-column layout */
  [style*="position:sticky"]{ position:static !important; top:auto !important; }
  .container{ padding-inline:20px; }
  .section{ padding:84px 0; }

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

  .split-hero{ grid-template-columns:1fr; gap:44px; }
  .split-hero > *:first-child{ order:1; text-align:center; }
  .split-hero > *:last-child{ order:2; max-width:520px; margin-inline:auto; }
  .split-hero .flex-center, .split-hero .flex{ justify-content:center; }

  .split-50{ grid-template-columns:1fr; gap:40px; }
  .split-sidebar{ grid-template-columns:1fr; gap:32px; }

  /* Desktop-only nav collapses into hamburger drawer starting here */
  .main-nav{ display:none; }
  .header-actions .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* ---------------------------------------------------------------------
   5. Small Tablet (641px – 768px)
   --------------------------------------------------------------------- */
@media (max-width:768px){
  :root{ --header-h:68px; }
  .container{ padding-inline:18px; }
  .section{ padding:60px 0; }
  .section-sm{ padding:40px 0; }
  .section-head{ margin-bottom:36px; }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }

  .price-card{ padding:30px 22px; }
  .pc-body{ padding:20px; }
  .modal-box{ padding:30px 22px; }
  .glass-card, .glass-card-dark{ padding:22px !important; }

  .footer-top{ padding:56px 0 36px; }
  table.admin-table{ font-size:.8rem; }
}

/* ---------------------------------------------------------------------
   6. Large Mobile (481px – 640px)
   --------------------------------------------------------------------- */
@media (max-width:640px){
  /* Floating decorative badges on the homepage hero image — pull them back
     inside the frame so they never get clipped or overlap surrounding text */
  .hero-section [style*="position:absolute"][style*="bottom:-24px"]{ bottom:-12px !important; left:-6px !important; max-width:200px !important; padding:12px 16px !important; }
  .hero-section [style*="position:absolute"][style*="top:-20px"]{ top:-10px !important; right:-6px !important; }

  h1{ font-size:clamp(1.9rem,8vw,2.6rem); }
  h2{ font-size:clamp(1.5rem,6vw,2rem); }
  h3{ font-size:1.2rem; }
  .btn{ padding:13px 22px; font-size:.88rem; }
  .btn-lg{ padding:15px 26px; font-size:.95rem; }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns:1fr; gap:16px; }
  .process-grid{ grid-template-columns:1fr; gap:18px; }
  .form-row{ grid-template-columns:1fr; }

  .page-hero{ padding:calc(var(--header-h) + 40px) 0 56px; }
  .page-hero h1{ font-size:clamp(1.8rem,8vw,2.4rem); }

  .trust-strip{ gap:26px; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:8px; }

  .back-to-top{ width:44px; height:44px; bottom:18px; right:18px; }
  .toast-wrap{ left:16px; right:16px; top:auto; bottom:16px; }
  .toast{ min-width:0; max-width:none; width:100%; }
}

/* ---------------------------------------------------------------------
   7. Mobile Phone (≤ 480px)
   --------------------------------------------------------------------- */
@media (max-width:480px){
  .container{ padding-inline:16px; }
  .section{ padding:48px 0; }
  .section-sm{ padding:32px 0; }

  .brand{ font-size:1.1rem; }
  .brand .logo-mark{ width:36px; height:36px; font-size:1rem; }

  .eyebrow{ font-size:.68rem; padding:6px 14px; }
  h1{ font-size:clamp(1.7rem,8.5vw,2.1rem); line-height:1.2; }
  h2{ font-size:clamp(1.35rem,7vw,1.7rem); }

  .stat-num{ font-size:1.6rem; }
  .stat-label{ font-size:.72rem; }

  .card, .product-card{ border-radius:var(--radius-md); }
  .pc-body{ padding:18px; gap:10px; }
  .pc-footer{ flex-wrap:wrap; gap:12px; align-items:flex-start; }

  .modal-box{ padding:26px 18px; border-radius:var(--radius-lg); }
  .modal-icon{ width:64px; height:64px; font-size:1.7rem; }

  .price-card .amount{ font-size:2rem; }
  .testi-card{ padding:22px; }

  .video-play-btn .vp-circle{ width:60px; height:60px; font-size:1.2rem; }

  .admin-content{ padding:16px; }
  .admin-topbar{ padding:0 16px; }
  .admin-stat-card{ padding:18px; }
}

/* ---------------------------------------------------------------------
   8. Universal inline-grid safety net
   Several pages (and JS-generated admin/product markup) set
   grid-template-columns directly via inline style="" for one-off layouts.
   Rather than hand-patch every occurrence, these attribute-selector rules
   catch ANY inline multi-column grid — present or future — and collapse
   it responsively. `!important` is required and safe here because it only
   ever overrides the inline grid-template-columns/gap declarations, never
   colors, spacing tokens, or the premium visual design.
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(3"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:420px 1fr"],
  [style*="grid-template-columns:1fr 340px"]{ grid-template-columns:1fr !important; }
}

@media (max-width:768px){
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"]{ grid-template-columns:1fr 1fr !important; }
  /* Any remaining literal pixel-based split layout (sidebar+fixed-width column
     patterns used on a few dashboard pages) must also collapse here — this
     catches them even if a page author adds a new one later without
     remembering to register it in the 1024px block above. */
  [style*="grid-template-columns"][style*="px"]{ grid-template-columns:1fr !important; }
}

@media (max-width:640px){
  [style*="grid-template-columns"]:not(.product-mini-grid){ grid-template-columns:1fr !important; gap:16px !important; }
  [style*="grid-template-columns"][style*="margin-top"]{ margin-top:20px !important; }
}

/* ---------------------------------------------------------------------
   9. Mentee Portal — Product Sourcing Grid
   Dedicated compact card system for dashboard/products.html. Desktop
   shows 5 products per row; the grid steps down smoothly through
   tablet sizes and always shows exactly 2 products per row on phones
   (per product requirement), never single-column, so the page never
   feels sparse or "ugly" on mobile.
   --------------------------------------------------------------------- */
.product-mini-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
}
.product-mini-card{
  display:flex; flex-direction:column; background:#fff; border-radius:var(--radius-md);
  border:1px solid var(--gray-100); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast);
}
.product-mini-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.product-mini-card .pmc-media{ position:relative; aspect-ratio:1/1; background:var(--gray-100); overflow:hidden; }
.product-mini-card .pmc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-mini-card .pmc-badge{ position:absolute; top:8px; left:8px; font-size:.62rem; font-weight:800; padding:3px 8px; border-radius:var(--radius-full); text-transform:uppercase; }
.product-mini-card .pmc-body{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-mini-card .pmc-cat{ font-size:.68rem; color:var(--gray-400); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.product-mini-card .pmc-title{
  font-size:.86rem; font-weight:800; color:var(--gray-900); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em;
}
.product-mini-card .pmc-price{ font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--color-red-600); margin-top:auto; }
.product-mini-card .pmc-price small{ font-size:.65rem; font-weight:600; color:var(--gray-400); }
.product-mini-card .pmc-cta{
  display:block; text-align:center; font-size:.78rem; font-weight:700; padding:8px; border-radius:var(--radius-sm);
  background:var(--gradient-primary); color:#fff; margin-top:6px;
}

@media (max-width:1280px){ .product-mini-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:1024px){ .product-mini-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:640px){
  .product-mini-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .product-mini-card .pmc-body{ padding:10px; gap:4px; }
  .product-mini-card .pmc-title{ font-size:.8rem; min-height:2.1em; }
  .product-mini-card .pmc-price{ font-size:.86rem; }
}
@media (max-width:360px){
  .product-mini-grid{ gap:8px; }
}

/* ---------------------------------------------------------------------
   10. Dashboard / Admin data tables on small screens
   Tables were overflowing their card container on phones because the
   wrapper allowed internal scroll but individual cells still forced a
   minimum width wider than the viewport in some browsers. Force a
   sensible minimum table width and always allow horizontal scroll
   *inside* the card (never the page) so no layout ever breaks the
   overall page width.
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .admin-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-16px; padding-inline:16px; width:calc(100% + 32px); }
  table.admin-table{ min-width:520px; }
  .admin-panel{ padding:16px; }
  .admin-panel-head{ gap:10px; }
}

/* ---------------------------------------------------------------------
   11. Utility: hide/show helpers per breakpoint
   --------------------------------------------------------------------- */
.hide-mobile{ display:initial; }
.show-mobile{ display:none; }
@media (max-width:768px){
  .hide-mobile{ display:none !important; }
  .show-mobile{ display:initial !important; }
}