/* ===============================================================
   home.css – strona główna (hero, about, galeria, liczniki)
   Wersja z czerwonym bannerem przylegającym do górnej krawędzi karty
=============================================================== */

/* ---------- HERO ------------------------------------------------ */
.hero{
  position:relative;
  height:65vh;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.55);
  z-index:0;
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:800px;
  padding:0 1rem;
}
.hero-inner h1{
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:1rem;
}
.hero-inner p{
  font-size:1.1rem;
  margin-bottom:2rem;
}
.hero-btn{
  display:inline-block;
  padding:.9rem 2rem;
  border-radius:8px;
  background:var(--accent-color);
  color:#fff;
  font-weight:600;
  transition:background .25s;
}
.hero-btn:hover{background:rgba(229,9,20,.85);}

/* ---------- ABOUT ------------------------------------------------ */
.about{margin:4rem 0;}
.about h2{text-align:center;margin-bottom:1.8rem;}
.about-grid{
  display:grid;
  gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* Karta + czerwony banner wyrównany do górnej krawędzi ----------- */
.about-card{
  position:relative;
  background:rgba(30,30,30,.6);
  backdrop-filter:blur(6px) saturate(130%);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  padding:1.8rem;                     /* równy padding wokół treści */
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.16,.84,.44,1);
}
.about-card:hover{transform:translateY(-6px);}
.about-card i{display:none;}           /* ukryto ikony – banner przejmuje akcent */

/* Banner */
.about-card h3{
  background:var(--accent-color);
  color:#fff;
  padding:.9rem 1rem;
  margin:-1.8rem -1.8rem 1.2rem -1.8rem;  /* wyciąga banner na pełną szerokość */
  font-size:1.1rem;
  font-weight:600;
  border-radius:12px 12px 0 0;
}
.about-card p{
  margin-top:.2rem;
  font-size:.95rem;
  line-height:1.55;
}

/* ---------- GALLERY PREVIEW ------------------------------------ */
.gallery-preview{margin:4rem 0 3rem;}
.preview-grid{
  display:grid;
  gap:2rem;
  margin:2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.preview-item{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:rgba(30,30,30,.6);
  backdrop-filter:blur(6px) saturate(130%);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.16,.84,.44,1);
}
.preview-item:hover{transform:translateY(-6px) scale(1.02);}
.preview-item img{
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.16,.84,.44,1);
}
.preview-item:hover img{transform:scale(1.07);}
.gallery-btn{
  display:inline-block;
  margin-top:1rem;
  padding:.7rem 1.6rem;
  border-radius:8px;
  background:var(--accent-color);
  color:#fff;
  font-weight:600;
  transition:background .25s;
}
.gallery-btn:hover{background:rgba(229,9,20,.85);}
.center{text-align:center;}

/* ---------- COUNTERS ------------------------------------------- */
.counters{margin:4rem 0;}
.counter-flex{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
}
.counter{
  flex:1 1 180px;
  min-width:140px;
  text-align:center;
  background:rgba(30,30,30,.6);
  backdrop-filter:blur(6px) saturate(130%);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  padding:2rem 1.2rem;
}
.counter-num{
  font-size:2.6rem;
  font-weight:700;
  color:var(--accent-color);
}
.counter-label{
  display:block;
  margin-top:.5rem;
  font-size:1rem;
}

/* ---------- Responsive tweaks ---------------------------------- */
@media(max-width:576px){
  .hero-inner h1{font-size:1.8rem;}
  .hero-inner p{font-size:1rem;}
  .about-card h3{font-size:1rem;}
}