/**
 * Grid background system — shared decorative layouts & section backdrops.
 * Use .grid-bg + modifier on sections; .page-grid-shell on page-wrapper.
 */

/* ═══ PAGE SHELL ═══ */
.page-grid-shell {
  position: relative;
  isolation: isolate;
}

.page-grid-shell::before {
  display: none;
}

.page-grid-shell::after {
  display: none;
}

/* ═══ SECTION GRID BACKGROUNDS ═══ */
.grid-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.grid-bg > .container,
.grid-bg > .featured-header-wrap,
.grid-bg .about-split-home-grid,
.grid-bg .marquee-wrapper {
  position: relative;
  z-index: 2;
}

/* Base line grid overlay — removed */
.grid-bg::before {
  display: none;
}

/* Soft gradient wash */
.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Variants ── */

/* Clean white + fine grid */
.grid-bg--clean {
  background: #ffffff;
}
.grid-bg--clean::after {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.5) 0%, transparent 40%, transparent 60%, rgba(240, 253, 244, 0.4) 100%);
}
.grid-bg--clean::before { display: none; }

/* Mint / green tint */
.grid-bg--mint {
  background: linear-gradient(180deg, #f8fffb 0%, #f0fdf4 50%, #ecfdf5 100%);
}
.grid-bg--mint::before { display: none; }
.grid-bg--mint::after {
  background: radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.10) 0%, transparent 45%);
}

/* Soft blue */
.grid-bg--blue {
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 50%, #f0f9ff 100%);
}
.grid-bg--blue::before { display: none; }
.grid-bg--blue::after {
  background: radial-gradient(circle at 15% 80%, rgba(37, 99, 235, 0.09) 0%, transparent 50%);
}

/* Dot grid pattern */
.grid-bg--dots::before { display: none; }
.grid-bg--dots {
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
}
.grid-bg--dots::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 60%);
}

/* Hero header — bold grid + gradient band */
.grid-bg--hero {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 50%, #ffffff 100%);
  min-height: 260px;
  display: flex;
  align-items: center;
}
.grid-bg--hero::before { display: none; }
.grid-bg--hero::after {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, transparent 30%, transparent 70%, rgba(37, 99, 235, 0.12) 100%),
    radial-gradient(circle at 10% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 90% 50%, rgba(34, 197, 94, 0.10) 0%, transparent 35%);
}
.grid-bg--hero .section-header {
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
  margin-bottom: 0;
}

/* Dense crosshatch for bento grids */
.grid-bg--bento::before { display: none; }
.grid-bg--bento {
  background: #fafbfc;
}

/* Neutral for promo / content blocks */
.grid-bg--neutral {
  background: transparent;
}
.grid-bg--neutral::before { display: none; }

/* Product / shop page content area */
.grid-bg--shop {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 0 0 var(--space-3xl);
}
.grid-bg--shop::before { display: none; }

/* Contact / form pages */
.grid-bg--form {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 40%, #eff6ff 100%);
}
.grid-bg--form::before { display: none; }

/* Gallery masonry backdrop */
.grid-bg--gallery {
  background: #f8fafc;
  padding-bottom: var(--space-3xl);
}
.grid-bg--gallery::before { display: none; }

/* ── Decorative section framing (enhanced) ── */
.section-grid-frame {
  position: relative;
}
.section-grid-frame::before { display: none; }
.section-grid-frame > .container {
  position: relative;
  z-index: 1;
}

/* Grid accent corners on cards inside grid sections */
.grid-bg .product-card,
.grid-bg .wch-card,
.grid-bg .why-card,
.grid-bg .ash-stat,
.grid-bg .gallery-item,
.grid-bg .contact-info-card,
.grid-bg .contact-form-card,
.grid-bg .faq-item,
.grid-bg .sidebar-block {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .grid-bg--hero { min-height: 220px; }
}

/* ═══ HOME — Categories bento (3-col + full-width highlights) ═══ */
.categories-grid.layout-bento-cats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (min-width: 900px) {
  .categories-grid.layout-bento-cats .category-card:nth-child(5n) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-left-width: 6px;
    background: linear-gradient(90deg, var(--primary-xlight) 0%, var(--bg-card) 35%);
  }
}

@media (min-width: 1100px) {
  .categories-grid.layout-bento-cats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .categories-grid.layout-bento-cats .category-card {
    grid-column: span 2;
  }
  .categories-grid.layout-bento-cats .category-card:nth-child(5n) {
    grid-column: 1 / -1;
  }
  .categories-grid.layout-bento-cats .category-card:nth-child(7n + 1) {
    grid-column: span 3;
  }
  .categories-grid.layout-bento-cats .category-card:nth-child(7n + 2) {
    grid-column: span 3;
  }
}

