/*
 * Layout właściwy każdej z 13 sekcji strony głównej. Komponenty (przyciski,
 * karty, formularze) są w components.css — tu tylko siatki i pozycjonowanie.
 */

/* ---------- Hero ---------- */

.hero__grid {
  display: flex; flex-direction: column; min-height: 600px;
  /* Oryginał (Lovable) jest celowo pełnej szerokości (bez .container-custom) —
     na zwykłych ekranach zostaje tak jak w źródle. Ale bez górnego ograniczenia
     na bardzo szerokich monitorach (2560px+) zdjęcie rozciąga się w nieskończoność
     i wygląda na niedopracowane, więc dodajemy pułap tylko dla ekstremalnych szerokości. */
  max-width: 1920px; margin-left: auto; margin-right: auto;
}
.hero__media {
  position: relative; order: -1; height: 320px; width: 100%; overflow: hidden;
}
.hero__media img {
  position: absolute; inset: 0; height: 100%; width: 100%;
  object-fit: cover; object-position: center top;
}
.hero__spine { position: absolute; bottom: 2rem; right: 1.5rem; opacity: 0.8; }
.hero__content { order: 1; padding: 3rem 1.25rem; }
.hero__content .heading-1 { margin-top: 1.5rem; color: var(--foreground); }
.hero__content .body-text { margin-top: 1.5rem; max-width: 560px; }
.hero__phone {
  margin-top: 2rem; display: flex; align-items: center; gap: 1rem;
}
.hero__phone-icon {
  display: flex; height: 48px; width: 48px; flex-shrink: 0; align-items: center;
  justify-content: center; border-radius: 999px; background-color: var(--primary);
}
.hero__phone-icon svg { color: var(--primary-foreground); width: 20px; height: 20px; }
.hero__phone-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.hero__divider { margin-top: 2rem; width: 100%; border: 0; border-top: 1px solid var(--border); }
.hero__address { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.hero__address svg { flex-shrink: 0; color: var(--primary); width: 16px; height: 16px; }
.hero__social { margin-top: 0.75rem; }
.hero__social a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: color 150ms ease, text-decoration-color 150ms ease; }
.hero__social a:hover { color: var(--primary); text-decoration-color: var(--primary); }

@media (min-width: 768px) {
  .hero__grid { display: grid; grid-template-columns: 55fr 45fr; gap: 0; }
  .hero__media { order: 2; height: auto; min-height: 680px; }
  .hero__content {
    order: 1; padding-top: 6rem; padding-bottom: 6rem;
    padding-right: 4rem;
    /* Liczone względem min(100vw, 1920px), nie gołego 100vw — .hero__grid
       ma max-width:1920px i się centruje, więc powyżej tej szerokości ekranu
       trzeba użyć jej sufitu, inaczej ten padding dokłada się do marginesu
       centrującego .hero__grid i tekst ucieka daleko w prawo. */
    padding-left: max(32px, calc((min(100vw, 1920px) - 1280px) / 2 + 32px));
  }
}

/* ---------- Pasek korzyści ---------- */

.benefits-bar { background-color: var(--color-section-alt); padding: 1.25rem 0; }
.benefits-bar__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.benefits-bar__item { display: flex; min-height: 44px; align-items: center; gap: 0.75rem; }
.benefits-bar__item svg { flex-shrink: 0; color: var(--primary); width: 20px; height: 20px; }
.benefits-bar__item span { font-weight: 600; color: var(--foreground); }

@media (min-width: 768px) {
  .benefits-bar__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .benefits-bar__item { justify-content: center; }
}

/* ---------- Zakres pomocy (metody) ---------- */

.methods__select-label { margin-top: 2rem; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--primary); }

.methods__cards { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.methods__card svg { margin-bottom: 1.25rem; color: var(--primary); width: 32px; height: 32px; }
.methods__card h3 { margin-bottom: 1.25rem; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--primary); }
.methods__card ul { display: flex; flex-direction: column; gap: 0.75rem; }
.methods__bullet { display: flex; gap: 1rem; }
.methods__bullet::before {
  content: ""; margin-top: 0.5rem; height: 8px; width: 8px; flex-shrink: 0;
  border-radius: 999px; background-color: var(--primary);
}
.methods__bullet a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.methods__bullet a:hover { text-decoration-color: var(--primary); color: var(--primary); }

