/* MONOPLAST raspored. Zavisi od 05-brand/colors/colors.css i tokens.css.
   Ovde je samo osnova (reset, naslovi, kontejner, mreža, sekcije, tabela). Komponente strane su u stadijumu 09. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-body);
  line-height: var(--mp-lh-body);
  color: var(--mp-ink-900);
  background: var(--mp-white);
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; color: inherit; font-weight: var(--mp-fw-bold); text-wrap: balance; line-height: var(--mp-lh-head); }
h1 { font-size: var(--mp-fs-h1); line-height: var(--mp-lh-tight); }
h2 { font-size: var(--mp-fs-h2); }
h3 { font-size: var(--mp-fs-h3); }
h4 { font-size: var(--mp-fs-h4); }
p { margin: 0; max-width: var(--mp-measure); text-wrap: pretty; }
a { color: var(--mp-blue-500); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--mp-focus-w) solid var(--mp-blue-500); outline-offset: 2px; }

/* Vertikalni ritam, razmak između direktne dece */
.mp-stack > * + * { margin-top: var(--mp-stack, var(--mp-space-4)); }
.mp-stack--sm { --mp-stack: var(--mp-space-2); }
.mp-stack--lg { --mp-stack: var(--mp-space-5); }

/* Kontejner i mreža, 4 kolone na telefonu, 8 na tabletu, 12 na računaru */
.mp-container { width: 100%; max-width: calc(var(--mp-container) + 2 * var(--mp-page-margin)); margin-inline: auto; padding-inline: var(--mp-page-margin); }
.mp-grid { display: grid; gap: var(--mp-gap-y) var(--mp-gap-x); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) { .mp-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.mp-col-full { grid-column: 1 / -1; }
@media (min-width: 768px) { .mp-col-md-4 { grid-column: span 4; } }
@media (min-width: 1024px) {
  .mp-col-lg-3 { grid-column: span 3; }
  .mp-col-lg-4 { grid-column: span 4; }
  .mp-col-lg-5 { grid-column: span 5; }
  .mp-col-lg-6 { grid-column: span 6; }
  .mp-col-lg-7 { grid-column: span 7; }
  .mp-col-lg-8 { grid-column: span 8; }
}

/* Sekcije, bela i paper, skoro crna (ink) za tamne */
.mp-section { padding-block: var(--mp-sec); }
.mp-section--paper { background: var(--mp-paper); }
.mp-section--dark { background: var(--mp-ink-900); color: var(--mp-white); }
.mp-section__head { display: grid; justify-items: start; gap: var(--mp-head-gap); margin-bottom: var(--mp-head-mb); }

/* Tabela cenovnika, vodoravno pomeranje na telefonu, prva kolona ostaje */
.mp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mp-table { border-collapse: collapse; width: 100%; font-size: var(--mp-fs-small); font-variant-numeric: tabular-nums; }
.mp-table caption { text-align: left; font-weight: var(--mp-fw-bold); padding-bottom: var(--mp-space-2); }
.mp-table th, .mp-table td { padding: var(--mp-space-2) var(--mp-space-3); text-align: right; border-bottom: var(--mp-line) solid var(--mp-grey-300); white-space: nowrap; }
.mp-table thead th { background: var(--mp-ink-900); color: var(--mp-white); font-weight: var(--mp-fw-bold); }
.mp-table th:first-child, .mp-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--mp-white); font-weight: var(--mp-fw-bold); }
.mp-table thead th:first-child { background: var(--mp-ink-900); }
.mp-table tbody tr:nth-child(even) td { background: var(--mp-grey-100); }

/* Polja obrasca */
.mp-field { display: grid; gap: var(--mp-space-2); }
.mp-field > label { font-weight: var(--mp-fw-medium); }
.mp-field input, .mp-field select, .mp-field textarea {
  font: inherit; color: inherit; min-height: var(--mp-field-h); padding: var(--mp-space-2) var(--mp-space-3);
  background: var(--mp-white); border: var(--mp-line-strong) solid var(--mp-grey-300); width: 100%;
}
.mp-field textarea { min-height: calc(var(--mp-field-h) * 3); }
.mp-field input:focus, .mp-field select:focus, .mp-field textarea:focus { border-color: var(--mp-blue-500); }