/*
 * Kościół w Ołtarzewie — własny język graficzny strony.
 *
 * Wzorowane na układzie PSZOK-u (karty na jasnym tle, pasek akcentu przy
 * najważniejszym bloku, rozstrzelone nadtytuły), ale z własnym prefiksem
 * `kosc__`. Klasy `pszok__` celowo nie są tu używane — poprawka w PSZOK-u
 * nie ma prawa zmieniać wyglądu kościoła.
 *
 * Kolory wyłącznie ze zmiennych motywu: serwis ma tryb ciemny i wysoki
 * kontrast, więc wpisany z ręki #fff daje szary tekst na białym prostokącie.
 */

/* ---------------------------------------------------------------- wstęp */

.kosc__wstep {
  max-width: 78ch;
  margin: 0 0 var(--s4);
  font-size: 18px;
  color: var(--tekst);
}

.kosc__wstep strong {
  font-weight: var(--weight-semi-bold);
}

/* ------------------------------------------------------------- nadtytuł */

.kosc__nadtytul {
  display: block;
  margin: 0 0 var(--s2);
  font-size: 12px;
  font-weight: var(--weight-semi-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akcent);
}

/* --------------------------------------------------------------- sekcja */

.kosc__sekcja {
  margin: 0 0 var(--s6);
}

.kosc__sekcja > h2 {
  margin: 0 0 var(--s4);
}

@media (min-width: 1024px) {
  .kosc__sekcja {
    margin-bottom: var(--s7);
  }
}

/* -------------------------------------------------- blok „kiedy msza” */

/*
 * Pierwszy ekran ma odpowiedzieć na jedyne pytanie, z którym tu ludzie
 * przychodzą. Pasek akcentu z lewej odróżnia go od pozostałych kart.
 */
.kosc__msze {
  margin: 0 0 var(--s6);
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
  box-shadow: var(--cien-1);
}

.kosc__msze > h2 {
  margin: 0 0 var(--s3);
}

.kosc__msze-siatka {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.kosc__msze-poz {
  padding: var(--s3);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-s);
  background: var(--tlo-delikatne);
}

.kosc__msze-poz h3 {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: var(--weight-semi-bold);
  color: var(--tekst);
}

.kosc__godziny {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: var(--weight-semi-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--tekst);
}

.kosc__msze-poz > .kosc__drobne:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .kosc__msze {
    padding: var(--s5);
  }
}

/* ----------------------------------------------------------- karty */

/*
 * minmax(min(280px, 100%), 1fr) — przy jednej karcie ma się rozciągnąć
 * na całą szerokość, a nie zostać słupkiem. To był błąd w `.pszok__karty`,
 * naprawiony 14.08; nie powtarzamy go tutaj.
 */
.kosc__karty {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.kosc__karta {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
  box-shadow: var(--cien-1);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.kosc__karta:hover,
.kosc__karta:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--cien-2);
}

.kosc__karta h3 {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: var(--weight-semi-bold);
  color: var(--tekst);
}

.kosc__karta > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------- kafel „gdzie to jest” */

/*
 * Kafel adresu zastąpił odnośnik w tekście i zaślepkę mapy. Nie ma tu ramki
 * z Google — dojazd otwiera się w Mapach w nowej karcie, więc strona nie
 * ciągnie nic z zewnątrz i działa bez skryptów.
 */
.kosc__miejsce {
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  background: var(--tlo-karta);
  box-shadow: var(--cien-1);
}

.kosc__miejsce-nazwa {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: var(--weight-semi-bold);
  line-height: 1.4;
  color: var(--tekst);
}

.kosc__miejsce-adres {
  margin: 0 0 var(--s2);
  font-size: 16px;
  line-height: 1.68;
  color: var(--tekst);
}

.kosc__miejsce-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-width: 44px;
  min-height: 44px;
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--akcent);
  border-radius: var(--r-s);
  background: var(--akcent);
  color: var(--tekst-odwrocony);
  font-size: 16px;
  font-weight: var(--weight-semi-bold);
  text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.kosc__miejsce-link:hover,
.kosc__miejsce-link:focus-visible {
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
  color: var(--tekst-odwrocony);
  transform: translateY(-1px);
}

.kosc__miejsce-drobne {
  margin: var(--s2) 0 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--tekst-przygaszony);
}

.kosc__miejsce > .kosc__drobne:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .kosc__miejsce {
    padding: var(--s5);
  }
}

/* ---------------------------------------------------------- drobny druk */

.kosc__drobne {
  margin: 0 0 var(--s2);
  font-size: 14px;
  line-height: 1.68;
  color: var(--tekst-przygaszony);
}

.kosc__drobne a {
  color: var(--akcent);
}

.kosc__lista {
  margin: 0;
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.68;
  color: var(--tekst);
}

.kosc__lista li + li {
  margin-top: var(--s2);
}

/* ------------------------------------------------------------- przycisk */

.kosc__przycisk {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--akcent);
  border-radius: var(--r-s);
  background: var(--akcent);
  color: var(--tekst-odwrocony);
  font-size: 16px;
  font-weight: var(--weight-semi-bold);
  text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.kosc__przycisk:hover,
.kosc__przycisk:focus-visible {
  background: var(--akcent-jasny);
  border-color: var(--akcent-jasny);
  color: var(--tekst-odwrocony);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------- stopka */

.kosc__stopka {
  margin: var(--s6) 0 var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--obwodka);
}

.kosc__stopka h2 {
  margin: 0 0 var(--s3);
}

.kosc__stopka p {
  max-width: 78ch;
  margin: 0 0 var(--s3);
  font-size: 16px;
  line-height: 1.68;
  color: var(--tekst);
}

.kosc__zrodlo {
  margin: var(--s4) 0 var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--obwodka);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--tekst-przygaszony);
}

.kosc__zrodlo a {
  color: var(--akcent);
}

/* Sanktuarium w Ożarowie mylone z parafią w Ołtarzewie — wyróżniamy
   sprostowanie delikatnym tłem, żeby nie ginęło w drobnym druku. */
.kosc__sprostowanie {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--ostrzezenie);
  border-radius: var(--r-s);
  background: var(--tlo-delikatne);
  font-size: 14px;
  line-height: 1.68;
  color: var(--tekst-przygaszony);
}

.kosc__sprostowanie a {
  color: var(--akcent);
}