/* Page CSS: only what sits inside a visual or what the kit lacks (system.md). Tokens only. */

/* picture-develops: the section's one photograph, as tall as the text beside it */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(560px, var(--ly-fit, 560px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* split photographs beside a list: one height per kind, page-wide */
.services__photo, .area__photo, .split__photo { --ratio: auto; height: 560px; }
.services__photo > img, .area__photo > img, .split__photo > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .services__photo, .area__photo, .split__photo { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* the 20 towns: two columns of name and distance */
.towns { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-6); }
.towns li { display: flex; justify-content: space-between; gap: var(--s-3); break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); line-height: 1.5; }
.towns li > :last-child { font-variant-numeric: tabular-nums; }

/* rows used as plain lists of facts (no value column) */
.rows p { margin: 0; }

/* long text on guide and legal pages: one readable column on the left line */
.prose { max-width: 68ch; display: grid; gap: var(--s-4); }
.prose p, .prose li { font-size: var(--t-body); line-height: 1.7; margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose h3 { font: 500 var(--t-lead)/1.4 var(--font-text); margin: var(--s-3) 0 0; }
.prose a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }

/* fact table (PSZOK, distances) */
.facts { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.facts th { font-weight: 500; width: 38%; padding-right: var(--s-5); }
.facts td { font-variant-numeric: tabular-nums; }

/* calculator */
.calc { display: grid; gap: var(--s-5); background: var(--g-alt, var(--p-surface)); padding: var(--s-7); border-radius: var(--r-lg); }
.calc .field select, .calc .field input { width: 100%; height: 48px; font: 400 16px/1 var(--font-text); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 12px; }
.calc .field { display: grid; gap: var(--s-2); }
.calc .field label { font-size: var(--t-small); font-weight: 500; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.calc__check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--t-body); }
.calc__check input { width: 20px; height: 20px; accent-color: var(--action); }
.calc__out { display: grid; gap: var(--s-2); }
.calc__price { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .calc { padding: var(--s-5); } .calc__row { grid-template-columns: 1fr; } }

/* legal pages: the heading block and the text run as one document, not screen-sized sections */
main > section.doc-head, main > section.doc { height: auto; min-height: 0; }
main > section.doc-head { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-6); }
main > section.doc { padding-top: 0; }
.doc .prose h2 { font-size: var(--t-h3); margin-top: var(--s-6); }

/* tablet (640–1023): sections take their content's height, so no screen is left half empty */
@media (min-width: 640px) and (max-width: 1023px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing { min-height: 0; }
}
/* a short tablet (768x1024) keeps the price rows and the extras side by side so the list stays one screen;
   a tall one (820x1180) stacks them */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 1099px) {
  .section-pricing .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-pricing .grid > * { grid-column: auto; }
}

/* the FAQ's and the calculator's photograph under the heading */
.faq__photo { --ratio: 75%; padding: 0; }
.faq__photo > img { width: 100%; height: 100%; object-fit: cover; }

/* Polish headings: no hyphenation in the large type (a word split at 72px reads as a typo) */
h1, h2 { hyphens: manual; -webkit-hyphens: manual; }
/* the 20-town table on a phone: two tables stacked, tighter rows so both fit two screens */
@media (max-width: 639px) { .towns-table th, .towns-table td { padding: 8px 0; } .towns-table + .towns-table thead { display: none; } }

/* a plain photograph beside text (the FAQ's): one radius, the frame's height */
.pic { margin: 0; overflow: hidden; border-radius: var(--r-lg); height: 520px; }
.pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) and (max-width: 1023px) { .pic { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }
@media (max-width: 639px) {
  .pic { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); }
  /* the phone footer keeps two columns; the eight towns are in the menu sheet and on /obszar-dzialania */
  .footer__col--cities { display: none; }
  /* the develop photograph fills the second phone screen of its section */
  .develop { aspect-ratio: 3 / 4; }
}
@media (max-width: 639px) { .towns { columns: 1; } }
.towns li > :last-child { white-space: nowrap; }

/* a link inside a sentence or a list row: underlined, no arrow (the arrow belongs to standalone links) */
a.inline { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); transition: text-decoration-color 160ms ease; }
a.inline:hover { text-decoration-color: currentColor; }
/* on a phone every town row is a 44px tap target */
@media (max-width: 639px) {
  .towns li { min-height: 44px; align-items: center; padding: 0; }
  .towns a.inline { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Desktop on a short window (a laptop with browser bars, 650–850px tall): a section is at least one screen
   and grows with its content, so nothing runs over the next section (the kit fixes it at 100svh from 1280 up).
   The pinned steps keep their own height (the moment's scroll). */
@media (min-width: 1024px) {
  main > :is(section, .section):not(.hero, .section--hero, [data-moment="pinned-chapters"]), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
  }
  main > :is(section, .section):not(.hero, .section--hero, [data-moment="pinned-chapters"]) > :is(.wrap, .container),
  footer.closing > .wrap { height: auto; }
  /* the hero: at least the first screen, taller when a short window cannot hold the box */
  main > :is(.hero, .section--hero) { height: auto; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr; }
  main > :is(.hero, .section--hero) > .wrap { height: auto; }
}
/* the photo hero's box: the same gap under the header as above the fold, and a headline that fits a short window */
.hero--photo { --hgap: var(--hpadb); }
@media (min-width: 1024px) {
  .hero--photo h1 { font-size: clamp(48px, min(calc((100svh - 500px) / 3.1), 5.4vw), var(--ly-h1-xl)); }
}

/* the nav menu's picture card: its picture, title and line sit together at the top (the card stretches
   to the link columns' height, which spread its rows apart) */
.menu-card { align-content: start; }