/* ======================
   RESET & GLOBAL
====================== */
:root{
  /* Skala całego UI (90% = jak zoom 90%) */
  --ui-scale: 0.90;

  /* Zmienna wysokość headera ustawiana w JS */
  --header-h: 80px;
  --anchor-gap: calc(8px * var(--ui-scale));
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--anchor-gap));
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins', sans-serif;
  background: #111;
  color: #eee;
  font-size: calc(16px * var(--ui-scale)); /* lekkie zmniejszenie tekstu globalnie */
}

/* ======================
   HEADER
====================== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: calc(14px * var(--ui-scale)) calc(22px * var(--ui-scale));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(20,20,20,0.50);
  backdrop-filter: blur(12px);
  z-index: 2000;
}

.logo img{
  height: calc(48px * var(--ui-scale));
  width: auto;
  display: block;
}

/* DESKTOP NAV */
.nav-desktop{
  display: none;
}

.nav-desktop a{
  color: #fff;
  text-decoration: none;
  margin-left: calc(30px * var(--ui-scale));
  font-size: calc(1.15rem * var(--ui-scale));
  font-weight: 500;
  transition: .2s;
}

.nav-desktop a:hover{ opacity: .7; }

/* ======================
   HAMBURGER
====================== */
.hamburger{
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale));
  cursor: pointer;
  z-index: 3000;
  border: 0;
  padding: 0;
  background: transparent;
}

.hamburger span{
  width: calc(28px * var(--ui-scale));
  height: calc(3px * var(--ui-scale));
  background: #eee;
  transition: .3s;
}

.hamburger.active span:nth-child(1){
  transform: translateY(calc(8px * var(--ui-scale))) rotate(45deg);
}
.hamburger.active span:nth-child(2){ opacity: 0; }
.hamburger.active span:nth-child(3){
  transform: translateY(calc(-8px * var(--ui-scale))) rotate(-45deg);
}

/* ======================
   MOBILE MENU
====================== */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  z-index: 1500;
}

.overlay-show{
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer{
  position: fixed;
  top: calc(var(--header-h) + calc(10px * var(--ui-scale)));
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, calc(520px * var(--ui-scale)));
  background: rgba(20,20,20,0.50);
  backdrop-filter: blur(12px);
  border-radius: calc(20px * var(--ui-scale));
  padding: calc(26px * var(--ui-scale)) calc(22px * var(--ui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--ui-scale));
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
  z-index: 2500;
}

.nav-drawer a{
  color: white;
  font-size: calc(1.55rem * var(--ui-scale));
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  padding: calc(12px * var(--ui-scale)) 0;
}

.nav-open{
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px){
  .hamburger, .nav-drawer{ display: none !important; }
  .nav-desktop{ display: flex; }
}

/* ======================
   HERO
====================== */
.hero{
  height: 100vh;
  background-image: url("../img/technika_estradowa_Olsztyn_1.webp");
  background-size: cover;
  background-position: center bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.hero-content{
  position: relative;
  z-index: 2;
}

.hero-content h1{
  font-size: calc(3.4rem * var(--ui-scale));
}

.hero-content p{
  margin-top: calc(10px * var(--ui-scale));
  opacity: .8;
  font-size: calc(1rem * var(--ui-scale));
}

/* ======================
   SECTIONS
====================== */
.section{
  padding: calc(120px * var(--ui-scale)) calc(20px * var(--ui-scale));
}

.container{
  max-width: calc(1100px * var(--ui-scale));
  margin: 0 auto;
}

.section h2{
  text-align: center;
  margin-bottom: calc(40px * var(--ui-scale));
  font-size: calc(2rem * var(--ui-scale));
}

/* Offset dla przewijania pod fixed header */
.hero,
.section,
.section h2{
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}

/* ======================
   TILES
====================== */
.tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(260px * var(--ui-scale)), 1fr));
  gap: calc(32px * var(--ui-scale));
}

.tile{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: calc(16px * var(--ui-scale));
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  transform: translateY(calc(20px * var(--ui-scale)));
  opacity: 0;
  transition:
    opacity .3s,
    transform .4s,
    box-shadow .4s;
}

.tile.reveal-show{
  opacity: 1;
  transform: translateY(0);
}

.tile:hover{
  transform: translateY(calc(-8px * var(--ui-scale))) scale(1.03);
  box-shadow: 0 calc(14px * var(--ui-scale)) calc(28px * var(--ui-scale)) rgba(0,0,0,0.35);
}

.tile-img{
  height: calc(180px * var(--ui-scale));
  background-size: cover;
  background-position: bottom;
  transition: transform .5s ease;
}

.tile:hover .tile-img{
  transform: scale(1.08);
}

.tile-info{
  padding: calc(18px * var(--ui-scale)) calc(14px * var(--ui-scale));
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  transition: .3s;
}

.tile:hover .tile-info{
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(14px);
}

.tile-info h3{
  text-align: center;
  font-size: calc(1.35rem * var(--ui-scale));
  font-weight: 500;
  color: #fff;
}

/* ======================
   FOOTER
====================== */
.footer{
  text-align: center;
  padding: calc(80px * var(--ui-scale)) 0;
  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(10px);
  font-size: calc(1.05rem * var(--ui-scale));
  opacity: .85;
  color: #fff;
}

/* ======================
   REVEAL ANIMATION
====================== */
.reveal{
  opacity: 0;
  transform: translateY(calc(40px * var(--ui-scale)));
  transition: .8s ease;
}

.reveal.reveal-show{
  opacity: 1;
  transform: translateY(0);
}

/* ======================
   ACCESSIBILITY
====================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  .reveal,
  .tile,
  .tile-img,
  .tile-info,
  .hamburger span{
    transition: none !important;
    animation: none !important;
  }

  .reveal{
    opacity: 1;
    transform: none;
  }
}