@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
	--niebieski: #004B95;
	--zolty: #FCC000;
	--czerwony: #ff5c33;
	--zielony: #64bb64;
  --szary:#fcfcfc;
  --darkb:#004b95;
}

html {font-family: 'Roboto', sans-serif; font-size: 18px;}
*, *::before, *::after {box-sizing: border-box;}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {  margin: 0;}
ul[role='list'], ol[role='list'] {  list-style: none;}
html:focus-within {  scroll-behavior: smooth;}
body {  min-height: 100vh;  text-rendering: optimizeSpeed;  line-height: 1.5; -webkit-text-size-adjust: 100%; background-color: var(--szary);}
img,picture {  max-width: 100%;  display: block;}
input,button,textarea,select {  font: inherit;}
@media (prefers-reduced-motion: reduce) {  html:focus-within {   scroll-behavior: auto;  }
  *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}

.container {	width: min(98%, 1600px);	margin-inline: auto;	}
.container-grid {	width: min(98%, 1900px);	margin-inline: auto;	}
h1, h2, h3 {margin: 2rem 0;}
h3, h4 {margin: 1rem 0;}
h1, h2, h3, h4 {color:var(--niebieski)}
a {	color: var(--niebieski);	text-decoration: none;	}
p {	line-height:1.8rem;}
strong {font-weight:700; }
.large {font-size: 1.2rem; margin-bottom: 3rem;}
.site {  display: flex;  min-height: 100vh;  flex-direction: column;}
#main-content { flex: 1;  	flex-direction: column;  	align-items: center;  	justify-content: center;	padding:2rem 1rem;}
hr {margin-block: .8rem; border: 1px dashed var(--zolty);}
.powrot {display:block; margin:3rem 0; padding:1rem; background: var(--niebieski); width:max-content; color:var(--zolty) }
.powrot:hover {background: var(--zolty); color:var(--niebieski); transition:.2s }


/* Naglowek */
#layout-header {	background-color: var(--darkb);}
#header {display: flex;	flex-direction: row; justify-content:space-between; align-items:center;}
#menu { display: flex; flex-direction: row;  gap:2rem; }
#menu li {list-style: none;  display:block;}
#menu a {	color: #fff; font-size: 1.2rem}
#menu a:hover {	color:var(--zolty);; transition: .2s;}
.mobile-nav-toggle { display:none;}

@media (max-width: 1400px) { }
@media (max-width: 991.98px) {
#menu a {	font-size: 1rem}
}
@media (max-width: 767.98px) { }
@media (max-width: 575.98px) { 
#header {padding:2rem 0;	flex-direction: column; gap:2rem}
#menu { position:fixed; inset: 0 0 0 30%; flex-direction:column; padding:min(30vh, 10rem) 2rem; background:#000;
        color:#fff; backdrop-filter:blur (1rem); transform: translateX(100%); transition: transform 350ms ease-out; }
#menu[data-visible="true"] { transform: translateX(0%); 	}
.mobile-nav-toggle { display:block; position:relative; z-index:9999; background-color:transparent; background-image:url("../img/hamburger_icon.svg"); 
  background-repeat:no-repeat; border:0; width:2rem; aspect-ratio: 1; top:1rem;  left:calc(50% - 1rem); color:#4e3;
   filter: invert(18%) sepia(47%) saturate(4380%) hue-rotate(196deg) brightness(41%) contrast(103%);}    
.mobile-nav-toggle[aria-expanded="true"] { background-image:url("../img/hamburger_icon_x.svg"); top:-2rem; transition:1s; }    
}


/* strona glowna */
#aktualnosci { display:grid; gap:2rem; grid-template-columns: 1fr 1fr;}
.akt-home {display:flex; flex-direction:row; gap:2rem; background-color:#fff; outline:1px var(--niebieski) solid; 
  padding:1rem; box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.3); transition: all .2s ease-in-out;}