.methods__panel { margin-top: 4rem; width: 100%; border: 1px solid var(--border); background-color: var(--color-section-alt); padding: 2rem; }
.methods__panel .body-text { margin-top: 1rem; max-width: 68rem; text-wrap: pretty; }
.methods__columns { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.methods__columns ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.methods__cta {
  margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;
  border-left: 3px solid var(--color-gold); background-color: var(--background); padding: 1.5rem;
}
.methods__cta p { max-width: 640px; }

@media (min-width: 768px) {
  .methods__cards { grid-template-columns: repeat(2, 1fr); }
  .methods__columns { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; }
  .methods__panel { padding: 2.5rem; }
  .methods__cta { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .methods__cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pierwsza wizyta ---------- */

.first-visit__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.first-visit__card .step-number { font-weight: 600; color: var(--muted-foreground); }
.first-visit__card h3 { margin-top: 1.5rem; }
.first-visit__card p { margin-top: 1rem; }
.first-visit__summary { margin-top: 2rem; text-align: center; font-weight: 600; }

@media (min-width: 768px) { .first-visit__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .first-visit__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Cennik ---------- */

.pricing__group { margin-top: 2rem; }
.pricing__group h3 { margin-bottom: 1rem; }
.pricing__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem 0;
}
.pricing__row .price-text { flex-shrink: 0; white-space: nowrap; color: var(--foreground); }
.pricing__row .duration { display: block; color: var(--muted-foreground); }
.pricing__row a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.pricing__row a:hover { text-decoration-color: var(--primary); color: var(--primary); }
.pricing__note { margin-top: 2rem; color: var(--muted-foreground); }

@media (min-width: 768px) {
  .pricing__row .duration { display: inline; }
  .pricing__row .duration::before { content: " · "; }
}

/* ---------- Voucher ---------- */

.voucher-section { position: relative; overflow: hidden; }
.voucher-section__spine {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: none; pointer-events: none; color: rgba(255,255,255,0.6);
}
.voucher__grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
.voucher__image img { width: 100%; height: auto; }
.voucher__form-wrap { position: relative; margin-top: 1.5rem; width: 100%; }
.voucher-toggle { margin-top: 2rem; }
.voucher-toggle__summary { list-style: none; cursor: pointer; width: 100%; max-width: 420px; }
.voucher-toggle__summary::-webkit-details-marker { display: none; }
.voucher-toggle__summary svg { transition: transform 150ms ease; }
.voucher-toggle[open] .voucher-toggle__summary svg { transform: rotate(180deg); }

@media (min-width: 1024px) {
  .voucher__grid { grid-template-columns: 60fr 40fr; }
  .voucher-section__spine { display: block; }
}

/* ---------- O nas ---------- */

.about__grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: 3rem; }
.about__image img { aspect-ratio: 4 / 5; width: 100%; border-radius: 8px; object-fit: cover; }
.about__badges { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

@media (min-width: 1024px) { .about__grid { grid-template-columns: 40fr 60fr; } }

/* ---------- Zespół ---------- */

.team__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.team__photo { aspect-ratio: 3 / 4; width: 100%; overflow: hidden; background-color: var(--color-section-alt); }
.team__photo img { height: 100%; width: 100%; object-fit: cover; }
.team__photo--placeholder { display: flex; align-items: center; justify-content: center; }
.team__photo--placeholder svg { color: var(--muted-foreground); width: 48px; height: 48px; }
.team__card h3 { margin-top: 0; }
.team__card .role { margin-top: 0.5rem; font-weight: 600; color: var(--primary); }
.team__card .bio { margin-top: 1.5rem; }
.team__body { padding: 24px; }
.team__teaser { margin: 1rem 0; }
.team__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.team__chips li {
  font-size: 14px; line-height: 1.3; padding: 5px 12px; border-radius: 999px;
  background-color: var(--color-section-alt); color: var(--primary);
}
.team__more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto; padding: 12px 16px; width: 100%;
  font: inherit; font-weight: 600; color: var(--primary);
  background: transparent; border: 1px solid var(--primary); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.team__more:hover { background-color: var(--primary); color: var(--primary-foreground); }
.team__more .stc-icon { width: 18px; height: 18px; }

/* Okno "Poznaj …" — natywny <dialog>; na telefonie wysuwany od dołu. */
html:has(.team-modal[open]) { overflow: hidden; }
.team-modal {
  width: min(1000px, calc(100% - 48px)); max-height: 88vh; margin: auto; padding: 0; border: 0; overflow-y: auto;
  background-color: var(--background); color: var(--color-body);
}
.team-modal:focus, .team-modal:focus-visible { outline: none; }
.team-modal .body-text { font-size: 16px; line-height: 1.6; }
.team-modal::backdrop { background-color: rgba(20, 24, 22, 0.55); }
.team-modal__inner { position: relative; padding: 32px; }
.team-modal__close-form { position: absolute; top: 16px; right: 16px; margin: 0; }
.team-modal__close {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 0; color: var(--color-body); cursor: pointer;
}

/* Góra: zdjęcie po lewej, obok imię, stanowisko i opis. */
.team-modal__top {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 32px;
  grid-template-areas: "photo name" "photo bio"; grid-template-rows: auto 1fr;
  padding-right: 36px;
}
.team-modal__photo {
  grid-area: photo; width: 170px; aspect-ratio: 3 / 4; overflow: hidden;
  background-color: var(--color-section-alt);
}
.team-modal__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-modal__name { grid-area: name; }
.team-modal__name .heading-3 { color: var(--foreground); }
.team-modal__name .role { margin-top: 0.25rem; font-weight: 600; color: var(--primary); }
.team-modal__bio { grid-area: bio; margin-top: 0.75rem; }
.team-modal__bio > * + * { margin-top: 0.75rem; }

/* Dół: grupy "nagłówek + lista" w kolumnach. */
.team-modal__groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem 2.5rem;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.team-modal__group strong { color: var(--foreground); }
.team-modal__groups { grid-auto-flow: row dense; }
@media (min-width: 768px) { .team-modal__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-modal__group:not(:has(ul, ol)), .team-modal__group:only-child { grid-column: 1 / -1; }
.team-modal__group h2, .team-modal__group h3, .team-modal__group h4 {
  font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--foreground);
}
.team-modal__group > * + * { margin-top: 0.5rem; }
.team-modal__bio ul, .team-modal__bio ol { padding-left: 1.25rem; list-style: disc; }
.team-modal__bio li + li { margin-top: 0.2rem; }
.team-modal__group ul { margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.team-modal__group li + li { margin-top: 0.2rem; }
.team-modal__group:only-child ul { columns: 2; column-gap: 2.5rem; }
.team-modal__group:only-child li { break-inside: avoid; }
.team-modal__group:only-child li + li { margin-top: 0; margin-bottom: 0.2rem; }

.team-modal__cta {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end;
  margin: 1.25rem -32px -32px; padding: 12px 32px 24px; background-color: var(--background);
}
.team-modal__call {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px;
  font-weight: 600; color: var(--primary); border: 1px solid var(--primary);
  transition: background-color 150ms ease, color 150ms ease;
}
.team-modal__call:hover { background-color: var(--primary); color: var(--primary-foreground); }
.team-modal__call .stc-icon { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .team__photo { aspect-ratio: 4 / 3; }
  .team__photo img { object-position: center 20%; }
  .team-modal {
    width: 100%; max-width: 100%; max-height: 90vh;
    margin: auto 0 0; border-radius: 16px 16px 0 0;
  }
  .team-modal__inner { padding: 24px 20px; }
  .team-modal__top {
    grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center;
    grid-template-areas: "photo name" "bio bio"; grid-template-rows: auto auto; padding-right: 40px;
  }
  .team-modal__photo { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 50%; }
  .team-modal__bio { margin-top: 1rem; }
  .team-modal__groups { margin-top: 1.25rem; padding-top: 1.25rem; gap: 1.25rem; }
  .team-modal__group:only-child ul { columns: 1; }
  .team-modal__cta { margin: 1.5rem -20px -24px; padding: 12px 20px; border-top: 1px solid var(--border); }
  .team-modal__call {
    width: 100%; justify-content: center; padding: 14px 20px;
    background-color: var(--primary); color: var(--primary-foreground);
  }
}

@media (min-width: 768px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Gabinet (galeria) ---------- */

.gallery__grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.gallery__item {
  position: relative; aspect-ratio: 4 / 3; width: 100%; cursor: pointer;
  overflow: hidden; background-color: var(--color-section-alt); border: 0; padding: 0; display: block;
}
.gallery__item img { height: 100%; width: 100%; object-fit: cover; transition: transform 300ms ease; }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__directions { margin-top: 3rem; border-left: 3px solid var(--primary); background-color: var(--color-section-alt); padding: 2rem; }
.gallery__directions p { margin-top: 1rem; }

.gallery__directions-links { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.directions-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: 999px;
  background-color: var(--background); border: 1px solid var(--border);
  font-weight: 600; font-size: 0.9rem; transition: border-color 150ms ease, color 150ms ease;
  /* !important: wewnątrz treści strony (.stc-content a ma wyższą specyficzność
     przez dodatkowy selektor tagu) ten komponent musi wyglądać identycznie
     jak poza nią — to plakietka, nie zwykły link tekstowy. */
  color: var(--foreground) !important; text-decoration: none !important;
}
.directions-link:hover { border-color: var(--primary); color: var(--primary); }
/* Selektor z klasą rodzica przebija .stc-content img (margines 1.5rem), gdy plakietka
   jest wstawiona w treść podstrony. */
.directions-link .directions-link__icon { width: 24px; height: 24px; margin: 0; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

@media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }

.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; background-color: rgba(0,0,0,0.9); padding: 1rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 85vh; max-width: 100%; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10; display: flex;
  align-items: center; justify-content: center; height: 44px; width: 44px;
  border-radius: 999px; background-color: rgba(0,0,0,0.6); border: 0; color: #fff; cursor: pointer;
}
.lightbox__close:hover { background-color: rgba(0,0,0,0.8); }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox img { touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.lightbox__nav {
  position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center;
  height: 52px; width: 52px; margin-top: -26px; border-radius: 999px;
  background-color: rgba(0,0,0,0.6); border: 0; color: #fff; cursor: pointer;
  transition: background-color 150ms ease;
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav:hover { background-color: rgba(0,0,0,0.85); }
.lightbox__nav svg { width: 28px; height: 28px; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__counter {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 4px 12px; border-radius: 999px; background-color: rgba(0,0,0,0.6);
  color: #fff; font-size: 14px; font-weight: 600;
}
.lightbox__counter[hidden] { display: none; }
@media (max-width: 767px) {
  .lightbox__nav { height: 44px; width: 44px; margin-top: -22px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* Sticky bar mobilny chowa się, gdy lightbox jest otwarty. */
.lightbox-open .mobile-sticky-bar { display: none; }

/* ---------- Opinie ---------- */

.reviews__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.reviews__card { justify-content: space-between; }
.reviews__stars { display: flex; gap: 0.25rem; }
.reviews__stars svg { color: var(--color-gold); fill: currentColor; width: 20px; height: 20px; }
.reviews__author { margin-top: 2rem; font-weight: 500; color: var(--muted-foreground); }
.reviews__cta { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }

@media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Blog ---------- */

.blog__head { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.blog__head a { display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--primary); }
.blog__head a:hover { color: var(--color-accent-dark); }
.blog__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.blog__thumb { aspect-ratio: 16 / 9; width: 100%; }
.blog__thumb img { height: 100%; width: 100%; object-fit: cover; }
.blog__thumb--placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-color: var(--color-section-alt); padding: 1.5rem;
}
.blog__card .date { color: var(--muted-foreground); }
.blog__card h3 { margin-top: 1rem; }
.blog__card p { margin-top: 1rem; flex: 1 1 auto; }
.blog__card .read-more { margin-top: 1.5rem; display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--primary); }
.blog__card .read-more:hover { color: var(--color-accent-dark); }

@media (min-width: 640px) { .blog__head { flex-direction: row; align-items: flex-end; } }
@media (min-width: 768px) { .blog__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */

.faq__list { margin-top: 4rem; width: 100%; }

/* ---------- Kontakt ---------- */

.contact__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 3rem; }
.contact__phones { display: flex; flex-direction: column; gap: 1rem; }
.contact__details { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.contact__details-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.contact__details a.email-link { display: flex; min-height: 44px; align-items: center; margin-top: 0.5rem; transition: color 150ms ease; }
.contact__details a.email-link:hover { color: var(--primary); }
.contact__map { height: 320px; width: 100%; overflow: hidden; border-radius: 8px; }
.contact__map iframe { height: 100%; width: 100%; border: 0; }


@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 48fr 52fr; }
  .contact__map { height: auto; min-height: 600px; }
}

/* Układ 'split' (stc_contact_layout): telefony + dane po lewej, formularz po prawej,
   niska mapa pasem na całą szerokość pod spodem. */
.contact__grid--split { align-items: start; }
.contact__phone-links { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.contact__phone-links a { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; font-size: 24px; font-weight: 700; color: var(--primary); transition: color 150ms ease; }
.contact__phone-links a:hover { color: var(--color-accent-dark); }
.contact__phone-links .stc-icon { width: 22px; height: 22px; }
.contact__grid--split .contact__details { margin-top: 2rem; border-top: 0; padding-top: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.contact__grid--split .contact__value { margin-top: 0.5rem; }
.contact__grid--split .contact__details a.email-link { display: inline; min-height: 0; margin: 0; }
/* Wskazówki wejścia/parkingu — osobna ramka, żeby nie czytały się jako część adresu. */
.contact__hint {
  margin-top: 0.75rem; padding: 0.75rem 1rem;
  background: var(--color-section-alt); border-left: 3px solid var(--primary);
  font-size: 14px; line-height: 1.55; color: var(--color-body);
}
.contact__hint strong { color: var(--foreground, inherit); font-weight: 600; }
.contact__route { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact__route svg.directions-link__icon { color: var(--primary); }
.contact__social a { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; color: var(--primary); font-weight: 500; transition: color 150ms ease; }
.contact__social a:hover { color: var(--color-accent-dark); }
.contact__social .stc-icon { width: 20px; height: 20px; }
.contact__map--band { margin-top: 3rem; height: 300px; min-height: 0; }
@media (min-width: 1024px) {
  .contact__grid--split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .contact__map--band { height: 360px; }
}

/* ---------- Pasek sticky mobilny ---------- */

.mobile-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 64px;
  background-color: #fff; padding: 0 1rem; box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.mobile-sticky-bar__inner { display: flex; height: 100%; align-items: center; gap: 1rem; }
.mobile-sticky-bar a {
  display: flex; height: 48px; flex: 1 1 0; align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
/* Zdjęcie wyróżniające wpisu blogowego na pełną szerokość ekranu (full-bleed),
   mimo że stoi wewnątrz .container-custom (max-width:820px + padding). Technika
   calc(50% - 50vw) przełamuje ograniczenie kontenera niezależnie od jego paddingu —
   liczy się od viewportu, nie od rodzica. */
.single-featured-image {
  margin-top: 2rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.single-featured-image img { border-radius: 0; }
/* Na komputerze zdjęcie zostaje w kolumnie tekstu (bez full-bleed): pionowe zdjęcie
   rozciągnięte na 100vw wyglądało na mocno powiększone. Kadr 4:3 w kolumnie ~820px
   to umiarkowane przycięcie bez skalowania w górę. */
@media (min-width: 768px) {
  .single-featured-image { width: auto; margin-left: 0; margin-right: 0; }
  .single-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; border-radius: 8px; }
}

.mobile-sticky-bar a svg { width: 16px; height: 16px; }
.mobile-sticky-bar a.call { background-color: var(--primary); color: var(--primary-foreground); }
.mobile-sticky-bar a.write { border: 1px solid var(--primary); color: var(--primary); }

@media (min-width: 768px) { .mobile-sticky-bar { display: none; } }