/* Front styles for Bilotex Projects */

.bx-projects-grid{
  display:grid;
  gap:16px;
}
.bx-projects-grid.bx-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.bx-projects-grid.bx-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.bx-projects-grid.bx-cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 900px){
  .bx-projects-grid.bx-cols-3,
  .bx-projects-grid.bx-cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .bx-projects-grid{ grid-template-columns: 1fr !important; }
}

.bx-project__gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.bx-project__thumb{
  border:0;
  padding:0;
  background:transparent;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.06);
}
.bx-project__thumb img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  transition: transform .18s ease;
}
.bx-project__thumb:hover img{ transform: scale(1.03); }

/* Lightbox */
.bx-lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100000;
  padding:20px;
}
.bx-lightbox.is-open{ display:flex; }
.bx-lightbox__panel{
  width:min(980px, 100%);
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.bx-lightbox__img{
  width:100%;
  height:min(70vh, 640px);
  object-fit:contain;
  background:#000;
  display:block;
}
.bx-lightbox__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background: rgba(255,255,255,.06);
  color:#fff;
}
.bx-lightbox__controls{
  display:flex;
  gap:10px;
}
.bx-lightbox__btn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
/* =========================================================
   Gallery layout v2: 1 big + 3 small (right side)
   Desktop: big left (2 rows), 3 small right (stacked)
   Mobile: big full width, 3 small in a row
========================================================= */

body .bx-project__gallery{
  display: grid !important;
  grid-template-columns: 2fr 1fr;   /* big + right column */
  grid-template-rows: repeat(3, 92px); /* 3 маленьких по высоте */
  gap: 10px;
  margin-top: 12px;
  align-items: stretch;
}

/* buttons/thumbs */
body .bx-project__thumb{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

body .bx-project__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BIG = first image: left side, spans 3 rows */
body .bx-project__gallery .bx-project__thumb:first-child{
  grid-column: 1;
  grid-row: 1 / span 3;
}

/* Small 2-4 go to right column rows 1-3 */
body .bx-project__gallery .bx-project__thumb:nth-child(2){ grid-column: 2; grid-row: 1; }
body .bx-project__gallery .bx-project__thumb:nth-child(3){ grid-column: 2; grid-row: 2; }
body .bx-project__gallery .bx-project__thumb:nth-child(4){ grid-column: 2; grid-row: 3; }

/* If more than 4 images, hide extra thumbs (still available in popup via JSON list) */
body .bx-project__gallery .bx-project__thumb:nth-child(n+5){
  display: none;
}

/* Tablet/Mobile: big on top, 3 small below in one row */
@media (max-width: 900px){
  body .bx-project__gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 220px 92px;
  }

  body .bx-project__gallery .bx-project__thumb:first-child{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body .bx-project__gallery .bx-project__thumb:nth-child(2){ grid-column: 1; grid-row: 2; display:block; }
  body .bx-project__gallery .bx-project__thumb:nth-child(3){ grid-column: 2; grid-row: 2; display:block; }
  body .bx-project__gallery .bx-project__thumb:nth-child(4){ grid-column: 3; grid-row: 2; display:block; }
}

/* Phone: чуть выше большая фотка */
@media (max-width: 640px){
  body .bx-project__gallery{
    grid-template-rows: 210px 88px;
  }
}
/* =========================================================
   Gallery layout v2: 1 big + 3 small (right side)
   Desktop: big left (2 rows), 3 small right (stacked)
   Mobile: big full width, 3 small in a row
========================================================= */

body .bx-project__gallery{
  display: grid !important;
  grid-template-columns: 2fr 1fr;   /* big + right column */
  grid-template-rows: repeat(3, 92px); /* 3 маленьких по высоте */
  gap: 10px;
  margin-top: 12px;
  align-items: stretch;
}

/* buttons/thumbs */
body .bx-project__thumb{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

body .bx-project__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BIG = first image: left side, spans 3 rows */
body .bx-project__gallery .bx-project__thumb:first-child{
  grid-column: 1;
  grid-row: 1 / span 3;
}

/* Small 2-4 go to right column rows 1-3 */
body .bx-project__gallery .bx-project__thumb:nth-child(2){ grid-column: 2; grid-row: 1; }
body .bx-project__gallery .bx-project__thumb:nth-child(3){ grid-column: 2; grid-row: 2; }
body .bx-project__gallery .bx-project__thumb:nth-child(4){ grid-column: 2; grid-row: 3; }

/* If more than 4 images, hide extra thumbs (still available in popup via JSON list) */
body .bx-project__gallery .bx-project__thumb:nth-child(n+5){
  display: none;
}

/* Tablet/Mobile: big on top, 3 small below in one row */
@media (max-width: 900px){
  body .bx-project__gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 220px 92px;
  }

  body .bx-project__gallery .bx-project__thumb:first-child{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body .bx-project__gallery .bx-project__thumb:nth-child(2){ grid-column: 1; grid-row: 2; display:block; }
  body .bx-project__gallery .bx-project__thumb:nth-child(3){ grid-column: 2; grid-row: 2; display:block; }
  body .bx-project__gallery .bx-project__thumb:nth-child(4){ grid-column: 3; grid-row: 2; display:block; }
}

/* Phone: чуть выше большая фотка */
@media (max-width: 640px){
  body .bx-project__gallery{
    grid-template-rows: 210px 88px;
  }
}

/* =========================================================
   SIMPLE PROJECT VIEW
   One big image + 3 dots indicator
========================================================= */

/* показываем только первую картинку */
body .bx-project__gallery{
  display: block !important;
  margin-top: 12px;
}

body .bx-project__thumb{
  display: none !important;
}

body .bx-project__thumb:first-child{
  display: block !important;
  width: 100%;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

body .bx-project__thumb:first-child img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   DOTS under image
========================= */

body .bx-project__gallery::after{
  content: "● ● ●";
  display: block;
  text-align: center;
  font-size: 14px;
  letter-spacing: 6px;
  color: rgba(0,0,0,.35);
  margin-top: 10px;
}

/* Mobile tuning */
@media (max-width: 640px){
  body .bx-project__thumb:first-child{
    height: 220px;
  }
}