.akt-home:hover { box-shadow: none; }
.akt-mini {width: 30%}
.akt-opis {width:60%}
.data-home {font-size: 1.2rem}
.tytul-home {margin: .5rem 0; font-size:1.2rem; font-weight:700}
.ominbus-aktualnosci {font-size:.7rem;}

@media (max-width: 1400px) { }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) { }
@media (max-width: 575.98px) { 
  #aktualnosci { gap:2rem; grid-template-columns: 1fr;}
.akt-home {flex-direction:column; }
.akt-mini {min-width: 100%;}
  .akt-opis {width:100%}
.data-home {font-size: 1rem}
.tytul-home {font-size: 1.2rem; font-weight: 700;}	
}

/* poj aktualnosc */
.aktualnosc {display:flex; gap:2rem; }
.aktu-okladka { min-width:30%}
.mini-galeria img {outline:1px var(--niebieski) solid;}
.ominbus-aktualnosc {font-size:.8rem; margin-block: 1rem}
@media (max-width: 1400px) { }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) { 
.aktualnosc {flex-direction: column; gap:2rem; }
.aktu-okladka {outline:1px var(--niebieski) solid; min-width:30%}
.mini-galeria img {outline:1px var(--niebieski) solid;}
}

.masonry {columns:250px; margin-top: 2rem; column-gap: 1em;}
.masonry-img {  display:block; margin-bottom: 1em; width: 100%;}

/* promocje */
.promocje {columns:350px; margin-top: 2rem; column-gap: 1em; margin-bottom:4rem;}
.karta {display:block; margin-bottom: 1em; background-color:white; border: 1px solid var(--niebieski); display: grid; grid-template-rows: 1fr auto;  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.3);transition: all .2s ease-in-out; 
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
.karta:hover { 	box-shadow: none; }
.karta-img { aspect-ratio:1; display: grid; place-items:center; }
.opis-karta {  display:flex; gap: .3rem; flex-direction: column; text-align: center; padding: 1rem 0; background-color:var(--zolty);}
.podpis-karta { font-weight:500; font-size:1rem; padding:.5rem; text-wrap:balance;  } 
.cena-promocyjna {font-weight:700; font-size:1.4rem;  background-color:var(--zolty); padding:.5rem; width:100%; }
.cena-z-apka-grid { background-color:red; color:white; padding:.8rem; width:100%; font-size:1rem; }
.cena-z-apka-grid span {font-weight:700; font-size:1.4rem; display: block; }

.cena-promocyjna-promocja {	font-weight:700; letter-spacing:0.1rem; font-size:1.4rem;  background-color:var(--zolty); padding-block:.5rem; width: max-content; padding:.8rem;}
@media (max-width: 1400px) {.podpis-karta { font-weight:700;  font-size:1rem} }
@media (max-width: 991.98px) {.podpis-karta {  text-align: center; font-weight:700;  font-size:.9rem} .cena-promocyjna {font-size:1.1rem; padding-block:.2rem;}}
@media (max-width: 575.98px) { .opis-karta { padding:0;}.podpis-karta { text-align: center; font-weight:700;  font-size:1rem} .cena-promocyjna {font-size:1.5rem; padding-block:.2rem;}}

.cena-z-apka {  letter-spacing:0.1rem; font-size:1rem;  background-color:red; color:white; width: max-content; padding:.8rem; margin-top: .4rem; }
.cena-z-apka span {font-weight:700; font-size:1.4rem;}


