:root{ --gap:14px; }

body{font-family:system-ui;margin:0;color:#111;background:#fff}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:28px}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.h1{font-size:28px;margin:0}
.meta{color:#666;font-size:14px}

/* =======================
   GALLERY GRID – ca în screenshot
   - fără carduri
   - gap egal (sus/jos/st/dr)
   - toate au aceeași ÎNĂLȚIME
   - FĂRĂ CROP (object-fit: contain)
   ======================= */

.grid{
  display:flex;
  flex-wrap:wrap;
  gap: var(--gap);
  margin-top: 18px;
  align-items:flex-start;
}

/* tile fără chenar */
.item{
  display:block;
  flex: 0 0 auto;                       /* important: dimensiune după conținut */
  height: clamp(160px, 18vw, 240px);    /* aceeași înălțime pentru toate */
  overflow:hidden;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

/* dacă ai <picture> în interior */
.item picture{
  display:block;
  height:100%;
}

/* Imaginea: FĂRĂ CROP, păstrează proporțiile */
.item img{
  display:block;
  height:100%;
  width:auto;              /* lățimea se adaptează proporțional */
  max-width:100%;          /* protecție pe ecrane mici */
  object-fit:contain;      /* FĂRĂ decupare */
  object-position:center;
  background:transparent;
  border:0;
  border-radius:0;
  user-select:none;
  -webkit-user-drag:none;
}

/* ===== Responsive: pe ecrane mici micșorăm înălțimea ===== */
@media (max-width: 900px){
  .item{ height: 190px; }
}
@media (max-width: 520px){
  :root{ --gap:10px; }
  .item{ height: 160px; }
}

/* =======================
   UI
   ======================= */
.btn{
  display:inline-block;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px 14px;
  background:#fff;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px
}
@media (max-width: 900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 520px){ .cards{grid-template-columns:repeat(1,minmax(0,1fr))} }

.card{border:1px solid #eee;border-radius:14px;padding:16px}
.card .t{font-weight:600}
.card .s{color:#666;font-size:14px;margin-top:6px}
.footer{margin:30px 0 0;color:#777;font-size:13px}

/* =======================
   CATEGORY: LISTA GALERII (cover)
   (lași exact așa, dacă îți place)
   ======================= */
.cards--cover{
  display:block;
  column-count: 3;
  column-gap: 14px;
  margin-top: 18px;
}
@media (max-width: 900px){ .cards--cover{ column-count: 2; } }
@media (max-width: 540px){ .cards--cover{ column-count: 1; } }

.card--cover{
  display:block;
  break-inside: avoid;
  margin: 0 0 14px 0;

  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

.card--cover .cover{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#f1f1f1;
}

.card--cover .cover img{
  width:100%;
  height:100%;
  object-fit:cover; /* cover-urile pot rămâne crop (standard) */
  display:block;
}

.card--cover .nocover{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-size:12px;
}

.card--cover .t{
  padding:12px 12px 2px;
  font-weight:800;
  color:#111;
  font-size:16px;
}

.card--cover .s{
  padding:0 12px 12px;
  color:#666;
  font-size:13px;
}

/* =======================
   LIGHTBOX – FORȚEAZĂ SĂGEȚILE
   (fără să stricăm zoom/pan)
   ======================= */

/* asigurăm că butoanele sunt mereu peste imagine */
.lb__btn,
.lb__nav{
  z-index:100000 !important;
}

/* forțăm să fie vizibile */
.lb__nav{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.lb__prev{ left:14px !important; }
.lb__next{ right:14px !important; }

/* pe mobil: un pic mai aproape */
@media (max-width: 600px){
  .lb__prev{ left:10px !important; }
  .lb__next{ right:10px !important; }
}