/* ═══ HOME — Featured mosaic (4 cards) ═══ */
.products-grid.layout-mosaic-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .products-grid.layout-mosaic-4 .product-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .products-grid.layout-mosaic-4 .product-card:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .products-grid.layout-mosaic-4 .product-card:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }
  .products-grid.layout-mosaic-4 .product-card:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2;
  }
  .products-grid.layout-mosaic-4 .product-card:nth-child(1) .product-card-img {
    height: 280px;
  }
}

/* ═══ HOME — Why us bento ═══ */
.why-grid.layout-why-bento {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .why-grid.layout-why-bento .why-card:nth-child(1) {
    grid-column: 1 / 4;
    text-align: center;
  }
  .why-grid.layout-why-bento .why-card:nth-child(1) .why-icon {
    margin: 0 auto var(--space-md);
  }
  .why-grid.layout-why-bento .why-card:nth-child(2) {
    grid-column: 4 / 7;
  }
  .why-grid.layout-why-bento .why-card:nth-child(3) {
    grid-column: 1 / 4;
  }
  .why-grid.layout-why-bento .why-card:nth-child(4) {
    grid-column: 4 / 7;
  }
}

/* ═══ PRODUCTS — Editorial sidebar + rhythm grid ═══ */
.shop-layout.layout-shop-editorial {
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.35fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .shop-layout.layout-shop-editorial .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: calc(var(--nav-height) + 56px + var(--space-md));
  }
  .shop-layout.layout-shop-editorial .sidebar-block {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  }
}

.shop-products-grid.layout-products-rhythm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  grid-auto-flow: row;
  align-items: stretch;
}

.shop-products-grid.layout-products-rhythm .product-card {
  grid-column: span 1;
}

.shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) {
  grid-column: span 1;
}

.shop-products-grid.layout-products-rhythm .product-card .product-card-img,
.shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) .product-card-img {
  height: var(--card-img-height);
  min-height: var(--card-img-height);
  max-height: var(--card-img-height);
}

.shop-products-grid.layout-products-rhythm.list-view {
  grid-template-columns: 1fr;
}
.shop-products-grid.layout-products-rhythm.list-view .product-card {
  grid-column: 1 / -1;
}
.shop-products-grid.layout-products-rhythm.list-view .product-card:nth-child(5n + 1) .product-card-img {
  height: var(--card-img-height);
  min-height: var(--card-img-height);
}

/* ═══ GALLERY — uniform grid (same image size per card) ═══ */
.gallery-grid.layout-gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  grid-auto-rows: auto;
  align-items: stretch;
}

.gallery-grid.layout-gallery-masonry .gallery-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-column: span 1 !important;
  grid-row: auto !important;
  height: 100%;
}

.gallery-grid.layout-gallery-masonry .gallery-img-wrap {
  flex: none;
  width: 100%;
  height: var(--card-img-height);
  min-height: var(--card-img-height);
  max-height: var(--card-img-height);
}

.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 1),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 2),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 3),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 4),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 5),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 6),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 7),
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
  flex-direction: column !important;
}

.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 1) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 2) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 3) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 4) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 5) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 6) .gallery-img-wrap,
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 7) .gallery-img-wrap {
  width: 100% !important;
  height: var(--card-img-height) !important;
  min-height: var(--card-img-height) !important;
  max-height: var(--card-img-height) !important;
}

.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-item-info {
  flex: 1;
  display: block;
}

/* ═══ CONTACT — Split + FAQ mosaic ═══ */
.contact-layout.layout-contact-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 900px) {
  .contact-layout.layout-contact-bento .contact-info-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  }
  .contact-layout.layout-contact-bento .contact-form-card {
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border);
  }
}

.faq-grid.layout-faq-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--space-md);
}

.faq-grid.layout-faq-mosaic .faq-item {
  grid-column: span 6;
}

.faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 1) {
  grid-column: span 7;
}
.faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 2) {
  grid-column: span 5;
}
.faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 3) {
  grid-column: span 5;
}
.faq-grid.layout-faq-mosaic .faq-item:nth-child(4n) {
  grid-column: span 7;
}

/* ═══ ABOUT — Asymmetric split + industries + values ═══ */
.about-split.layout-about-editorial .about-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 2px minmax(0, 0.95fr);
  gap: 0;
  align-items: stretch;
}

@media (min-width: 900px) {
  .about-split.layout-about-editorial .about-col:first-of-type {
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
  .about-split.layout-about-editorial .about-col:last-of-type {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }
}

.layout-industries-bento.industries-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  grid-auto-flow: dense;
}

