/**
 * PL: Style powtarzalnych elementów strony — zamiast kilkunastu kopii tego samego
 *     atrybutu style="..." w index.html. Nazwa klasy mówi, do czego służy.
 *     Układ stylów jest IDENTYCZNY jak wcześniej (przeniesiony 1:1).
 *     Style jednorazowe, zależne od stanu ({{ ... }}) i responsywne zostają w index.html.
 * EN: Styles of repeated page elements — instead of a dozen copies of the same
 *     style="..." attribute in index.html. The class name says what it is for.
 *     The styles are IDENTICAL to before (moved 1:1).
 *     One-off, state-dependent ({{ ... }}) and responsive styles stay in index.html.
 */

/* ---------- Karty usług (strona główna) / Service cards (home) ---------- */
.service-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(20px,2.2vw,28px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card:hover {
  border-color: #D2D4D7;
  box-shadow: 0 10px 28px rgba(23,24,26,.06);
}
.service-icon {
  width: clamp(44px,4.6vw,58px);
  height: clamp(44px,4.6vw,58px);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.service-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(17px,1.6vw,20px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.service-note {
  font-size: 13.5px;
  color: var(--text-secondary);
}
.text-muted {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.accent-bar {
  display: block;
  width: 34px;
  height: 3px;
  background: var(--mika-red);
}

/* ---------- Wiersze danych kontaktowych (Kontakt) / Contact info rows (Contact) ---------- */
.info-row {
  display: flex;
  gap: 14px;
  padding: clamp(14px,1.6vw,18px) clamp(16px,1.8vw,22px);
  border-bottom: 1px solid var(--border-soft);
}
.info-row-label {
  flex: 0 0 clamp(104px,30%,150px);
  min-width: 0;
}
.info-row-title {
  font-weight: 700;
  font-size: 14.5px;
}
.info-row-value {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-body);
  text-align: center;
}
.row-center {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-text-row {
  display: flex;
  gap: 9px;
  align-items: center;
}
.feature-icon {
  flex: none;
  width: clamp(38px,3.4vw,46px);
  height: clamp(38px,3.4vw,46px);
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------- Pas faktów / Facts strip ---------- */
.fact-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(16px,1.8vw,22px);
}
.fact-value {
  font-weight: 800;
  font-size: clamp(20px,2vw,26px);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---------- Kalkulator tras / Route calculator ---------- */
.calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px,1.6vw,18px);
  align-items: flex-start;
}
.calc-field {
  flex: 1 1 200px;
  min-width: 0;
}
.field-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-label);
  margin-bottom: 8px;
}
.select-field {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  font-size: 15px;
  color: var(--text-primary);
  appearance: none;
}

/* ---------- Formularz kontaktowy / Contact form ---------- */
.form-field {
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font-size: 15px;
  width: 100%;
}

/* ---------- Nagłówki stron i teksty wstępne / Page headings and lead text ---------- */
.page-accent-bar {
  display: block;
  width: clamp(34px,4vw,56px);
  height: 3px;
  background: var(--mika-red);
  margin-bottom: clamp(14px,2vw,22px);
}
.page-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px,5.4vw,58px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.page-lead {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: clamp(15px,1.4vw,18px);
  line-height: 1.6;
  color: var(--text-body);
}
.heading-md {
  font-weight: 800;
  font-size: clamp(20px,2vw,26px);
  letter-spacing: -.02em;
}
.heading-sm {
  margin: 0;
  font-weight: 800;
  font-size: clamp(19px,1.9vw,24px);
  letter-spacing: -.02em;
}
.card-subtitle {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: clamp(12px,1.4vw,18px);
}

/* ---------- Strona „O firmie" — karty dofinansowań / About page — funding cards ---------- */
.invest-card-column {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(18px,2.2vw,26px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px,2vw,22px);
}
.invest-card-image {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* PL: Obrazek w karcie „szerokiej" może być większy i stoi na środku.
   EN: The image of a "wide" card may be larger and is centered. */
.invest-card-image-wide {
  max-width: 760px;
  margin: 0 auto;
}
/* PL: Opis pod obrazkiem, oddzielony cienką kreską.
   EN: The description under the image, separated by a thin rule. */
.invest-card-body {
  min-width: 0;
  padding-top: clamp(14px,1.6vw,18px);
  border-top: 1px solid #EDEEEF;  /* ta sama kreska co w sekcjach index.html / same rule as in index.html */
}
.invest-card-body-center { text-align: center; }
.invest-card-title {
  font-weight: 800;
  font-size: clamp(16px,1.6vw,19px);
  letter-spacing: -.01em;
}
.invest-card-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.invest-card-title + .invest-card-text { margin-top: 8px; }

/* PL: Siatka kart dofinansowań: 1 kolumna na telefonie, 2 obok siebie od 720 px.
       Karta „wide" (tablica informacyjna) zajmuje oba miejsca w rzędzie.
   EN: Funding card grid: 1 column on phones, 2 side by side from 720 px.
       The "wide" card (information board) spans both columns. */
.invest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 720px) {
  .invest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invest-grid > .invest-card-wide { grid-column: 1 / -1; }
}

/* ---------- Menu mobilne i stopka / Mobile menu and footer ---------- */
.mobile-menu-link {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
}
.footer-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-on-dark);
}
.footer-link:hover {
  color: var(--surface);
}


/* ---------- O firmie — opis i zdjęcie budynku / About — text and building photo ---------- */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.about-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
@media (min-width: 900px) {
  .about-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}