/* promocja */
.promocja {display: flex; gap:3rem;}
.promocja-zdjecia {min-width: 33%}
.data {margin-bottom:.5rem; font-size:1.2rem; font-weight:700;}
.mini-galeria {	margin-top:1.5rem;	display:flex; flex-direction: row; gap:1rem; flex-wrap: wrap;	}
.ceny-prod {	font-weight:700;	letter-spacing:0.3rem; display:flex; flex-direction:row; gap:1rem; margin-bottom: 2rem }
.cena-nowa  {	background-color:var(--zielony);	padding:1rem;	border-radius:0.8rem;	color:#fff; width: max-content; }
.cena-stara {		text-decoration: line-through;	background-color:var(--czerwony);    padding:1rem;    border-radius:0.8rem;    color:#fff; width: max-content;}

@media (max-width: 1400px) { }
@media (max-width: 991.98px) {
	
.opis-karta { padding:0;}
.podpis-karta { padding: 1rem;}
}
@media (max-width: 767.98px) { }
@media (max-width: 575.98px) { 
.promocja {flex-direction: column;}
.promocja-zdjecia {max-width: 100%}	
}

/* gazetka */
.gazetka {text-align: center; }
.gazetka h2, .gazetka h4 {text-align: center	}
.gazetka h4 {background:#fbc02d; padding: 2rem; font-size: 1.8rem	}
@media (max-width: 1400px) { }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) { }

/* wyprzedaz */
.wyprzedaz {display: grid; gap:1rem; grid-template-columns: repeat(4, 1fr); margin-bottom:4rem}
.zdjecie-karta {display: grid;place-items: center;}
.wyprzedaz .karta { background-color:var(--zolty);border: 2px solid var(--niebieski); display:flex; flex-direction:column;height:100%;box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.3);transition: all .2s ease-in-out;}
.karta:hover { 	box-shadow: none; }
.wyprzedaz .podpis-karta {  display:flex; flex-direction:column; justify-content: center;  align-items: center; text-align: center; height:100%;}
.wyprzedaz .cena-nowa {font-weight:700; letter-spacing:0.1rem; font-size:1.4rem;  background-color:var(--zolty); padding-block:.5rem; margin:0 auto; color:var(--niebieski);}
@media (max-width: 1400px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {.wyprzedaz { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {.wyprzedaz { grid-template-columns: 1fr; }}

/* formularz */
form {width: 60%}
.input {  color:var(--niebieski);  line-height: 22px;    border:2px solid var(--niebieski);  transition: all 0.3s;
  padding: 13px;  margin-bottom: 15px;  width:100%;  outline:0;}
.input:focus { border:2px solid var(--zolty); }
.textarea {	color:var(--niebieski);  line-height: 22px;    border:2px solid var(--niebieski);  transition: all 0.3s;
  padding: 13px;  margin-bottom: 15px;  width:100%;  outline:0;}
.textarea:focus { border:2px solid var(--zolty); }
.control {margin-bottom: 1rem;}
input[type=checkbox] {    transform: scale(1.5); margin-right: .6rem}

[type="submit"] {    width: 100%;  background:var(--niebieski);  border-radius:5px;  border:0;  cursor:pointer;  color:var(--zolty);
  font-size:24px;  padding: .6rem 0;    transition: all 0.3s;  }
[type="submit"]:hover { background:var(--zolty); color:var(--niebieski) }

.g-recaptcha {margin-bottom:2rem;}
#formularz_forms_flash { text-align:center;  margin:1rem 0;} 
#formularz_forms_flash button {display: none;} 
#formularz_forms_flash .alert-success { background-color: #9ef5b7; padding:1rem ; }
#formularz_forms_flash .alert-error { background-color: #f95644; padding:1rem; }


@media (max-width: 1400px) { }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) { }
@media (max-width: 575.98px) { form {width: 100%}}

/* stopka */
#layout-footer	 {	background-color: var(--niebieski);	}
#footer {display: flex; flex-direction: row; padding:4rem 2rem;	letter-spacing:.05rem;	color: var(--zolty);}
#footer * { flex:1;}
#footer	h4 {color: solid var(--zolty);}
#footer	h4::after {	content:"";	display: block;	width:60%;		margin-top:1rem;    border-top: 1px solid var(--zolty);}
#footer strong {color: var(--zolty)}
@media (max-width: 1400px) { }
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) { 
#footer {display: flex; flex-direction: column; padding:1rem 0; gap:2rem; padding:2rem}	
}