/* ============================================================
   Materials page — baked layout (density=compact, palette=stone)
   ============================================================ */

/* Density: compact — 6-column grid, square thumbnails, tight type.
   Applied to BOTH .mat-cards (top-level tabs: MDF/Furnir/Blat/Feronerie)
   and .mat-subcards (PAL sub-tabs: Kronospan/Egger/Cleaf). */
.page-materials .mat-cards,
.page-materials .mat-subcards { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.page-materials .mat-cards .mat-card-img,
.page-materials .mat-subcards .mat-card-img { aspect-ratio: 1 / 1; }
.page-materials .mat-cards .mat-card-meta,
.page-materials .mat-subcards .mat-card-meta { padding: 10px 12px 12px; }
.page-materials .mat-cards .mat-card-meta strong,
.page-materials .mat-subcards .mat-card-meta strong { font-size: 13px; }
.page-materials .mat-cards .mat-card-meta span,
.page-materials .mat-subcards .mat-card-meta span { font-size: 11px; }

/* Exception: the .mat-cards wrappers for PAL and Blat hold sub-tabs (not cards),
   so they stay a single column — let their inner .mat-subcards do the gridding. */
.page-materials .mat-cards[data-panel="pal"],
.page-materials .mat-cards[data-panel="blat"] { grid-template-columns: 1fr; gap: 32px; }

/* Palette: stone */
.page-materials { --bg-warm: #ececea; --bg-cream: #f5f5f3; --ink: #2a2c2e; }
.page-materials .mat-grid-section { background: #ececea; }
.page-materials .mat-grid-inner { background: #ffffff; }
.page-materials .mat-card { background: #f5f5f3; }
.page-materials .mat-tab2 { border-color: rgba(42, 44, 46, 0.2); color: #2a2c2e; }
.page-materials .mat-tab2.is-active { background: #2a2c2e; color: #f5f5f3; border-color: #2a2c2e; }
.page-materials .mat-subtab { color: #555; }
.page-materials .mat-subtab.is-active { background: #2a2c2e; color: #f5f5f3; }

@media (max-width: 640px) {
  .page-materials .mat-cards,
  .page-materials .mat-subcards { grid-template-columns: repeat(3, 1fr); }
  .page-materials .mat-cards[data-panel="pal"],
  .page-materials .mat-cards[data-panel="blat"] { grid-template-columns: 1fr; }
}