body {font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-color: #fffaf6;
  color: #444; scroll-behavior: smooth}

header {position: relative;height: 70vh; background-image: url("pozadie.png"); display: flex; 
  flex-direction: column; justify-content: center; align-items: center; text-align: center; 
  color: #fff}
header::after {content: "";position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
  background: rgba(201, 111, 123, 0.45)}
header h1, header p {position: relative; z-index: 1}
header h1 {margin: 1.2rem; font-size: 5rem; color: #f8f3f4; text-shadow: 2px 2px 5px rgba(0,0,0,0.3)}
header p {margin: 0.2rem 0 0; font-size: 1.3rem; color: #f8f3f4}

nav {display: flex; justify-content: center; gap: 3rem; background-color: #f8e1e7;
  border-bottom: 2px solid #e1cfd4; position: sticky}
nav a {text-decoration: none; color: #7d5a5a; font-weight: 600; padding: 1rem;}
nav a:hover {color: #c96f7b; background-color:#f8f3f4}

h2 {color: #c96f7b; text-align: center;}
p {color:#444; line-height: 1.6;}

.uvod-container {display: flex; align-items: center; justify-content: center; 
  gap: 6rem; flex-wrap: nowrap; margin: 1rem 0 1rem 0;}
.uvod-img{width: 200px}
.uvod-img img {width: 100%; height: auto}
.uvod-text {flex: 1; max-width: 600px}
.uvod-container h2 {text-align: left}

#o-mne {background-color: #f8e1e7; display: flex; align-items: center; justify-content: center;
  min-height: 60vh; margin: 2rem 0; padding: 1rem}
#o-mne img {border-radius: 10px}
#o-mne .uvod-container {flex-wrap: nowrap; gap: 3rem}

#produkty {max-width: 400px; margin: 3rem auto; background: #fff; border-radius: 15px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; padding: 1.5rem}

  #produkty h2 {margin-bottom: 1rem; color: #c96f7b}
#produkty img {width: 100%; height: auto; border-radius: 10px; margin-bottom: 1rem}
#produkty a.btn {font-weight: 600;}
a.btn {display: inline-block; margin-top: 0.5rem; padding: 0.7rem 1.5rem; background: #c96f7b; color: #fff;
   border-radius: 25px; text-decoration: none; transition: background 0.3s ease}
a.btn:hover {background: #a65361}

.contact-info {background-color: #f6e8eb; padding: 2rem 5rem; border-radius: 5px; 
  margin: 2rem auto; display: block}
.contact-info p {font-size: 1.2rem; margin: 0.5rem 0}
.contact-info a {color: #c96f7b; text-decoration: none}
.contact-info a.btn {color: #fff;text-align:center}
.contact-info a.btn b,
.contact-info a:hover {text-decoration: underline}

main.gallery{padding:10px}
main.gallery h1{text-align: center;color:#c96f7b}
footer {background-color: #f8e1e7; text-align: center; padding: 1rem; margin-top: 2rem;
  color: #7d5a5a; font-size: 0.9rem}

/* Desktopy (min. 800px) */
@media (min-width: 800px) {
  .contact-info {max-width: 300px}
}
/* Tablety (max. 992px) */
@media (max-width: 992px) {
  header h1 {font-size: 3.5rem}
  header p {font-size: 1.1rem}
  nav {gap: 1.5rem}
  .uvod-container {gap: 2rem}
}

/* Mobily (max. 768px) */
@media (max-width: 768px) {
  header {height: 30vh; background-image: url("bcg.png"); background-position: center}
  header h1 {font-size: 2.5rem}
  header p {font-size: 1rem}
  nav {flex-wrap: wrap; gap: 0.5rem}
  nav a {padding: 0.7rem}
  .uvod-container {flex-direction: column; position: relative; text-align: left; margin: 1.2rem;}
  #uvod .uvod-img {display: none}
  #uvod .uvod-text {background: rgba(255,255,255,1); padding: 1rem; border-radius: 10px}
  #uvod {position: relative}
  #uvod::before {content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.4)}
  #uvod .uvod-container {position: relative; z-index: 1}
  #o-mne .uvod-container {flex-direction: column; text-align: left; gap: 1rem; margin: 0;}
  #o-mne .uvod-img {display: block; width: 150px; height: 150px; margin: 0 auto}
  #o-mne .uvod-img img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #f8f3f4; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
  #o-mne .uvod-text {background: rgba(255,255,255,0.8); padding: 1rem; border-radius: 10px; margin: 1.2rem 0.2rem;}
  #produkty {margin: 2rem 1.2rem}
  #produkty h2 {margin-bottom: 2rem;}
  .contact-info {padding: 1rem; margin: 1.2rem}
  #produkty a {margin-bottom: 0.2rem;}
}

/* Extra malé mobily (max. 480px) */
@media (max-width: 480px) {
  header h1 {font-size: 2rem}
  header p {font-size: 0.9rem}
  nav a {font-size: 0.9rem}
  .uvod-text p {font-size: 0.95rem}
}

/* MASONRY GALÉRIA */
.produkty-gallery {column-count: 4; column-gap: 10px; max-width: 1200px; margin: 0 auto}
.produkty-gallery a {display: inline-block; width: 100%; margin-bottom: 10px}
.produkty-gallery a img {width: 100%; height: auto; border-radius: 10px; cursor: pointer; transition: transform 0.2s; display: block}
.produkty-gallery a img:hover {transform: scale(1.05)}

@media (max-width: 1200px) { .produkty-gallery { column-count: 3; } }
@media (max-width: 900px)  { .produkty-gallery { column-count: 2; } }
@media (max-width: 600px)  { .produkty-gallery { column-count: 2; } }
@media (max-width: 400px)  { .produkty-gallery { column-count: 2; } }