/**
 * Bartnik — szerszy układ + mobile UX, v1.0.0.
 * Only styles the existing Niepołomicki Bartnik design (.nb-app).
 * No WooCommerce URLs, data or PHP templates are changed.
 */

/* Full-bleed backgrounds remain full width; content is intentionally not 100vw. */
@media (min-width: 1200px) {
  .nb-app .nb-shell {
    width: min(var(--nbr-layout-max, 1440px), calc(100% - 48px));
    max-width: none;
  }
  /* The project catalog has its own 1200px cap nested inside .nb-shell. */
  .nb-app .bk40-wrap {
    width: 100%;
    max-width: 100%;
  }
  .nb-app .nb-hero--v2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 570px);
    gap: clamp(40px, 4vw, 72px);
  }
  .nb-app .nb-hero--v2 .nb-hero-text {
    width: 100%;
    max-width: 640px;
  }
  .nb-app .nb-hero--v2 .nb-hero-photo--new {
    width: 100%;
    max-width: 570px;
    justify-self: end;
  }
}

/* At 900–1100px the old theme capped the content at 760px. Use available space. */
@media (min-width: 701px) and (max-width: 1199px) {
  .nb-app .nb-shell {
    width: calc(100% - 40px);
    max-width: none;
  }
  .nb-app .bk40-wrap {
    width: 100%;
    max-width: 100%;
  }
}

/* Keep long-form copy comfortably readable even on ultrawide screens. */
.nb-app .nb-article-body,
.nb-app .nb-legal {
  max-width: min(100%, 78ch);
}
.nb-app .nb-copy,
.nb-app .nb-content-page .nb-copy {
  max-width: min(100%, 78ch);
}
.nb-app .nb-hero--v2 .nb-hero-text > p {
  max-width: 65ch;
}

/* All product cards keep their own minimum content width and wrap safely. */
.nb-app .nb-products > *,
.nb-app .nb-category-grid > *,
.nb-app .woocommerce ul.products > li.product,
.nb-app .bk40-grid > *,
.nb-app .bk40-card-body {
  min-width: 0;
}
.nb-app .woocommerce ul.products li.product h2,
.nb-app .bk40-card-body h2,
.nb-app .nb-product h3 {
  overflow-wrap: anywhere;
}

/* Mobile: prevent clipped homepage headline (theme forced nowrap),
   preserve tap-friendly navigation and avoid content overflowing viewport. */
@media (max-width: 700px) {
  .nb-app .nb-main--homepage .nb-hero-headline-line {
    white-space: normal;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .nb-app .nb-main--homepage .nb-hero--v2 h1 {
    max-width: 100%;
  }
  .nb-app .nb-hero--v2 .nb-hero-text,
  .nb-app .nb-hero--v2 .nb-hero-photo--new {
    min-width: 0;
    max-width: 100%;
  }
  .nb-app .nb-mobile-links {
    max-width: min(280px, calc(100vw - 30px));
  }
  .nb-app .nb-mobile-links a,
  .nb-app .woocommerce ul.products li.product .button,
  .nb-app .bk40-groups a {
    min-height: 44px;
  }
  .nb-app .nb-mobile-links a {
    display: flex;
    align-items: center;
  }
  .nb-app .woocommerce ul.products li.product .button {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }
  .nb-app .bk40-groups a {
    display: inline-flex;
    align-items: center;
  }
  .nb-app .woocommerce form .form-row input.input-text,
  .nb-app .woocommerce form .form-row textarea,
  .nb-app .woocommerce form .form-row select,
  .nb-app .nb-form-card input,
  .nb-app .nb-form-card textarea {
    font-size: max(16px, 1rem);
  }
}
@media (max-width: 360px) {
  .nb-app .nb-main--homepage .nb-hero--v2 h1 {
    font-size: clamp(1.55rem, 8.15vw, 1.83rem);
  }
  .nb-app .nb-header-inner {
    gap: 6px;
  }
  .nb-app .nb-mobile-nav summary {
    padding: 9px 8px;
  }
}


/* v1.1.0 — Editorial pages: same outer page width as the homepage.
   These overrides apply ONLY to the nine guide tiles + /o-nas/.
   Product cards, the shop, contact, the homepage, header and footer are untouched. */

/* The default theme gives article bodies max-width:790px and the older
   responsive plugin re-constrains them to 78ch. Remove both *layout* caps. */
body.nbrw-guide-article .nb-app #nb-main.nb-shell > .nb-copy.nb-article-body,
body.nbrw-guide-article .nb-app #nb-main.nb-shell > article.nb-article-body {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
}

/* The guide intro was limited to 950px; let its section occupy the same
   outer container as other homepage sections while keeping prose legible. */
body.nbrw-guide-article .nb-app #nb-main.nb-shell > .nb-heading {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
}
body.nbrw-guide-article .nb-app #nb-main.nb-shell > .nb-heading > p {
  max-width: 82ch;
}

/* Readable column for normal paragraphs, full usable width for the scientific
   table, feature cards, content panels and the article-related grid. */
body.nbrw-guide-article .nb-app #nb-main.nb-shell > .nb-article-body > p,
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-article > p,
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-article > :is(ul, ol) {
  max-width: 84ch;
}
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-article,
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-table-wrap,
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-highlights,
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-article-related {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  min-width: 0;
}
/* Allow scientific tables to scroll inside their wrapper on narrow phones,
   rather than pushing the entire page beyond the viewport. */
body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-table-wrap {
  overflow-x: auto;
}

/* /o-nas/ is rendered by a separate plugin with hardcoded 1120px width;
   use the identical responsive max-width and side gutters as .nb-shell.
   Higher specificity also overrides its older !important rule. */
body.nbrw-about .nb-app #nb-main.nbpa-shell {
  box-sizing: border-box !important;
  width: min(var(--nbr-layout-max, 1440px), calc(100% - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.nbrw-about .nb-app #nb-main.nbpa-shell > .nbpa-content,
body.nbrw-about .nb-app #nb-main.nbpa-shell .nbpa-page {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  min-width: 0;
}
/* Preserve editorial body measure rather than stretching paragraphs edge-to-edge. */
body.nbrw-about .nb-app #nb-main.nbpa-shell .nbpa-page p {
  max-width: 84ch;
}
body.nbrw-about .nb-app #nb-main.nbpa-shell .nbpa-page .nbpa-intro > p {
  max-width: 64ch;
}

@media (min-width: 701px) and (max-width: 1199px) {
  body.nbrw-about .nb-app #nb-main.nbpa-shell {
    width: calc(100% - 40px) !important;
  }
}
@media (max-width: 700px) {
  body.nbrw-about .nb-app #nb-main.nbpa-shell {
    width: calc(100% - 28px) !important;
  }
  body.nbrw-guide-article .nb-app #nb-main.nb-shell > .nb-copy.nb-article-body,
  body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-article {
    min-width: 0;
    max-width: 100% !important;
  }
  body.nbrw-guide-article .nb-app #nb-main.nb-shell .nb-research-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}