@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

/* Reset bazowy (bez odbierania list-style globalnie) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Dokument */
html { scroll-behavior: smooth; }
body {
  font-family: Montserrat, sans-serif;
  color: #333;
  background: url("./assets/img/4re.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* NAV */
nav {
  background-color: rgba(44, 62, 80, 0.8);
  padding: 10px 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none; /* tu zostaje */
}
nav li { text-transform: uppercase; font-weight: bold; font-size: 1rem; }
nav ul li a {
  color: #e67e22;
  text-decoration: none;
  font-weight: bold;
  transition: color .3s, text-decoration .3s;
}
nav ul li a:hover { color: #d35400; text-decoration: underline; }
nav ul li a:active { color: #e74c3c; }
nav ul li a.active { color: #e74c3c; }

/* Header */
header { padding: 50px 20px; }
#logo-container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
#logo-container img { width:100px; margin-bottom:20px; }
#logo-container h2 { font-size:1.8rem; color:#e67e22; margin-bottom:10px; }
#logo-container p { font-size:1rem; color:#ecf0f1; }

/* Sekcje i kontenery */
section {
  padding: 40px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background-color: rgba(52, 73, 94, 0.85);
  color: #ecf0f1;
  margin: 0 auto;
  max-width: 900px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #e67e22;
}
section p { font-size: 1rem; line-height: 1.6; margin: 10px 0; }

/* Przyciski */
.button {
  display:inline-block; padding:10px 20px; background:#e67e22; color:#fff;
  text-transform:uppercase; font-weight:bold; text-decoration:none; border-radius:5px;
  transition: background-color .3s;
}
.button:hover { background:#d35400; }
.button-group { display:flex; justify-content:center; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* Karty */
.cards-container {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  margin-top:20px;
}
.card {
  background-color: rgba(52, 73, 94, 0.9);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
.card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.card-image { width:80px; height:80px; object-fit:contain; }
.card-title { font-size:1.2rem; font-weight:bold; color:#e67e22; text-decoration:none; }
.card-title:hover { color:#d35400; text-decoration:underline; }
.card p { font-size:.95rem; line-height:1.4; color:#ecf0f1; }

/* Efekt fade-in */
.fade-in { opacity:0; transform: translateY(20px); transition: all .8s ease; }
.fade-in.visible { opacity:1; transform: translateY(0); }

/* Wideo */
.video-container { margin-bottom:30px; text-align:center; }
.video-container video { width:100%; max-width:560px; height:auto; }

/* Obrazki „autre-info” (opcjonalnie, gdy masz sekcję #autre-info) */
#autre-info .reduced-image {
  width:50%; height:auto; display:block; margin:0 auto;
}

/* Modal QR */
.modal {
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.7); justify-content:center; align-items:center;
}
.modal.open { display:flex; }
.modal-content {
  background:#fff; color:#111; padding:20px; border-radius:12px;
  max-width:400px; width:calc(100% - 2rem); text-align:center; position:relative;
}
.modal-close {
  position:absolute; top:10px; right:10px;
  font-size:1.5rem; background:none; border:none; cursor:pointer; color:#333;
}

/* Stopka */
footer {
  background: transparent;
  color: #ecf0f1;
  padding: 30px 20px;
  text-align: center;
  margin-top: 2rem;
}
footer .footer-content {
  background-color: rgba(52, 73, 94, 0.85);
  color: #ecf0f1;
  margin: 0 auto;
  max-width: 900px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
footer p { font-size: .9rem; margin-top: 10px; }
footer a { color: #f0f0f0; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.button-small {
  font-size: .8rem; padding: .35rem .75rem; margin: .25rem; border-radius: 6px;
  background: #e67e22; color:#fff; display:inline-block; transition: background-color .3s;
}
.button-small:hover { background:#d35400; text-decoration:none; }
footer .button-group { margin-top:.5rem; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

/* Burger + mainnav (globalnie) */
#burger {
  display:none; background:none; border:1px solid #ccc; padding:.4rem .6rem;
  margin:.5rem 1rem; border-radius:.5rem; font-size:1.2rem; color:#fff; background-color:#222;
}
#mainnav ul {
  display:flex; gap:1rem; margin:0; padding:.5rem 1rem; list-style:none;
}

@media (max-width: 900px){
  /* iOS fix na tło – odkomentuj, jeśli tło „skacze”:
  body { background-attachment: scroll; }
  */
  nav ul { flex-direction:column; gap:10px; align-items:center; }

  .button-group { flex-direction:column; gap:10px; }
  .button-group .button { margin:5px 0; }

  .cards-container { grid-template-columns: 1fr; gap: 15px; }
  .card { padding: 12px; }
  .card-image { width: 60px; height: 60px; }
  .card-title { font-size: 1rem; }

  /* burger */
  #burger { display:inline-block; }
  #mainnav ul { display:none; flex-direction:column; gap:.5rem; }
  #mainnav[data-open="true"] ul { display:flex; }

  /* wideo & content */
  .content { padding: 15px; }
  .video-container video { max-width: 100%; }
}

@media (min-width: 901px){
  #burger { display:none; }
  #mainnav ul { display:flex !important; }
}