/* ============================================================
   webkartka.pl — sekcja „Pełna oferta” na stronie głównej (#uslugi)
   Uzupełnia assets/index-webkartka-brand-v1.css (zmienne kolorów i krojów).
   ============================================================ */

.wku-list { margin-top: 3.5rem; border-top: 2px solid #000; }
.wku-row {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .75rem; row-gap: .45rem;
  padding: 1.25rem 0 1.4rem; border-bottom: 1px solid rgba(0, 0, 0, .14);
  color: inherit; text-decoration: none;
}
.wku-n { font-family: var(--font-mark); font-size: .8125rem; font-weight: 500; line-height: 2.2; color: rgba(0, 0, 0, .42); }
.wku-t {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-row); line-height: var(--text-row--line-height); letter-spacing: var(--text-row--letter-spacing);
  transition: color .25s;
}
.wku-b { grid-column: 2; max-width: 44rem; font-size: var(--text-body); line-height: 1.55; letter-spacing: -.011em; color: rgba(0, 0, 0, .62); }
.wku-go { display: none; }
.wku-row:hover .wku-t, .wku-row:focus-visible .wku-t { color: var(--color-cobalt); }
.wku-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2.5rem; }
.wku-note { flex-basis: 100%; margin-top: .25rem; font-size: .875rem; color: rgba(0, 0, 0, .6); }

@media (min-width: 768px) {
  .wku-list { margin-top: 5rem; }
}
@media (min-width: 900px) {
  .wku-row { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 3rem; align-items: baseline; column-gap: 1.5rem; padding: 1.6rem 0; }
  .wku-b { grid-column: 3; }
  .wku-go { display: block; justify-self: end; font-size: 1.5rem; line-height: 1; transition: transform .3s, color .25s; }
  .wku-row:hover .wku-go { transform: translateX(.35rem); color: var(--color-cobalt); }
  .wku-note { flex-basis: auto; margin: 0 0 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wku-t, .wku-go { transition: none; }
}

/* Menu nagłówka strony głównej: przy 10 pozycjach węższe odstępy na ekranach 1024–1179 px */
@media (min-width: 1024px) and (max-width: 1179px) {
  header nav[aria-label="Główna"] > a:not(:last-child) { padding-left: .5rem; padding-right: .5rem; }
}