/* LAB sekcja „Poradniki na blogu” nowej strony głównej aslandi.pl, v1 (06.10.2026). Język jasnych sekcji strony: tło
   #f7f8f4 jak realizacje i „Poznaj nas”, nagłówek sosną ze złotym podkreśleniem (moduł podkreślenia rysuje kreskę),
   przycisk obrysem jak „Zobacz wszystkie realizacje”, karta jak film w sekcji YouTube (zdjęcie 16:9 nad tytułem, ten
   sam cień, uniesienie i powiększenie zdjęcia przy najechaniu). Komputer 3 x 2, tablet 2 kolumny; telefon lista
   (miniatura z lewej, tytuł z prawej), żeby sześć wpisów nie odsunęło formularza wyceny o kilka ekranów. */
.pr {
  --pr-sosna: #123f2d;
  --pr-atrament: #1c3428;
  --pr-szary: #58685f;
  --pr-tlo: #f7f8f4;
  --pr-szalwia: #eaf0e3;
  --pr-fokus: #a67b23;
  --pr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pr-r: 12px;
  position: relative;
  background: var(--pr-tlo);
  color: var(--pr-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(64px, 7vw, 104px);
}
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr h2, .pr p, .pr ul { margin: 0; }
.pr ul { padding: 0; list-style: none; }
.pr a { -webkit-tap-highlight-color: transparent; }
.pr ::selection { background: #cfdcc5; color: var(--pr-atrament); }
.pr :focus-visible { outline: 3px solid var(--pr-fokus); outline-offset: 3px; }

.pr-wew { width: min(1040px, 100% - 64px); margin-inline: auto; }
.pr-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.pr-tekst { max-width: 40rem; }
.pr h2 { font-size: clamp(30px, 2.2vw + 16px, 48px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--pr-sosna); text-wrap: balance; }
.pr h2 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.pr-lead { margin-top: 14px; font-size: clamp(16.5px, 0.3vw + 15px, 18.5px); line-height: 1.55; color: var(--pr-szary); text-wrap: pretty; }

/* Przycisk do wszystkich wpisów: obrys, drugorzędny wobec złotej „Bezpłatnej wyceny” (jak w realizacjach). */
.pr-wszystkie { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px;
  border: 1.5px solid var(--pr-sosna); border-radius: 10px; color: var(--pr-sosna); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--pr-ease); }
.pr-wszystkie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--pr-ease); }
.pr-wszystkie:active { transform: scale(0.97); }

.pr-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.pr-lista > li { display: flex; min-width: 0; }
.pr-karta { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--pr-r); background: #fff;
  color: var(--pr-atrament); text-decoration: none; touch-action: manipulation;
  box-shadow: 0 1px 3px rgba(18, 63, 45, 0.1), 0 22px 44px -28px rgba(18, 63, 45, 0.45);
  transition: transform 220ms var(--pr-ease), box-shadow 220ms var(--pr-ease); }
.pr-karta:focus-visible { outline-offset: 4px; }
.pr-karta:active { transform: scale(0.985); }
.pr-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pr-szalwia); }
.pr-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--pr-ease); }
.pr-brak { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pr-szalwia), #dbe6d3); }
.pr-tytul { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 16px 20px 20px;
  font-size: clamp(16.5px, 0.3vw + 14.5px, 18px); font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--pr-sosna); }

/* motyw (Astra) zmienia linkom kolor przy najechaniu i fokusie (a:hover, a:focus); linki sekcji trzymają swoje barwy */
.pr a.pr-karta, .pr a.pr-karta:hover, .pr a.pr-karta:focus, .pr a.pr-karta:active, .pr a.pr-karta:visited { color: var(--pr-atrament); }
.pr a.pr-wszystkie, .pr a.pr-wszystkie:focus, .pr a.pr-wszystkie:active, .pr a.pr-wszystkie:visited { color: var(--pr-sosna); }
@media (hover: hover) and (pointer: fine) {
  .pr-karta:hover { transform: translateY(-3px); box-shadow: 0 3px 8px rgba(18, 63, 45, 0.12), 0 28px 52px -28px rgba(18, 63, 45, 0.55); }
  .pr-karta:hover:active { transform: translateY(-1px) scale(0.985); }
  .pr-karta:hover .pr-media img { transform: scale(1.04); }
  .pr a.pr-wszystkie:hover { background: var(--pr-sosna); color: #fff; }
  .pr-wszystkie:hover svg { transform: translateX(3px); }
}

/* Tablet: dwie kolumny, przycisk pod zdaniem. */
@media (max-width: 1023px) {
  .pr-naglowek { flex-direction: column; align-items: flex-start; }
  .pr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: lista, miniatura 112 px z lewej, tytuł z prawej; przycisk na całą szerokość pod listą. */
@media (max-width: 599px) {
  .pr-wew { width: min(1040px, 100% - 32px); display: flex; flex-direction: column; }
  .pr-naglowek { display: contents; }
  .pr-tekst { margin-bottom: 24px; }
  .pr-wszystkie { order: 2; width: 100%; margin-top: 24px; }
  .pr-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr-karta { flex-direction: row; align-items: center; min-height: 84px; }
  .pr-media { width: 112px; align-self: stretch; aspect-ratio: auto; min-height: 84px; }
  .pr-tytul { padding: 12px 16px; font-size: 15.5px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-karta, .pr-media img, .pr-wszystkie, .pr-wszystkie svg { transition: none; }
  .pr-karta:hover, .pr-karta:active, .pr-wszystkie:active { transform: none; }
  .pr-karta:hover .pr-media img { transform: none; }
}