/**
 * Distinct grid layouts — bento, mosaic, editorial, masonry rhythms.
 * Loaded after page-specific CSS; overridden in responsive.css where needed.
 */

/* ── Decorative section framing (optional) ── */
.section-grid-frame {
  position: relative;
}
.section-grid-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, transparent 40%, rgba(34, 197, 94, 0.05) 100%);
  pointer-events: none;
  z-index: 0;
}
.section-grid-frame > .container {
  position: relative;
  z-index: 1;
}

/* ═══ 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: left;
  }
  .why-grid.layout-why-bento .why-card:nth-child(1) .why-icon {
    margin: 0 0 var(--space-md) 0;
  }
  .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(12, minmax(0, 1fr));
  gap: var(--space-lg);
  grid-auto-flow: dense;
}

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

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

.shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) .product-card-img {
  height: 240px;
}

.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: 220px;
}

/* ═══ GALLERY — Masonry-style spans ═══ */
.gallery-grid.layout-gallery-masonry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 52px;
  gap: var(--space-md);
  align-items: stretch;
}

.gallery-grid.layout-gallery-masonry .gallery-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gallery-grid.layout-gallery-masonry .gallery-img-wrap {
  flex: 1;
  min-height: 120px;
  height: auto;
}

.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 1) {
  grid-column: span 7;
  grid-row: span 4;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 2) {
  grid-column: span 5;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 3) {
  grid-column: span 5;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 4) {
  grid-column: span 7;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 5) {
  grid-column: span 4;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 6) {
  grid-column: span 4;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n + 7) {
  grid-column: span 4;
  grid-row: span 3;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
  grid-column: span 12;
  grid-row: span 3;
  flex-direction: row;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap {
  width: 42%;
  min-height: 100%;
}
.gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ═══ 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 6;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item,
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
    grid-column: span 6;
    grid-row: span 3;
    flex-direction: column;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap {
    width: 100%;
    height: 200px;
  }
  .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 .product-card,
  .shop-products-grid.layout-products-rhythm .product-card:nth-child(5n + 1) {
    grid-column: span 12;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) {
    flex-direction: column;
  }
  .gallery-grid.layout-gallery-masonry .gallery-item:nth-child(8n) .gallery-img-wrap {
    width: 100%;
    height: 220px;
  }
  .layout-values-stagger.why-grid-3 .why-item {
    grid-column: 1 / -1;
    transform: none;
  }
}