@font-face {
 font-family: "Dosis";
 src: url("../fonts/Dosis-Variable.ttf") format("truetype");
 font-style: normal;
 font-weight: 200 800;
 font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --green-light: #8dc63f;
  --green-dark: #176e00;
  --text: #000;
}

html {
  min-height: 100%;
  background: #30271e;
}

body {
  min-height: 100vh;
  margin: 0;
  background-image: url("../images/tlo-slask-4k.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Dosis", Arial, sans-serif;
  line-height: 1.65;
}

.content-column {
  width: 1024px;
  max-width: calc(100% - 32px);
  min-height: 100vh;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 0 36px rgba(0, 0, 0, 0.24);
}

.site-header {
  padding-top: 30px;
}

.logo-link {
  display: block;
  width: min(440px, 76%);
  margin: 0 auto 28px;
}

.site-logo {
  display: block;
  width: 100%;
  height: auto;
}

.site-menu {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(70, 75, 45, 0.20);
  border-bottom: 1px solid rgba(70, 75, 45, 0.20);
  background: rgba(255, 255, 255, 0.32);
}

.menu-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-links > li > a,
.menu-links > li > details > summary {
  display: block;
  padding: 14px 30px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.menu-links > li > details > summary::after {
  content: " ▾";
  font-size: 13px;
}

.menu-links summary {
  list-style: none;
}

.menu-links summary::-webkit-details-marker {
  display: none;
}

.menu-links a:hover,
.menu-links summary:hover {
  background: rgba(141, 198, 63, 0.18);
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: -3px;
}

.menu-offer {
  position: relative;
}

.offer-links {
  position: absolute;
  top: 100%;
  left: 0;
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: 65vh;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fafbf5;
  border: 1px solid #d7ddca;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.offer-links a {
  display: block;
  padding: 8px 18px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

.page-content {
  padding: 26px 24px 32px;
}

.price-section h1,
.price-section h2 {
  margin: 0 0 16px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
}

.price-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.price-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid.one { grid-template-columns: 1fr; margin-bottom: 4px; }

.price-card {
  color: #000;
  text-align: center;
  background: var(--green-dark);
}

.price-card.light { background: var(--green-light); }

.price-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.price-body { padding: 10px 12px 22px; }
.price { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.5; }
.unit { margin: 12px 0 0; font-size: 11px; font-weight: 600; }
.price-secondary { margin-top: 26px; }
.price-grid.three .price-card { min-height: 250px; }
.price-grid.two .price-card { min-height: 250px; }
.package-note { margin: 0; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.7; }
.apartments { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(56, 54, 48, 0.35); }
.apartment-subtitle { margin: 0; padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 19px; font-weight: 600; }
.apartment-card .price { font-weight: 700; }
.reservation-note { margin: 22px 0 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.9; }
.reservation-note a { color: inherit; text-decoration: none; white-space: nowrap; }
.page-placeholder { min-height: 55vh; text-align: center; padding: 30px 0; }
.page-placeholder h1 { font-size: 28px; font-weight: 400; }

@media (max-width: 760px) {
  .price-grid.three { grid-template-columns: 1fr; }
  .price-grid.two { grid-template-columns: 1fr; }
  .price-grid.three .price-card,
  .price-grid.two .price-card { min-height: 0; }
}

@media (max-width: 600px) {
  .content-column {
    max-width: 100%;
  }
  .site-header { padding-top: 24px; }
  .logo-link { margin-bottom: 20px; }
  .page-content { padding: 22px 16px; }
  .menu-links > li > a,
  .menu-links > li > details > summary { padding: 13px 14px; font-size: 16px; }
  .offer-links { position: fixed; top: auto; left: 16px; width: calc(100% - 32px); margin-top: 1px; }
}

/* Wersja 4: treść, zaokrąglenia i stopka. */
.price-card { border-radius: 8px; overflow: hidden; }
.page-content img { border-radius: 8px; max-width: 100%; height: auto; }
.page-content h1 { font-size: 32px; line-height: 1.3; margin: 0 0 22px; }
.home-intro h2, .faq h2, .reservation-contact h2, .som-content h2 { font-size: 24px; line-height: 1.4; margin: 32px 0 14px; }
.page-content p { margin-top: 0; }

.faq { margin-top: 36px; padding-top: 8px; border-top: 1px solid rgba(56,54,48,.3); }
.faq h3 { font-size: 18px; margin: 22px 0 8px; }
.home-intro { margin-bottom: 28px; }
.contact-button { display: inline-block; padding: 12px 20px; border-radius: 8px; background: rgba(255,255,255,.75); border: 1px solid var(--green-dark); font-weight: bold; text-decoration: none; }
.contact-link { display: inline-block; margin: 12px 18px; }
.site-footer { padding: 28px 24px; background: #523e30; color: #000; font-size: 14px; line-height: 1.8; }

.site-footer p { margin: 14px 0; }
.som-content { white-space: pre-line; }
.som-content ul, .som-content ol { white-space: normal; }
@media (max-width: 600px) {
 .page-content h1 { font-size: 27px; }
 .home-intro h2, .faq h2, .reservation-contact h2, .som-content h2 { font-size: 22px; }
 .site-footer { padding: 24px 16px; }
}

/* Wersja 5: wspólne kolory odnośników. */
a:link, .page-content a:link, .site-menu a:link, .site-footer a:link { color: var(--green-dark); }
a:visited, .page-content a:visited, .site-menu a:visited, .site-footer a:visited { color: var(--green-light); }
.site-menu summary { color: var(--green-dark); }

/* Wersja 6: kafelki, kontakt, stopka i opinie. */
a, .site-menu summary { font-weight: 700; }
.site-menu .menu-links a, .site-menu .menu-links summary { font-weight: 700; }
.site-menu .menu-links summary { color: var(--green-dark); }
.site-footer { color: #fff; }
.price-grid.two .price-card, .price-grid.three .price-card { display: grid; grid-template-rows: minmax(56px,1fr) 2fr; }
.price-body { display: grid; grid-template-rows: 1fr 1fr; padding: 0; }
.price-primary, .price-secondary { padding: 10px 12px 16px; display: flex; flex-direction: column; justify-content: center; }
.price-secondary { margin-top: 0; border-top: 1px solid rgba(255,255,255,.18); }
.price-body:not(:has(.price-secondary)) { grid-template-rows: 1fr; }
.price-grid.three .price-body:not(:has(.price-secondary)) { grid-template-rows: 1fr 1fr; }
.price-grid.three .price-body:not(:has(.price-secondary))::after { content: ''; border-top: 1px solid rgba(255,255,255,.18); }
.price-grid.one .price-body { display: block; }
.apartment-terms { font-size: 16px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact-button { white-space: nowrap; }
.contact-button svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; fill: currentColor; }
.guest-reviews { border-top: 1px solid rgba(56,54,48,.3); margin-top: 36px; padding-top: 10px; }
.guest-reviews h2 { font-size: 24px; }
.reviews-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.review-card { padding: 22px; background: rgba(255,255,255,.86); border: 1px solid rgba(23,110,0,.2); border-radius: 8px; overflow-wrap: anywhere; }
.review-author { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-author img { width: 44px; height: 44px; object-fit: cover; flex: 0 0 44px; }
.review-meta { font-size: 14px; margin-bottom: 12px; }
.review-stars { color: var(--green-dark); font-size: 22px; letter-spacing: 2px; }
.review-text { white-space: pre-wrap; margin: 12px 0; }
.review-source { font-size: 14px; }
.reviews-attribution { margin-top: 20px; }
.google-attribution { display: inline-block; background: #fff; color: #1f1f1f; padding: 4px 10px; font: 400 14px Arial,sans-serif; border-radius: 4px; }
.reviews-policy { font-size: 14px; margin-top: 16px; }
@media (max-width:760px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Wersja 7: dwa logotypy i strona Kontakt. */
.brand-logos { display: grid; grid-template-columns: 1.205706fr 2.548507fr; gap: 28px; align-items: center; width: min(600px,calc(100% - 48px)); margin: 0 auto 28px; }
.brand-logos .logo-link { width: 100%; margin: 0; }
.brand-logos .site-logo { display: block; width: 100%; height: auto; }
.contact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.contact-panel { padding: 22px; background: rgba(255,255,255,.6); border: 1px solid rgba(23,110,0,.2); border-radius: 8px; overflow-wrap: anywhere; }
.contact-panel h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.35; }
.contact-panel address { font-style: normal; }
.contact-panel p:last-child { margin-bottom: 0; }
.contact-person { font-size: 20px; font-weight: 600; }
.page-content .contact-ip-logo { float: right; width: 130px; height: auto; margin: 0 0 12px 16px; }
.contact-panel::after { content: ''; display: block; clear: both; }
@media (max-width:760px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width:600px) { .brand-logos { gap: 16px; width: calc(100% - 32px); margin-bottom: 22px; } .contact-panel { padding: 18px; } }

/* Wersja 8: kontrast, miniatury i kontakt. */
a:link, a:visited, a:hover, a:active,
.page-content a:link, .page-content a:visited, .page-content a:hover, .page-content a:active,
.site-menu a:link, .site-menu a:visited, .site-footer a:link, .site-footer a:visited { color: var(--green-dark); }
.price-card.dark { color: #fff; }
.price-card.light { color: #000; }
.contact-icon { width: 20px; height: 20px; vertical-align: -3px; margin-right: 8px; fill: none; stroke: var(--green-dark); stroke-width: 1.8; }
.contact-icon.phone { fill: var(--green-dark); stroke: none; }
.interior-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.photo-thumbnail { display: block; border-radius: 8px; overflow: hidden; }
.page-content .photo-thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.photo-thumbnail:focus-visible { outline-offset: 3px; }
.photo-lightbox { padding: 48px 16px 16px; border: 0; border-radius: 12px; background: #1e1e1e; color: white; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.photo-lightbox::backdrop { background: rgba(0,0,0,.85); }
.photo-lightbox img { display: block; max-width: 90vw; max-height: calc(100dvh - 110px); width: auto; height: auto; border-radius: 8px; object-fit: contain; }
.lightbox-close { position: absolute; right: 12px; top: 8px; border: 0; background: none; color: white; font: 700 20px Dosis,sans-serif; cursor: pointer; padding: 4px 10px; }
body.lightbox-open { overflow: hidden; }
.green-energy { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.green-energy svg { width: 26px; height: 26px; flex: 0 0 26px; fill: var(--green-light); color: var(--green-light); }
@media(max-width:600px) { .interior-photos { grid-template-columns: 1fr; } }

/* Wersja 9: kwadratowe miniatury nowych zdjęć. */
.page-content .photo-thumbnail img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.photo-thumbnail:first-child img { object-position: center 60%; }

/* Wersja 10: Chorzów i podstrony atrakcji. */
.daily-price-highlight { font-weight: 700; }
.higher-standard-note { margin: 8px 0 1.7em; text-align: center; font-size: 13px; line-height: 1.7; }
body.city-chorzow { background-image: url("/assets/images/chorzow/tlo-park-slaski-ciemne-4k-v4.webp"); }
.page-trail { margin-bottom: 22px; font-size: 14px; }
.city-content h2 { font-size: 26px; margin: 30px 0 14px; line-height: 1.35; }
.city-content h3 { font-size: 22px; margin: 28px 0 12px; }
.city-content .fw-row { display: flex; flex-wrap: wrap; gap: 16px; }
.city-content .fw-col-xs-12 { width: 100%; min-width: 0; }
.city-content .fw-col-sm-4 { flex: 1 1 0; width: auto; }
.city-content .fw-heading-center { text-align: center; }
.city-content .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 20px 0; }
.city-content .hero-cta { padding: 12px 18px; border: 1px solid var(--green-dark); border-radius: 8px; background: rgba(255,255,255,.7); text-decoration: none; }
.city-content .content-photo { width: 100%; max-width: 100%; margin: 18px auto; }
.city-content .content-photo img { aspect-ratio: auto; width: 100%; height: auto; max-height: none; object-fit: contain; }
.city-content .fw-col-sm-4 .content-photo img { aspect-ratio: 1 / 1; object-fit: cover; max-height: none; }
.city-content figure { margin: 20px 0; }
.city-content figcaption { text-align: center; font-size: 14px; margin: 10px 0 24px; }
.city-content hr { border: 0; border-top: 1px solid rgba(56,54,48,.3); margin: 30px 0; }
.city-content .price-section { margin: 32px 0; width: 100%; }
.city-content .price-grid.one .price-card.dark { display: grid; grid-template-rows: minmax(56px,1fr) 2fr; min-height: 250px; }
.city-content .price-grid.one .price-card.dark .price-body { display: grid; }
.city-content .price-card h3 { margin: 0; font-size: 19px; }
@media(max-width:600px) { .city-content .fw-col-sm-4 { flex-basis: 100%; } .city-content h2 { font-size: 23px; } }







/* Wszystkie miejscowości: Zobacz również. */
.related-cities { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(56,54,48,.3); }
.related-city-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 20px; list-style: none; margin: 0; padding: 0; }
.related-city-links li { min-width: 0; }
@media(max-width:600px) { .related-city-links { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Kolory pakietów i stopki: */
.site-footer a, .site-footer a:link, .site-footer a:visited,
.site-footer a:hover, .site-footer a:active, .site-footer a:focus { color: var(--green-light); }
.city-content .price-grid.one .price-card { display: grid; grid-template-rows: minmax(56px,1fr) 2fr; min-height: 250px; }
.city-content .price-grid.one .price-card .price-body { display: grid; }

/* Dwa zdjęcia pokoi w Chorzowie: */
.chorzow-room-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.city-content .chorzow-room-photos .content-photo { margin: 0; min-width: 0; }
.city-content .chorzow-room-photos .content-photo img { aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; object-position: center; }

/* Przyciski dojazdu: */
.map-directions { margin: 20px 0; }
.map-button { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 12px 18px; border: 1px solid var(--green-dark); border-radius: 8px; background: rgba(255,255,255,.7); text-decoration: none; }
.map-button svg { width: 22px; height: 24px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Osadzone mapy obiektów: */
.object-map { width: 100%; margin: 24px 0; }
.object-map iframe { display: block; width: 100%; max-width: 100%; height: clamp(280px,60vw,450px); border: 0; border-radius: 8px; }

/* Migracja pozostałych podstron: zdjęcia parami, galeria. */
.migration-photo-grid { display:grid; gap:16px; margin:20px 0; }
.migration-photo-grid.pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.migration-photo-grid.gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.migration-photo-grid figure { margin:0; min-width:0; }
.city-content .migration-photo-grid .content-photo { margin:0; }
.city-content .migration-photo-grid .content-photo img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.city-content .migration-photo-grid.gallery .content-photo img { aspect-ratio:1; }
.city-content { overflow-wrap:break-word; }
@media(max-width:600px) { .migration-photo-grid.gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Zgodność ze wzorcem Chorzowa: */
.city-content h1 { text-align: center; }



/* Wycentrowanie przycisków telefonicznych: wszystkie strony i szerokości. */
.contact-buttons, .city-content .hero-buttons { justify-content: center; }
.contact-buttons .contact-link { margin: 0; }
.contact-button, .city-content .hero-cta { text-align: center; }

/* Wycentrowanie przycisków dojazdu: wszystkie podstrony. */
.map-directions { text-align: center; }
.map-button { justify-content: center; text-align: center; }

/* Tło Katowic 4K: zaakceptowany przyciemniony kadr ze Spodkiem. */
body.city-katowice { background-image: url("/assets/images/katowice/tlo-katowice-spodek-ciemne-4k-v1.webp"); }

/* Tło Będzina 4K: przyciemniony kadr zamku. */
body.city-bedzin { background-image: url("/assets/images/bedzin/tlo-bedzin-zamek-ciemne-4k-v1.webp"); }

/* Kontakt rezerwacyjny Mysłowic: */
.myslowice-reservation-label { text-align: center; margin-bottom: 12px; }
.myslowice-reservation-buttons { justify-content: center; margin-bottom: 20px; }

/* Tło Mysłowic 4K: przyciemniony kadr zabytkowego budynku. */
body.city-myslowice { background-image: url("/assets/images/myslowice/tlo-myslowice-ratusz-ciemne-4k-v1.webp"); }

/* Kontakt Industrial Park Chorzów: */
.industrial-phone-intro { text-align: center; margin: 20px 0 12px; }
.industrial-phone-buttons { justify-content: center; margin-bottom: 20px; }

/* Tło Zabrza 4K: przyciemniona panorama miasta. */
body.city-zabrze { background-image: url("/assets/images/zabrze/tlo-zabrze-panorama-ciemne-4k-v1.webp"); }

/* Tło Bytomia 4K: rynek wieczorem. */
body.city-bytom { background-image: url("/assets/images/bytom/tlo-bytom-rynek-wieczor-ciemne-4k-v1.webp"); }

/* Tło Rudy Śląskiej 4K: industrialna panorama. */
body.city-ruda-slaska { background-image: url("/assets/images/ruda-slaska/tlo-ruda-slaska-industrial-ciemne-4k-v1.webp"); }

/* Tło Siemianowic 4K: ratusz nocą. */
body.city-siemianowice { background-image: url("/assets/images/siemianowice/tlo-siemianowice-ratusz-noc-ciemne-4k-v1.webp"); }

/* Telefon w menu: piąta pozycja. */
.menu-phone > a { white-space: nowrap; }
.menu-phone svg { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-right: 8px; }

/* Tło Lędzin 4K: fontanna nocą. */
body.city-ledziny { background-image: url("/assets/images/ledziny/tlo-ledziny-fontanna-noc-ciemne-4k-v1.webp"); }

/* Tło Sosnowca 4K: pomnik Kiepury. */
body.city-sosnowiec { background-image: url("/assets/images/sosnowiec/tlo-sosnowiec-kiepura-ciemne-4k-v1.webp"); }

/* Tło Jaworzna 4K: panorama elektrowni. */
body.city-jaworzno { background-image: url("/assets/images/jaworzno/tlo-jaworzno-elektrownia-ciemne-4k-v1.webp"); }

/* Jaworzno: pełne kadry zdjęć z napisami. */
body.city-jaworzno .city-content .migration-photo-grid.pair .content-photo img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* Tło Świętochłowic 4K: panorama miasta. */
body.city-swietochlowice { background-image: url("/assets/images/swietochlowice/tlo-swietochlowice-panorama-ciemne-4k-v1.webp"); }

/* Tło Piekar Śląskich 4K: panorama miasta. */
body.city-piekary { background-image: url("/assets/images/piekary/tlo-piekary-panorama-ciemne-4k-v1.webp"); }

/* Tło Dąbrowy Górniczej 4K: panorama miasta. */
body.city-dabrowa-gornicza { background-image: url("/assets/images/dabrowa-gornicza/tlo-dabrowa-gornicza-panorama-ciemne-4k-v1.webp"); }


/* Tło Tychów 4K: panorama miasta. */
body.city-tychy { background-image: url("/assets/images/tychy/tlo-tychy-stadion-noc-ciemne-4k-v1.webp"); }