/**
 * Neom3 – CSS Container Queries module
 * Progressive enhancement: components respond to their parent size, not only the viewport.
 *
 * Usage:
 *   1. Link after style.css: <link rel="stylesheet" href="container-queries.css">
 *   2. Or merge into style.css
 *
 * Browser support: Chrome 105+, Safari 16+, Firefox 110+, Edge 105+
 * Unsupported browsers simply ignore @container rules (safe fallback via existing media queries).
 */

/* ------------------------------------------------------------------ */
/* 1. Establish containment on layout shells                          */
/* ------------------------------------------------------------------ */

/* Catalogue / product grids */
.listings-grid,
#allListingsGrid,
#myListingsGrid,
.horizontal-scroll {
  container-type: inline-size;
  container-name: listings;
}

/* Individual product card — style by card width when placed in any grid */
.listing-card,
.card {
  container-type: inline-size;
  container-name: card;
}

/* Modals: adapt form density to dialog width */
.modal {
  container-type: inline-size;
  container-name: modal;
}

/* Page / strip sections */
.strip-section,
.page-shell,
.feature-band,
.moderate-layout,
.info-layout {
  container-type: inline-size;
  container-name: section;
}

/* Header actions: do not contain — containment was clipping nav items off-screen */
.header-actions {
  container-type: normal;
  min-width: 0;
  max-width: 100%;
}

/* Cart & orders lists */
#cartList,
.orders-list,
#ordersList {
  container-type: inline-size;
  container-name: list;
}

/* Form groups that use side-by-side rows */
.form-row,
#sellForm,
#shippingForm,
#profileForm,
#payForm {
  container-type: inline-size;
  container-name: form;
}

/* Payment platform picker */
.payment-platforms-grid,
#payPlatformsGrid {
  container-type: inline-size;
  container-name: pay-grid;
}

/* ------------------------------------------------------------------ */
/* 2. Listings grid — columns based on grid container width           */
/* ------------------------------------------------------------------ */

