/* /kierunek/<slug>/: a magazine feature page. Light only; tokens from styl.css.
   Cover photo (or a sun-over-horizon tile), a paper sheet with the H1 overlapping it on
   desktop, then facts under side heads separated by rules. Month and airport pages copy this. */

/* ---------------------------------------------------------------- cover */
.kier-okladka { position: relative; }
.kier-foto { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--gutter)); background: var(--papier-2); }
.kier-foto-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
.kier-podpis { font-size: .6875rem; line-height: 1.45; color: var(--tusz-2); padding: .45rem var(--gutter) 0; text-align: right; }
.kier-podpis a { color: inherit; }
.kier-podpis a:hover { color: var(--akcent-tekst); }

/* no photo yet: an intentional tile, sky, sun and sandy horizon; three variants by slug */
.kier-kafel { overflow: hidden; aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #F3E3CC 0, var(--piasek) 62%, var(--piasek-2) 62% 100%); }
.kier-kafel-slonce { position: absolute; left: 68%; top: 22%; width: clamp(72px, 16vw, 168px); aspect-ratio: 1;
  border-radius: 50%; background: var(--slonce);
  box-shadow: 0 0 0 clamp(10px, 2.4vw, 24px) rgba(242, 167, 102, .26), 0 0 0 clamp(20px, 4.8vw, 48px) rgba(242, 167, 102, .12); }
.kier-kafel::after { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: rgba(26, 23, 20, .18); }
.kier-kafel-1 { background: linear-gradient(180deg, #F1DFC6 0, #EFDCC2 56%, #E6C7A1 56% 100%); }
.kier-kafel-1 .kier-kafel-slonce { left: 18%; top: 30%; }
.kier-kafel-1::after { top: 56%; }
.kier-kafel-2 { background: linear-gradient(180deg, #F4DDC2 0, #F1D2B0 60%, #D9AE85 60% 100%); }
.kier-kafel-2 .kier-kafel-slonce { left: 46%; top: 38%; background: #EE9A5A; }
.kier-kafel-2::after { top: 60%; }
.kier-kafel-znak { position: absolute; right: var(--gutter); bottom: .75rem; margin: 0; font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(26, 23, 20, .62); font-variant-numeric: tabular-nums; }

/* the sheet with the title */
.kier-arkusz { position: relative; z-index: 2; background: var(--papier); padding: 1.5rem 0 0; max-width: 46rem; }
.kier-arkusz::before { content: ""; position: absolute; left: 0; top: 0; width: 3.5rem; height: 4px; background: var(--akcent); }
.kier-arkusz h1 { font-size: clamp(2.75rem, 1.5rem + 5.4vw, 5.75rem); font-weight: 500; line-height: .95;
  letter-spacing: -0.04em; margin: 0 0 1.1rem; }
.kier-h1-kraj { display: block; margin-top: .45em; font-size: clamp(1.125rem, .95rem + .8vw, 1.5rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--tusz-2); }
.kier-wstep { font-family: var(--font-naglowek); font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.45;
  letter-spacing: -0.01em; max-width: 38rem; margin: 0; text-wrap: pretty; }

@media (min-width: 760px) {
  .kier-foto { margin: 0; }
  .kier-foto-img { aspect-ratio: auto; height: clamp(420px, 56vw, 660px); }
  figure.kier-foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
    background: linear-gradient(0deg, rgba(24, 16, 10, .55), rgba(24, 16, 10, 0)); }
  .kier-podpis { position: absolute; z-index: 1; right: 1rem; bottom: .9rem; max-width: min(22rem, 30%); padding: 0;
    color: rgba(255, 255, 255, .86); }
  .kier-podpis a:hover { color: #fff; }
  .kier-kafel { aspect-ratio: auto; height: clamp(300px, 34vw, 420px); }
  .kier-arkusz { margin-top: calc(-1 * var(--nachodzi)); max-width: min(46rem, 64%); padding: 1.75rem var(--arkusz-pad) 0; }
  .kier-arkusz::before { left: var(--arkusz-pad); }
}

@media (prefers-reduced-motion: no-preference) {
  .kier-foto-img { animation: okladka-oddech 2.8s var(--ease) both; }
  .kier-arkusz { animation: wjazd 1.1s var(--ease) .2s both; }
}

/* ---------------------------------------------------------------- facts under side heads */
.kier-tresc { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.kier-sekcja { border-top: 2px solid var(--linia); padding-top: .9rem; margin-top: clamp(2.75rem, 6vw, 4.25rem); }
.kier-sekcja:first-child { margin-top: 0; }
.kier-sekcja > h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); font-weight: 500; letter-spacing: -0.025em; margin: 0 0 1.25rem; }
.kier-sekcja-tresc { min-width: 0; }
@media (min-width: 900px) {
  .kier-sekcja { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.5rem; }
  .kier-sekcja > h2 { margin: 0; position: sticky; top: 1.5rem; align-self: start; max-width: 9em; }
}
.kier-zrodlo { font-size: .8125rem; line-height: 1.55; color: var(--tusz-2); margin: .75rem 0 0; max-width: 60rem; }
.kier-zrodlo a { color: inherit; }
.kier-zrodlo a:hover { color: var(--akcent-tekst); }

/* ---------------------------------------------------------------- climate table: a ruled almanac, not a spreadsheet */
.kl-tabela { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums lining-nums; }
.kl-tabela th, .kl-tabela td { padding: .5rem .3rem; text-align: right; border-bottom: 1px solid var(--linia-miekka); white-space: nowrap; }
.kl-tabela thead th { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tusz-2);
  white-space: normal; vertical-align: bottom; line-height: 1.3; border-bottom: 1px solid var(--linia); padding-bottom: .45rem; }
.kl-tabela .kl-j { display: block; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.kl-tabela th:first-child { text-align: left; padding-left: 0; }
.kl-tabela td:last-child, .kl-tabela th:last-child { padding-right: 0; }
.kl-tabela tbody th { font-weight: 600; color: var(--tusz); }
.kl-tabela td { color: var(--tusz-2); }
.kl-tabela td.kl-dzien { color: var(--tusz); font-weight: 700; }
.kl-tabela .kl-brak { font-style: italic; font-size: .75rem; }
.kl-pasek { width: 26%; }
.kl-tabela td.kl-pasek { padding-left: .6rem; padding-right: .6rem;
  background: linear-gradient(var(--linia-miekka), var(--linia-miekka)) center / calc(100% - 1.2rem) 1px no-repeat; }
.kl-pasek span { display: block; height: 6px; border-radius: 3px; margin-left: var(--od); width: max(6px, calc(var(--do) - var(--od)));
  background: linear-gradient(90deg, var(--piasek-2), var(--akcent)); }
.kl-wyrozniony th, .kl-tabela .kl-wyrozniony td.kl-dzien { color: var(--akcent-tekst); }
.kl-wyrozniony { background: linear-gradient(90deg, rgba(194, 65, 12, .07), rgba(194, 65, 12, 0) 80%); }
@media (min-width: 560px) {
  .kl-tabela { font-size: .9375rem; }
  .kl-tabela th, .kl-tabela td { padding: .55rem .6rem; }
  .kl-tabela thead th { font-size: .6875rem; }
  .kl-tabela tbody th { font-family: var(--font-naglowek); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; }
  .kl-pasek { width: 34%; }
}

/* ---------------------------------------------------------------- flights per airport */
.kier-loty { list-style: none; margin: 0; padding: 0; }
.kier-lot { padding: 1.4rem 0; border-top: 1px solid var(--linia-miekka); }
.kier-lot:first-child { border-top: 0; padding-top: .25rem; }
.kier-lot p { margin: 0; }
.kier-lot-skad { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.kier-lot-skad h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.025em; margin: 0; }
.kier-lot-skad h3 a { text-decoration: none; }
.kier-lot-km { font-size: .875rem; font-weight: 600; color: var(--tusz-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kier-rok { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px; max-width: 26rem; }
.kier-rok li { border-top: 4px solid var(--linia-miekka); padding-top: .3rem; text-align: center; font-size: .625rem;
  font-weight: 700; letter-spacing: .06em; color: #A79C8B; }
.kier-rok li.jest { border-top-color: var(--akcent); color: var(--tusz); }
.kier-lot-przewoznicy { font-weight: 700; }
.kier-lot-dowod { color: var(--tusz-2); font-size: .9375rem; }
.kier-lot-link { margin-top: .7rem !important; }
.kier-narzedzie { font-size: .875rem; font-weight: 700; color: var(--akcent-tekst); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.kier-narzedzie::after { content: " \2192"; }
.kier-narzedzie:hover { color: var(--tusz); }
@media (min-width: 700px) {
  .kier-lot { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem; }
  .kier-lot-skad { display: block; margin: 0; }
  .kier-lot-km { margin-top: .3rem !important; }
}

/* ---------------------------------------------------------------- entry, MSZ, currency */
.kier-fakty { margin: 0; }
.kier-fakt { padding: 1rem 0; border-top: 1px solid var(--linia-miekka); }
.kier-fakt:first-child { border-top: 0; padding-top: .25rem; }
.kier-fakt dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akcent-tekst);
  line-height: 1.4; margin: 0 0 .4rem; }
.kier-fakt dd { margin: 0; min-width: 0; }
.kier-fakt p { margin: 0; }
.kier-fakt-wartosc { font-family: var(--font-naglowek); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 500;
  line-height: 1.25; letter-spacing: -0.015em; }
.kier-msz { color: var(--akcent-tekst); }
.kier-cytat { margin-top: .5rem !important; padding-left: .9rem; border-left: 2px solid var(--akcent); font-size: .9375rem;
  line-height: 1.55; color: var(--tusz-2); max-width: 42rem; }
.kier-kurs { margin-top: .3rem !important; font-variant-numeric: tabular-nums; }
.kier-kurs a { color: inherit; }
@media (min-width: 600px) {
  .kier-fakt { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 1.5rem; }
  .kier-fakt dt { margin: .45rem 0 0; }
}

/* ---------------------------------------------------------------- partners, cross-links */
.kier-partnerzy { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 5vw, 3rem); }
.kier-linki { margin-top: clamp(2.75rem, 6vw, 4.25rem); }
.kier-linki h2 { font-family: var(--font-tekst); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .9rem; padding-top: .75rem; border-top: 2px solid var(--linia); }
.kier-linki .lista-linkow + h2 { margin-top: 2.25rem; }