/* Apartament Widna — poprawki: cena „od” przy apartamentach i pasek rezerwacji na telefonie. */

/* dół obu kart (cechy, cena, linki) wyrównany do tej samej linii, niezależnie od długości opisu */
.apts { align-items: stretch; }
.apt .meta { margin-top: auto; }

/* cena przy apartamencie */
.apt-price { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 0; color: var(--muted) !important; font-size: 15px; }
.apt-price b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); letter-spacing: 0; }
.apt-price .od { color: var(--soft); }

/* pasek rezerwacji: tylko telefon, pojawia się po przewinięciu wyszukiwarki */
.sbar { display: none; }
@media (max-width: 760px) {
  .sbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(28, 27, 26, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .28s ease;
  }
  .sbar:not(.on) { visibility: hidden; transition: transform .28s ease, visibility 0s .28s; }
  .sbar.on { transform: none; }
  .sbar-price { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; color: var(--muted); }
  .sbar-price b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); }
  .sbar .btn { height: 48px; padding: 0 20px; letter-spacing: .06em; white-space: nowrap; }
  .sbar-tel { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); }
  .sbar-tel svg { width: 20px; height: 20px; }
  body.sbar-pad { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sbar { transition: none; } }

/* telefon: etykieta (osoby · cecha) pod nazwą apartamentu, żeby nic się nie łamało */
@media (max-width: 560px) {
  .apt-title { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Dojazd: uproszczona strona ---------- */
.dj-live-sec { padding-top: 24px; border-top: 1px solid var(--line); }
.dj-more { padding-block: 40px 8px; }
.dj-more h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; margin-bottom: 18px; }
.dj-acc { border-top: 1px solid var(--line); }
.dj-acc:last-of-type { border-bottom: 1px solid var(--line); }
.dj-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.dj-acc summary::-webkit-details-marker { display: none; }
.dj-acc summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 28px; line-height: 1; color: var(--brass); transition: transform .2s ease; }
.dj-acc[open] summary::after { transform: rotate(45deg); }
.dj-acc summary:hover { color: var(--brass); }
.dj-acc summary:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.dj-acc-body { display: flex; flex-direction: column; gap: 16px; padding: 0 0 26px; max-width: 860px; }
.dj-acc-body > p { color: var(--soft); margin: 0; }
.dj-acc-body > p b { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .dj-acc summary { font-size: 19px; padding: 18px 0; } }
@media (prefers-reduced-motion: reduce) { .dj-acc summary::after { transition: none; } }

/* ---------- zdjęcia ładowane z opóźnieniem: zamiast czarnej dziury tło w kolorze zdjęcia ---------- */
img[loading="lazy"] { background-color: var(--panel); }
img[src*="a33-lazienka-new-sm"] { background-color: color-mix(in srgb, #938069 55%, var(--panel)); }
img[src*="a33-balkon-sm"]       { background-color: color-mix(in srgb, #888267 55%, var(--panel)); }
img[src*="a32-lazienka-sm"]     { background-color: color-mix(in srgb, #947355 55%, var(--panel)); }
img[src*="a32-balkon-sm"]       { background-color: color-mix(in srgb, #818978 55%, var(--panel)); }
img[src*="a33-jadalnia"]        { background-color: color-mix(in srgb, #868078 55%, var(--panel)); }
img[src*="a32-jadalnia"]        { background-color: color-mix(in srgb, #8b7b6d 55%, var(--panel)); }
img[src*="a33-fotel"]           { background-color: color-mix(in srgb, #a38d7f 55%, var(--panel)); }

/* ---------- podstrony apartamentów: ikony (Lucide, ISC) w kolorze mosiądzu ---------- */
.ic { width: 26px; height: 26px; flex: none; color: var(--brass); }
.ap-facts-ic div { display: flex; align-items: flex-start; gap: 14px; }
.ap-facts-ic .ic { margin-top: 3px; }
.ap-facts-ic span { min-width: 0; }
.ap-icons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.ap-icons li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--soft); line-height: 1.35; min-width: 0; }
.ap-icons .ic { width: 30px; height: 30px; }
@media (max-width: 980px) { .ap-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ap-icons { gap: 0 18px; } .ap-icons li { gap: 12px; font-size: 15px; } .ap-icons .ic { width: 26px; height: 26px; } }

/* zasady na stronie głównej: 4 pola (palenie osobno od imprez) w siatce 2×2 */
.rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }

/* ---------- okno rezerwacji na komputerze: cena i „Rezerwuję” zawsze widoczne bez przewijania ---------- */
@media (min-width: 961px) {
  /* pasek z taryfą, ceną, przyciskiem i kodem przykleja się do dołu okna */
  .rz-bar { position: sticky; bottom: 0; z-index: 2; padding-top: 16px; box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .55); }
  .rz-sum { gap: 12px; padding-bottom: 4px; }
  .rz-bar { gap: 12px; }
  .rz-next1 { margin-top: -4px; }
}
/* niższe ekrany laptopów: mniejsze zdjęcie, a przy bardzo niskich bez zdjęcia */
@media (min-width: 961px) and (max-height: 1000px) {
  .rz-photo { aspect-ratio: 21 / 9; }
  .rz-top { padding-block: 16px; }
  .rz-cal { padding-top: 16px; }
}
@media (min-width: 961px) and (max-height: 860px) {
  .rz-photo { display: none; }
}

/* ---------- mapka dojazdu: jeżdżące pojazdy (poglądowo) ---------- */
.dj-v rect { fill: #1C1B1A; stroke-width: 2; }
.dj-v text { font: 600 9.5px Jost, Arial, sans-serif; text-anchor: middle; letter-spacing: .02em; }
.dj-v-tram rect { stroke: #C8A26B; } .dj-v-tram text { fill: #C8A26B; }
.dj-v-bus rect  { stroke: #8FA7B8; } .dj-v-bus text  { fill: #8FA7B8; }
.dj-v-glow { fill: rgba(200, 162, 107, .18); }
.dj-v-bus .dj-v-glow { fill: rgba(143, 167, 184, .18); }
@media (prefers-reduced-motion: reduce) { .dj-veh { display: none; } }

/* ---------- menu na telefonach i małych tabletach (gdy menu schodzi pod logo):
   Apartamenty · Dojazd po lewej, numer telefonu i język po prawej, równo z krawędziami treści ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* Android: bez samowolnego powiększania tekstu */
@media (max-width: 767px) {
  .top .nav { flex-basis: 100%; flex-wrap: nowrap; gap: 16px; }
  .nav .nav-phone { order: 10; margin-left: auto; letter-spacing: .01em; white-space: nowrap; }
  .nav .lang { order: 11; }
}
@media (max-width: 560px) {
  .nav .hide-sm[href$="dojazd.html"], .nav .hide-sm[href$="getting-here.html"],
  .nav .hide-sm[href$="#apartamenty"], .nav .hide-sm[href$="#apartments"] { display: inline; }
  .nav .nav-phone { font-size: 14px; }
}
/* bardzo wąskie telefony: język zostaje po prawej, numer w drugiej linii */
@media (max-width: 359px) {
  .top .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav .lang { order: 5; margin-left: auto; }
  .nav .nav-phone { flex-basis: 100%; margin-left: 0; }
}