/**
 * Výhradné zastúpenie page — design layer.
 *
 * The page shell (breadcrumb, leaf headline, lead, content card, eco h2, teal
 * CTA band, feature strip) is the Ekomateriály layer: pages/ekomaterialy.css is
 * enqueued alongside this file. Only what this page adds lives here, scoped
 * under .vyhzast so the generic names (.vz-*) never leak.
 *
 * The page has just two sections, so it drops the shell's .eko-layout grid and
 * its sticky .eko-nav — .eko-content stands alone inside .wrap and only needs
 * the top margin the grid used to give it.
 */

/* ---- Standalone content card (no .eko-layout parent) --------------------- */
.vyhzast .eko-content { margin-top: var(--space-7); }

/* ---- The one-sentence claim under each heading, centered ----------------- */
.vyhzast .vz-claim {
  max-width: 62ch;
  margin: 0 auto var(--space-6);
  text-align: center;
}

/* ---- Brand logo grid -----------------------------------------------------
   Tiles are the design-system card shell. Logos are supplier artwork of wildly
   different aspect ratios, so the tile contains them (never crops, never
   stretches) and centers them in a fixed-height box. */
.vyhzast .vz-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.vyhzast .vz-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  min-height: 120px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.vyhzast .vz-brand:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-hover);
}
.vyhzast .vz-brand-img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .vyhzast .eko-content { margin-top: var(--space-5); }
  .vyhzast .vz-brands { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .vyhzast .vz-brands { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .vyhzast .vz-claim { margin-bottom: var(--space-5); }
  .vyhzast .vz-brands { gap: var(--space-3); }
  .vyhzast .vz-brand { min-height: 96px; padding: var(--space-3); }
  .vyhzast .vz-brand-img { height: 56px; }
}