/* VILLAGE MTA | Width Update v2
   Scope: wybrane publiczne podstrony.
   Design, typografia i kolory pozostaja w style2.css.
*/
html.vmta-width-update {
  --vmta-wide-max: 1860px;
  --vmta-wide-gutter: clamp(32px, 3.4vw, 64px);
}

/* Wspolna os: header, menu, tresc strony i stopka. */
html.vmta-width-update body .wrap {
  width: min(var(--vmta-wide-max), calc(100% - var(--vmta-wide-gutter)));
  max-width: var(--vmta-wide-max);
  margin-inline: auto;
}

html.vmta-width-update body main.wrap.page {
  min-width: 0;
}

/* Nie rozszerzamy drobnych elementow na sile, ale pozwalamy
   kolumnom, edytorom i wpisom dostosowywac sie do ekranu. */
html.vmta-width-update body main.page .card,
html.vmta-width-update body main.page .post,
html.vmta-width-update body main.page .post-body,
html.vmta-width-update body main.page .grid > *,
html.vmta-width-update body main.page .nt-layout > *,
html.vmta-width-update body main.page .profile-layout > * {
  min-width: 0;
}

html.vmta-width-update body main.page .content,
html.vmta-width-update body main.page .post-body,
html.vmta-width-update body main.page .profile-about-body {
  overflow-wrap: anywhere;
}

/* Dobrane pod szeroki monitor kolumny, bez ingerencji w ich zawartosc. */
@media (min-width: 1500px) {
  html.vmta-width-update[data-vmta-page="new_topic.php"] .nt-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }

  html.vmta-width-update[data-vmta-page="profile.php"] .profile-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }

  html.vmta-width-update[data-vmta-page="topic.php"] .post {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  /* Obszar tresci strony glownej: 3 kolumny staja sie czytelniejsze. */
  html.vmta-width-update[data-vmta-page="index.php"] .content-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* Zachowanie starych punktow przelamania (980px i 760px). */
@media (max-width: 980px) {
  html.vmta-width-update { --vmta-wide-gutter: 32px; }
  html.vmta-width-update[data-vmta-page="topic.php"] .post {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  html.vmta-width-update { --vmta-wide-gutter: 24px; }
  html.vmta-width-update[data-vmta-page="profile.php"] .profile-layout,
  html.vmta-width-update[data-vmta-page="new_topic.php"] .nt-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  html.vmta-width-update { --vmta-wide-gutter: 20px; }
}