/* ==========================================================
   GALLERY (bento grid + lightbox)
   Uses the colour variables defined in index.html (:root),
   so it follows the same olive / pista / yellow theme.
   ========================================================== */

#gallery{--g-gap:28px;--g-radius:26px}
#gallery .wrap{max-width:1480px}

/* ---- heading row ---- */
.g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:40px}
.g-badge{display:inline-block;background:var(--yellow);color:var(--olive-dark);font:700 .85rem var(--body);padding:5px 16px;border-radius:99px;margin-bottom:18px}
.g-head h2{margin:0;font:700 clamp(2.8rem,7.2vw,5.8rem)/.92 var(--head);letter-spacing:-.035em;color:var(--text)}
.g-head h2 span{color:var(--accent)}
.g-side{max-width:320px;padding-bottom:10px}
.g-side p{color:var(--muted);font-size:.98rem;margin:0 0 20px}
.g-all{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 22px;border:0;border-radius:99px;background:var(--olive);color:#fff;font:700 .95rem var(--body);cursor:pointer;
  box-shadow:0 10px 24px rgba(85,107,47,.35);transition:transform .25s var(--ease),background .25s,color .25s}
.g-all:hover{transform:translateY(-3px);background:var(--yellow);color:var(--olive-dark)}
.g-all .g-arr{position:relative;width:34px;height:34px;border-radius:10px;background:#fff;flex:none}

/* ---- arrow chip (drawn with a mask so its colour can change on hover) ---- */
.g-arr{position:relative;display:inline-block;width:30px;height:30px;border-radius:9px;background:#fff;flex:none;transition:background .25s}
.g-arr::after{content:"";position:absolute;inset:0;background:var(--olive-dark);transition:background .25s,transform .25s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---- bento grid: 12 columns, 3 rows per block ---- */
.g-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,16vw,240px);gap:var(--g-gap)}
.g-bento+.g-bento{margin-top:var(--g-gap)}

/* block 1 */
.b1 .p1{grid-column:1/4;grid-row:1/3}
.b1 .p2{grid-column:4/9;grid-row:1}
.b1 .p3{grid-column:9/13;grid-row:1}
.b1 .p4{grid-column:4/7;grid-row:2}
.b1 .p5{grid-column:7/13;grid-row:2}
.b1 .p6{grid-column:1/6;grid-row:3}
.b1 .p7{grid-column:6/9;grid-row:3}
.b1 .p8{grid-column:9/13;grid-row:3}
/* block 2 (mirrored arrangement) */
.b2 .p1{grid-column:10/13;grid-row:1/3}
.b2 .p2{grid-column:1/5;grid-row:1}
.b2 .p3{grid-column:5/10;grid-row:1}
.b2 .p4{grid-column:1/7;grid-row:2}
.b2 .p5{grid-column:7/10;grid-row:2}
.b2 .p6{grid-column:1/5;grid-row:3}
.b2 .p7{grid-column:5/9;grid-row:3}
.b2 .p8{grid-column:9/13;grid-row:3}

/* ---- tile ---- */
.g-item{position:relative;border-radius:var(--g-radius);min-width:0}
.g-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;overflow:hidden;cursor:pointer;display:block;text-align:left;color:#fff;
  background:linear-gradient(135deg,var(--pista),var(--olive));
  box-shadow:0 10px 26px rgba(47,62,27,.18);transition:box-shadow .3s,transform .35s var(--ease)}
.g-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .8s var(--ease)}
.g-btn::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;border:3px solid transparent;pointer-events:none;transition:border-color .25s}
.g-btn:hover,.g-btn:focus-visible{transform:translateY(-4px);box-shadow:0 18px 36px rgba(47,62,27,.32)}
.g-btn:hover img,.g-btn:focus-visible img{transform:scale(1.07)}
.g-btn:hover::after,.g-btn:focus-visible::after{border-color:#fff}

/* ---- tablet / phone: simple 2-column mosaic ---- */
@media(max-width:900px){
  .g-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;grid-auto-flow:dense;gap:16px}
  .g-bento+.g-bento{margin-top:16px}
  .g-bento .g-item{grid-column:auto;grid-row:auto}
  .g-bento .tall{grid-row:span 2}
  .g-bento .wide{grid-column:span 2}
  .g-head{margin-bottom:28px}
}
@media(max-width:420px){
  .g-bento{grid-auto-rows:150px}
}

/* ---- lightbox ---- */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(18,26,9,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb figure{margin:0;display:grid;justify-items:center;gap:14px;max-width:min(92vw,1200px)}
.lb img{max-width:100%;max-height:78vh;border-radius:16px;object-fit:contain;background:var(--olive-dark);box-shadow:0 24px 70px rgba(0,0,0,.5);animation:lbIn .45s var(--ease)}
.lb figcaption{font-weight:700;text-align:center}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font:400 1.5rem/1 var(--body);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s var(--ease)}
.lb button:hover{background:var(--yellow);color:var(--olive-dark)}
.lb-x{top:18px;right:18px}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-prev:hover{transform:translateX(-3px)}.lb-next:hover{transform:translateX(3px)}
@media(max-width:600px){
  .lb-prev,.lb-next{top:auto;bottom:22px;margin:0}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
  .lb img{max-height:70vh}
}
@media(prefers-reduced-motion:reduce){
  .g-btn,.g-btn img,.lb img{transition:none!important;animation:none!important}
}