/**
 * Branding page — design layer.
 *
 * The page shell (breadcrumb, leaf headline, lead, sticky anchor nav, content
 * card, .mat-block intro, teal CTA band, feature strip) is the shared eco
 * layer: pages/ekomaterialy.css is enqueued alongside this file. Only the
 * patterns Branding adds live here, scoped under .branding so the generic names
 * (.br-*) never leak: the service block (copy + spec table + bullets beside its
 * photos), the spec table itself and the note box.
 *
 * The spec table rebuilds the legal pages' table look (--teal-50 head, hairline
 * --line-soft grid) — legal.css scopes it under .legal, so it cannot be reused
 * directly. Its horizontal-scroll wrapper is markup here (.br-spec-wrap), not
 * JS: legal.css needs js/legal.js only because its tables come from the editor.
 */

/* ---- Section heading above the services ---------------------------------- */
.branding .br-h2 { margin: 0 0 var(--space-6); }

/* ---- Service block: copy + spec table + bullets, photos beside ------------
   Same two-column rhythm as .mat-block, but top-aligned: these bodies are tall
   lists, so centering them against a square photo would drift. */
.branding .br-service { margin-bottom: var(--space-8); }
.branding .br-service.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: start;
}
.branding .br-h3 {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---- Spec table ----------------------------------------------------------
   Row-header layout (label | value). The wrapper scrolls on mobile so the table
   can never widen the content card. */
.branding .br-spec-wrap {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.branding .br-spec {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
  font-size: 14px;
}
.branding .br-spec th,
.branding .br-spec td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.branding .br-spec th {
  background: var(--teal-50);
  border-right: 1px solid var(--line-soft);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.branding .br-spec td { color: var(--ink-soft-3); }
.branding .br-spec tr:last-child th,
.branding .br-spec tr:last-child td { border-bottom: none; }

/* ---- Bullets (the design system's eco-leaf marker) ------------------------ */
.branding .br-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.branding .br-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft-3);
}
.branding .br-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background: var(--leaf-green) center / contain no-repeat;
}

/* ---- Note box (the "Poznámka:" line under the colour print) --------------- */
.branding .br-note {
  margin: var(--space-4) 0 0;
  background: var(--teal-50);
  border: 1px solid var(--teal-line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: var(--teal-600);
  font-size: 14px;
  line-height: 1.6;
}
.branding .br-note strong { color: var(--teal-600); }

/* ---- Service photos -------------------------------------------------------
   Product cut-outs / detail shots: the cell contains rather than crops them,
   the same reasoning as the Eko štart package strip. */
.branding .br-gallery { display: grid; gap: var(--space-2); }
.branding .br-gallery--2 { grid-template-columns: 1fr 1fr; }
.branding .br-gallery-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding: var(--space-2);
}
.branding .br-gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Closing copy --------------------------------------------------------- */
.branding .br-closing p { margin: 0; }
.branding .br-closing strong { color: var(--ink); }
.branding .br-closing a { color: var(--teal); font-weight: 700; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .branding .br-service.has-media { grid-template-columns: 1fr; gap: var(--space-5); }
  /* One photo alone on a phone would blow up to card width — cap it. */
  .branding .br-gallery--1 { max-width: 320px; }
}

@media (max-width: 600px) {
  .branding .br-h2 { margin-bottom: var(--space-5); }
  .branding .br-service { margin-bottom: var(--space-7); }
  .branding .br-list li { font-size: 14px; }
}