/* Przedwojenny Wroclaw — odtworzenie szablonu Joomla "Breslau08_14v2" (Artisteer, 2014).
   Wymiary, kolory i grafika przeniesione z oryginalnego template.css; na waskich ekranach
   uklad przechodzi w jedna kolumne (stary szablon wymuszal min-width 1300px). */

@font-face { font-family: 'Amarante'; font-display: swap; src: url('fonty/amarante-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Amarante'; font-display: swap; src: url('fonty/amarante-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Limelight'; font-display: swap; src: url('fonty/limelight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Limelight'; font-display: swap; src: url('fonty/limelight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --czerwony: #95402D;
  --czerwony-ciemny: #622A1D;
  --tekst: #575A4E;
  --tekst-ciemny: #1A1B18;
  --oliwka: #556A15;
  --zielony-hover: #81A220;
  --morski: #6F9C8E;
  --morski-ciemny: #42443B;
  --jasny-menu: #CCD6E0;
  --ramka: #BBC9A6;
  --papier: #C4B67E;
  --szer: 1300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--tekst);
  background: var(--papier) url('img/page.png');
  font: 13px/1.45 Arial, 'Arial Unicode MS', Helvetica, sans-serif;
}
a { color: var(--oliwka); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }

#main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: url('img/pageglare.png') top center no-repeat, var(--papier) url('img/page.png');
}

/* --- Naglowek --- */
.header {
  position: relative;
  height: 150px;
  border-bottom: 10px solid var(--morski-ciemny);
  background: url('img/header.png') center top no-repeat;
}
.shapes { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.obj-l, .obj-r { position: absolute; width: 462px; height: 149px; background-repeat: no-repeat; }
.obj-l { left: 0; margin-left: -161px; top: -8px; background-image: url('img/object19156124.png'); }
.obj-r { left: 100%; margin-left: -301px; top: -4px; background-image: url('img/object1904941177.png'); }
.header-inner { position: relative; width: var(--szer); max-width: 100%; height: 100%; margin: 0 auto; z-index: 1; }
.headline, .slogan {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; white-space: nowrap; text-transform: uppercase; line-height: 1;
}
.headline { top: 32px; font: normal 48px Amarante, Arial, sans-serif; }
.headline a { color: var(--czerwony); text-decoration: none; }
.slogan { top: 92px; font: bold 24px Limelight, Arial, sans-serif; color: #0D100A; }

/* --- Menu gorne (na zielonym szyldzie z latarniami) --- */
.nav { position: relative; z-index: 499; margin: 26px auto 0; text-align: center; }
.hmenu { display: inline-block; margin: 0; padding: 0; list-style: none; }
.hmenu li { display: inline-block; }
.hmenu a {
  display: block; height: 30px; padding: 0 17px; line-height: 30px;
  font: 17px Georgia, 'Times New Roman', Times, serif; color: var(--jasny-menu); text-decoration: none;
}
.hmenu a:hover, .hmenu a.active { color: var(--czerwony); text-decoration: none; }

/* --- Uklad trzech kolumn --- */
.sheet { position: relative; width: var(--szer); max-width: 100%; margin: 70px auto 0; }
.layout { display: flex; align-items: stretch; }
.sidebar1 { flex: 0 0 255px; background: url('img/sidebar1glare.png') top center no-repeat; border-radius: 5px 0 0; }
.sidebar2 { flex: 0 0 250px; background: url('img/sidebar2glare.png') top center no-repeat; border-radius: 0 5px 0 0; min-height: 1055px; }
.content { flex: 1 1 auto; min-width: 0; }

/* --- Menu galerii (na pionowej tablicy) --- */
.vmenublock { margin: 40px; border: 5px solid transparent; padding-top: 180px; }
.vmenu, .vmenu ul { list-style: none; margin: 0; padding: 0; }
.vmenu > li { position: relative; margin-top: 1px; }
.vmenu > li + li::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; border-bottom: 1px dotted #D0CAB3; }
.vmenu > li > a, .vmenu > li > span {
  display: block; padding: 0 10px; min-height: 30px; line-height: 30px;
  font: 14px Amarante, Arial, sans-serif; color: #F9FAFB; text-decoration: none;
}
.vmenu > li > a:hover { background: var(--zielony-hover); color: #D5EA95; }
.vmenu > li > a.active { background: var(--czerwony) url('img/vmenuactiveitem.png'); color: #E0F0B2; }
.vmenu li li { position: relative; margin-top: 3px; }
.vmenu li li + li::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; border-bottom: 1px dotted #DEDCC4; }
.vmenu ul a {
  display: block; min-height: 22px; line-height: 22px; padding-left: 25px; border-radius: 3px;
  font: 13px Amarante, Arial, sans-serif; color: #373932; text-decoration: none;
}
.vmenu ul a:hover { background: linear-gradient(#99412E 0, #9D432F 40%, #9D432F 70%, var(--czerwony-ciemny) 100%); color: #E0F0B2; }
.vmenu ul a.active { background: linear-gradient(#C5B881 0, #C7BA85 40%, #C7BA85 70%, #AF9C50 100%); color: #373932; }

/* --- Tresc --- */
.post { margin: 10px; padding: 5px; }
.postheader {
  margin: 0 0 10px; color: var(--czerwony);
  font: bold 26px Amarante, Arial, sans-serif; text-transform: uppercase;
}
/* Jedna czcionka tresci na wszystkich zakladkach: Georgia (jak linki i podpisy zdjec w starym szablonie). */
.postcontent { color: var(--tekst-ciemny); font: 15px/1.6 Georgia, 'Times New Roman', Times, serif; max-width: 720px; }
.postcontent p { margin: 0 0 14px; }
.postcontent .podpis { margin-top: 22px; font-style: italic; }
.postcontent a { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--oliwka); }
.postcontent h4 { color: var(--tekst-ciemny); margin: 10px 0; font: normal 16px/1.6 Georgia, 'Times New Roman', Times, serif; }

/* --- Formularz kontaktowy --- */
.formularz { max-width: 520px; margin-top: 15px; }
.formularz label { display: block; margin-bottom: 12px; color: var(--tekst-ciemny); }
.formularz input, .formularz textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 8px;
  font: 15px Georgia, 'Times New Roman', serif; color: var(--tekst-ciemny);
  background: rgba(253, 253, 252, .85); border: 1px solid var(--ramka); border-radius: 2px;
}
.formularz input:focus, .formularz textarea:focus { outline: 2px solid var(--morski); border-color: var(--morski); }
.formularz textarea { resize: vertical; min-height: 140px; }
.formularz button {
  padding: 8px 26px; border: 0; border-radius: 3px; cursor: pointer;
  font: 15px Amarante, Arial, sans-serif; color: #E0F0B2;
  background: linear-gradient(#99412E 0, #9D432F 40%, #9D432F 70%, var(--czerwony-ciemny) 100%);
}
.formularz button:hover { background: var(--zielony-hover); color: #F9FAFB; }
.formularz button:disabled { opacity: .6; cursor: wait; }
.pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.komunikat { padding: 8px 12px; border-left: 4px solid; background: rgba(253, 253, 252, .6); }
.komunikat.ok { border-color: var(--oliwka); color: #3B4A0E; }
.komunikat.blad { border-color: var(--czerwony); color: var(--czerwony-ciemny); }

/* --- Galeria (odpowiednik widoku kategorii Phoca Gallery) --- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 15px 0 0; padding: 0; list-style: none; }
.galeria li { min-width: 0; }
.galeria a {
  display: block; padding: 5px; background: rgba(252, 252, 250, .55); border: 1px solid var(--ramka);
  color: var(--tekst-ciemny); text-decoration: none; transition: background .15s, border-color .15s;
}
.galeria a:hover, .galeria a:focus-visible { background: rgba(252, 252, 250, .9); border-color: var(--czerwony); }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.galeria span {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.licznik { margin: 0; color: var(--tekst); font-style: italic; }

/* --- Podglad zdjecia --- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px 60px;
  background: rgba(20, 21, 18, .92); color: #F9FAFB;
}
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - 120px); border: 6px solid #FDFDFC;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .6); background: #FDFDFC;
}
.lightbox figcaption { margin-top: 12px; font: 16px Georgia, 'Times New Roman', serif; text-align: center; max-width: 900px; }
.lightbox .pozycja { display: block; font-size: 12px; color: #BBC9A6; margin-top: 4px; font-family: Arial, sans-serif; }
.lb-btn {
  position: absolute; border: 0; cursor: pointer; color: #F9FAFB; background: rgba(149, 64, 45, .85);
  font: 28px/1 Georgia, serif; width: 44px; height: 44px; border-radius: 3px;
}
.lb-btn:hover, .lb-btn:focus-visible { background: var(--czerwony); outline: 2px solid #E0F0B2; }
.lb-zamknij { top: 12px; right: 12px; }
.lb-wstecz { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-dalej { right: 8px; top: 50%; transform: translateY(-50%); }
body.lb-otwarty { overflow: hidden; }

/* --- Stopka --- */
.footer { position: relative; margin-top: 30px; background: #D0CAB3 url('img/footer.png'); color: #FDFDFC; text-align: center; }
.footer-inner { width: var(--szer); max-width: 100%; margin: 0 auto; padding: 8px; }
.footer p { margin: 15px 0; }
.footer a { color: #FDFDFC; font-family: Georgia, 'Times New Roman', serif; }

/* --- Ekrany wezsze niz stary szablon --- */
@media (max-width: 1100px) {
  .sidebar2 { display: none; }
}
@media (max-width: 820px) {
  #main { background: var(--papier) url('img/page.png'); }
  .header { height: auto; padding: 22px 16px 16px; background-size: cover; text-align: center; }
  .shapes { display: none; }
  .headline, .slogan { position: static; transform: none; white-space: normal; }
  .headline { font-size: clamp(26px, 8vw, 40px); }
  .slogan { margin-top: 8px; font-size: clamp(14px, 4.2vw, 20px); }
  .nav { margin: 0; background: var(--morski) url('img/footer.png'); border-bottom: 3px solid var(--morski-ciemny); }
  .hmenu { display: flex; flex-wrap: wrap; justify-content: center; }
  .hmenu a { color: #F9FAFB; padding: 0 12px; height: 42px; line-height: 42px; font-size: 17px; }
  .hmenu a:hover, .hmenu a.active { color: #FDE3B0; }
  .sheet { margin-top: 16px; }
  .layout { flex-direction: column; }
  .sidebar1 { flex: none; background: none; }
  .vmenublock { margin: 0 16px; padding: 6px 8px; border: 0; background: var(--morski); border-radius: 3px; }
  .vmenu ul a { color: #F9FAFB; }
  .vmenu ul a.active { color: #373932; }
  .post { margin: 10px 16px; padding: 0; }
  .postheader { font-size: 22px; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .galeria li { width: auto; }
  .galeria img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .lightbox { padding: 12px 8px 70px; }
  .lb-wstecz, .lb-dalej { top: auto; bottom: 14px; transform: none; }
  .lb-wstecz { left: calc(50% - 54px); }
  .lb-dalej { right: calc(50% - 54px); }
}