@container listings (max-width: 360px) {
  .listings-grid,
  & {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@container listings (min-width: 361px) and (max-width: 520px) {
  .listings-grid,
  & {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@container listings (min-width: 521px) and (max-width: 900px) {
  .listings-grid,
  & {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
}

@container listings (min-width: 901px) {
  .listings-grid,
  & {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
  }
}

/* Nested: when this element IS the listings container */
.listings-grid {
  /* fallback already in style.css; CQ refines when supported */
}

@container listings (max-width: 360px) {
  .listing-card.span-2 {
    grid-column: span 1;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Product card — compact vs comfortable by card width             */
/* ------------------------------------------------------------------ */

@container card (max-width: 160px) {
  .card-img-wrap {
    height: 100px;
  }
  .card-body {
    padding: 8px;
  }
  .card-title {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }
  .card-price {
    font-size: 0.85rem;
  }
  .card-actions .btn {
    font-size: 0.75rem;
    padding: 6px 8px;
    min-height: 36px;
  }
  .card-meta,
  .card-location {
    font-size: 0.7rem;
  }
}

@container card (min-width: 161px) and (max-width: 240px) {
  .card-img-wrap {
    height: 130px;
  }
  .card-body {
    padding: 10px 12px;
  }
  .card-title {
    font-size: 0.9rem;
  }
}

@container card (min-width: 241px) {
  .card-img-wrap {
    height: 160px;
  }
  .card-body {
    padding: 12px 14px 14px;
  }
  .card-title {
    font-size: 0.95rem;
  }
  .card-price {
    font-size: 1.05rem;
  }
}

/* Wide card: optional horizontal layout (image left, body right) */
@container card (min-width: 420px) {
  .listing-card,
  & {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "media body"
      "media actions";
  }
  .card-img-wrap {
    height: 100%;
    min-height: 140px;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Forms — stack fields when the form container is narrow          */
/* ------------------------------------------------------------------ */

@container form (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@container form (min-width: 481px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Modal density                                                   */
/* ------------------------------------------------------------------ */

@container modal (max-width: 400px) {
  .modal h2,
  & h2 {
    font-size: 1.1rem;
  }
  .modal-subtitle {
    font-size: 0.8rem;
  }
  .btn-block {
    min-height: 48px;
  }
}

@container modal (min-width: 401px) {
  .modal h2,
  & h2 {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------------ */
/* 6. Payment platform grid                                           */
/* ------------------------------------------------------------------ */

@container pay-grid (max-width: 320px) {
  .payment-platforms-grid,
  & {
    grid-template-columns: 1fr;
  }
}

@container pay-grid (min-width: 321px) and (max-width: 560px) {
  .payment-platforms-grid,
  & {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container pay-grid (min-width: 561px) {
  .payment-platforms-grid,
  & {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 7. Lists (cart / orders)                                           */
/* ------------------------------------------------------------------ */

@container list (max-width: 420px) {
  .order-card,
  .order-item,
  #cartList .order-card {
    flex-direction: column;
    align-items: stretch;
  }
  .order-card-actions,
  #cartList .order-card-actions {
    width: 100%;
  }
  .order-card-actions .btn,
  #cartList .order-card-actions .btn {
    width: 100%;
  }
}

@container list (min-width: 421px) {
  .order-card,
  .order-item {
    flex-direction: row;
    align-items: center;
  }
}

/* ------------------------------------------------------------------ */
/* 8. Section / admin shells                                          */
/* ------------------------------------------------------------------ */

@container section (max-width: 720px) {
  .feature-band {
    grid-template-columns: 1fr;
  }
  .moderate-layout {
    flex-direction: column;
  }
  .page-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }
}

@container section (min-width: 721px) {
  .feature-band {
    grid-template-columns: 2fr 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Style queries (optional): based on container custom properties  */
/* ------------------------------------------------------------------ */
/**
 * Example — parent sets --card-density: compact|comfortable
 * Works in browsers with style queries (@container style(...))
 */
@container style(--card-density: compact) {
  .card-body {
    padding: 8px;
  }
  .card-title {
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Utility helpers                                                */
/* ------------------------------------------------------------------ */

/* Mark any region as a query container */
.cq {
  container-type: inline-size;
}
.cq-size {
  container-type: size; /* width + height — use sparingly (stricter containment) */
}
.cq-normal {
  container-type: normal; /* opt out */
}

/* Name containers for targeted queries */
.cq-listings { container-name: listings; container-type: inline-size; }
.cq-card { container-name: card; container-type: inline-size; }
.cq-modal { container-name: modal; container-type: inline-size; }
.cq-form { container-name: form; container-type: inline-size; }
.cq-list { container-name: list; container-type: inline-size; }
.cq-section { container-name: section; container-type: inline-size; }

/* Show CQ units demo (cqi = 1% of container inline size) */
.cq-pad {
  padding-inline: clamp(8px, 3cqi, 24px);
}
.cq-text {
  font-size: clamp(0.85rem, 2.5cqi + 0.5rem, 1.15rem);
}

/* ------------------------------------------------------------------ */
/* 11. Advanced CSS Containment Strategies (performance + isolation)  */
/* ------------------------------------------------------------------ */
/**
 * contain: layout style paint  → isolates subtree from rest of page.
 * content-visibility: auto     → skips rendering off-screen content.
 * contain-intrinsic-size       → placeholder size while skipped.
 *
 * Apply these to heavy, independent regions (grids, modals, lists).
 * Avoid on elements that need to affect parent size or overflow.
 */

/* Layout + style + paint containment for major shells */
.listings-grid,
#allListingsGrid,
#myListingsGrid,
.payment-platforms-grid,
.horizontal-scroll,
#moderateList,
#infoRetrievalResults {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Cards – full containment when many are rendered */
.listing-card,
.card,
.platform-card {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

/* Modals – isolate expensive subtrees when open */
.modal-overlay .modal,
.modal-lg,
.modal {
  contain: layout style;
}

/* Forms and long scroll regions */
#sellForm,
#profileForm,
#authForm,
#shippingModal .modal,
.section-scroll {
  contain: layout style;
}

/* Strict size containment (use sparingly – blocks size dependency) */
.cq-strict {
  contain: strict; /* layout size style paint */
}

/* Content-visibility utilities for long lists */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}
.cv-hidden {
  content-visibility: hidden;
}

/* Paint-only containment for decorative / media regions */
.media-contain,
.video-container,
.image-preview {
  contain: paint;
}

/* Style containment to prevent CSS leakage into parent */
.style-isolate {
  contain: style;
}

/* Combined performance profile for product grids */
.perf-grid {
  container-type: inline-size;
  container-name: listings;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Respect reduced motion – still contain but skip expensive transitions */
@media (prefers-reduced-motion: reduce) {
  .listing-card,
  .card,
  .modal {
    contain: layout style;
  }
}