/* gallery.html: one scrolling photo strip per tour + full-screen viewer.
   Rome sections switch to the Sogno green accent. */

.eyebrow,.label{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.28em;color:#62584e;text-transform:uppercase}

.g-hero{padding:80px 0 30px;text-align:center}
.g-hero h1{font-family:"Cormorant Garamond",serif;font-size:clamp(56px,9vw,110px);font-weight:500;line-height:.85;letter-spacing:-.05em;color:var(--accent);margin:18px 0 22px}
.g-hero h1 em{font-style:italic}
.g-hero p{font-family:"Cormorant Garamond",serif;font-size:21px;line-height:1.35;max-width:620px;margin:0 auto}
.jump{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:34px auto 0;max-width:900px}
.jump a{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--line);border-radius:2px}
.jump a:hover{border-color:var(--accent);color:var(--accent)}

.tour-gallery{padding:64px 0 24px;scroll-margin-top:12px}
.tour-gallery[data-city="rome"]{--accent:var(--green);--accent-soft:rgba(23,53,30,.10)}
.tg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.tg-head .label{margin-bottom:12px}
.tg-head h2{font-family:"Cormorant Garamond",serif;font-size:clamp(38px,5vw,56px);font-weight:500;line-height:.92;color:var(--accent);margin:0}
.tg-link{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:5px;white-space:nowrap}

.tg-tools{display:flex;align-items:center;gap:22px}
.tg-arrows{display:flex;gap:8px}
.tg-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--accent);font:400 24px/1 Georgia,serif;cursor:pointer;display:grid;place-items:center;padding:0}
.tg-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.tg-btn:disabled{opacity:.3;cursor:default}
.tg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* one horizontal strip per tour: swipe, scroll, or use the arrows */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 8px;padding:8px 8px 26px;margin:0 -8px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;-webkit-overflow-scrolling:touch}
.strip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.photo{display:block;flex:0 0 auto;scroll-snap-align:start;padding:8px;background:#f7efe1;box-shadow:0 10px 24px rgba(55,39,25,.13);cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease}
.photo:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(55,39,25,.2)}
.photo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.photo img{display:block;height:440px;width:auto;max-width:none;background:var(--paper2)}
.tour-gallery:last-of-type{padding-bottom:100px}

/* viewer */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(24,18,14,.94);display:flex;align-items:center;justify-content:center;padding:56px 70px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0}
.lightbox img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox figcaption{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#e9dfcd;text-align:center;line-height:1.7}
.lb-close,.lb-nav{position:absolute;background:rgba(248,240,226,.1);border:1px solid rgba(248,240,226,.3);color:#f8f0e2;cursor:pointer;border-radius:50%;width:46px;height:46px;font:400 28px/1 Georgia,serif;display:grid;place-items:center;padding:0}
.lb-close:hover,.lb-nav:hover{background:rgba(248,240,226,.22)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #f8f0e2;outline-offset:3px}
.lb-close{top:16px;right:16px}
.lb-nav{top:50%;margin-top:-23px}
.lb-prev{left:16px}
.lb-next{right:16px}

@media(max-width:850px){
  .g-hero{padding-top:56px}
  .strip{gap:12px}
  .photo{padding:6px}
  .photo img{height:340px}
  .tg-arrows{display:none}
  .lightbox{padding:60px 12px 70px}
  .lightbox img{max-height:calc(100vh - 170px)}
  .lb-nav{top:auto;bottom:14px;margin-top:0}
  .lb-prev{left:calc(50% - 56px)}
  .lb-next{right:calc(50% - 56px)}
}
@media(max-width:480px){
  .photo img{height:300px}
}