.layout-industries-bento.industries-grid .industry-card:nth-child(6n + 1) {
  grid-column: span 4;
}
.layout-industries-bento.industries-grid .industry-card:nth-child(6n + 2),
.layout-industries-bento.industries-grid .industry-card:nth-child(6n + 3) {
  grid-column: span 4;
}
.layout-industries-bento.industries-grid .industry-card:nth-child(6n + 4) {
  grid-column: span 6;
}
.layout-industries-bento.industries-grid .industry-card:nth-child(6n + 5) {
  grid-column: span 6;
}
.layout-industries-bento.industries-grid .industry-card:nth-child(6n) {
  grid-column: span 12;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-2xl);
}

.layout-values-stagger.why-grid-3 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (min-width: 769px) {
  .layout-values-stagger.why-grid-3 .why-item:nth-child(1) {
    grid-column: 1 / 7;
    transform: translateY(0);
  }
  .layout-values-stagger.why-grid-3 .why-item:nth-child(2) {
    grid-column: 7 / 13;
    transform: translateY(var(--space-lg));
  }
  .layout-values-stagger.why-grid-3 .why-item:nth-child(3) {
    grid-column: 1 / 7;
    transform: translateY(calc(var(--space-lg) * -0.5));
  }
  .layout-values-stagger.why-grid-3 .why-item:nth-child(4) {
    grid-column: 7 / 13;
    transform: translateY(calc(var(--space-lg) * 0.35));
  }
  .layout-values-stagger.why-grid-3 .why-item:nth-child(5) {
    grid-column: 1 / 7;
    transform: translateY(calc(var(--space-lg) * -0.35));
  }
  .layout-values-stagger.why-grid-3 .why-item:nth-child(6) {
    grid-column: 7 / 13;
    transform: translateY(0);
  }
}

/* ═══ Tablet / mobile collapse ═══ */
@media (max-width: 1024px) {
  .products-grid.layout-mosaic-4 .product-card:nth-child(1),
  .products-grid.layout-mosaic-4 .product-card:nth-child(2),
  .products-grid.layout-mosaic-4 .product-card:nth-child(3),
  .products-grid.layout-mosaic-4 .product-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
  .products-grid.layout-mosaic-4 .product-card:nth-child(1) .product-card-img {
    height: 220px;
  }
  .shop-products-grid.layout-products-rhythm .product-card,
  .shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) {
    grid-column: span 1;
  }
  .gallery-grid.layout-gallery-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-grid.layout-gallery-masonry .gallery-item,
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
    grid-column: span 1 !important;
    grid-row: auto !important;
    flex-direction: column !important;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap {
    width: 100% !important;
    height: var(--card-img-height) !important;
    min-height: var(--card-img-height) !important;
  }
  .faq-grid.layout-faq-mosaic .faq-item,
  .faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 1),
  .faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 2),
  .faq-grid.layout-faq-mosaic .faq-item:nth-child(4n + 3),
  .faq-grid.layout-faq-mosaic .faq-item:nth-child(4n) {
    grid-column: span 12;
  }
  .layout-industries-bento.industries-grid .industry-card {
    grid-column: span 6;
  }
  .layout-industries-bento.industries-grid .industry-card:nth-child(6n) {
    grid-column: span 12;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .shop-layout.layout-shop-editorial {
    grid-template-columns: 1fr;
  }
  .contact-layout.layout-contact-bento {
    grid-template-columns: 1fr;
  }
  .why-grid.layout-why-bento .why-card:nth-child(1),
  .why-grid.layout-why-bento .why-card:nth-child(2),
  .why-grid.layout-why-bento .why-card:nth-child(3),
  .why-grid.layout-why-bento .why-card:nth-child(4) {
    grid-column: 1 / -1;
    text-align: center;
  }
  .why-grid.layout-why-bento .why-card:nth-child(1) .why-icon {
    margin: 0 auto var(--space-md);
  }
  .shop-products-grid.layout-products-rhythm {
    grid-template-columns: 1fr;
  }
  .shop-products-grid.layout-products-rhythm .product-card,
  .shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) {
    grid-column: span 1;
  }
  .gallery-grid.layout-gallery-masonry {
    grid-template-columns: 1fr;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item {
    grid-column: span 1 !important;
    grid-row: auto;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
    flex-direction: column !important;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap {
    width: 100% !important;
    height: var(--card-img-height) !important;
    min-height: var(--card-img-height) !important;
  }
  .layout-values-stagger.why-grid-3 .why-item {
    grid-column: 1 / -1;
    transform: none;
  }
}