@charset "utf-8";
/* =====================================================================
   TK ROJA PŘÍBRAM — fotogalerie

   Doplněk k css/styl.css, načítá se jen na stránce fotogalerie.php.
   Používá stejné tokeny („Bílý kurt“) i stejné chování při najetí
   myší jako dlaždice na ostatních stránkách, takže galerie vypadá
   jako součást webu. Ostatních stránek se tento soubor nedotýká.
   ===================================================================== */

/* ---------- mřížka alb ---------- */
.alba{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }

.album{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--linka); border-radius:14px; overflow:hidden;
  background:var(--plocha); box-shadow:var(--stin-1);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.album:hover{
  border-color:rgba(102,180,0,.55); transform:translateY(-5px);
  box-shadow:var(--stin-3);
}

/* obálka alba — poměr stran držíme, ať se mřížka nerozjede */
.album .obal{
  position:relative; aspect-ratio:4 / 3; background:var(--plocha-3);
  border-bottom:1px solid var(--linka-jemna); overflow:hidden;
}
.album .obal img{ width:100%; height:100%; object-fit:cover; }
.album:hover .obal img{ transform:scale(1.04); }
.album .obal img{ transition:transform .5s var(--ease); }

/* album bez obálky — jen jemně zelená plocha se zeleným míčkem */
.album .obal.prazdny{
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--zelena-svetla), var(--plocha-2) 62%);
}
.album .obal.prazdny svg{ width:54px; height:54px; stroke:var(--zelena-tmava); fill:none; stroke-width:1.4; opacity:.85; }

.album .pocet{
  position:absolute; left:14px; top:14px; z-index:1;
  padding:5px 10px; border-radius:5px;
  background:rgba(255,255,255,.94); border:1px solid rgba(102,180,0,.45);
  box-shadow:var(--stin-1);
  font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--zelena-text); line-height:1.5;
}

.album .telo{ padding:22px 24px 24px; flex:1; display:flex; flex-direction:column; }
.album .datum{
  font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--zelena-text); line-height:1.5;
}
.album h3{
  margin-top:10px; font-family:'Oswald',sans-serif; font-size:20px; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; color:var(--text); line-height:1.3;
  transition:color .25s var(--ease);
}
.album:hover h3{ color:var(--zelena-text); }
.album p{ margin-top:12px; font-size:14.5px; color:var(--text-2); line-height:1.6; }

/* odkaz přes celou dlaždici — kliká se kamkoli */
.album .cely{ position:absolute; inset:0; z-index:2; }

/* ---------- mřížka fotek v albu ---------- */
.fotky{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

.fotka{
  position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden;
  border:1px solid var(--linka); border-radius:10px; background:var(--plocha-3);
  box-shadow:var(--stin-1);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fotka:hover{ border-color:rgba(102,180,0,.55); transform:translateY(-3px); box-shadow:var(--stin-2); }
.fotka img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.fotka:hover img{ transform:scale(1.05); }

/* popisek fotky se vysune odspodu — pod ním je fotka, proto tmavý závoj
   a bílé písmo; kontrast drží i na světlém snímku */
.fotka .popis{
  position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  background:linear-gradient(to top, rgba(15,19,16,.86), rgba(15,19,16,0));
  font-size:12.5px; color:#FFFFFF; line-height:1.5;
}

/* ---------- prázdná galerie ---------- */
.galerie-prazdno{
  border:1px dashed var(--linka); border-radius:14px; background:var(--plocha-2);
  padding:clamp(28px,5vw,52px); text-align:center;
}
.galerie-prazdno h3{
  font-family:'Oswald',sans-serif; font-size:22px; font-weight:600;
  text-transform:uppercase; color:var(--text); line-height:1.3;
}
.galerie-prazdno p{ margin-top:12px; color:var(--text-2); }

/* ---------- užší okna ---------- */
@media (max-width:980px){
  .alba{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fotky{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px){
  .alba{ grid-template-columns:1fr; }
  .fotky{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}