/* Ouirgane Marrakech Guide — tours showcase layer (gallery mosaic, photo grid, full-screen viewer, richer cards). Loaded after app.css. */

/* ---------- Tour cards ---------- */
.tcard{border-radius:12px}
.tcard-img{aspect-ratio:4/3}
.tcard-img img{display:block}
.tcard-img .tcard-img2{position:absolute;inset:0;opacity:0;transition:opacity .55s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.tcard:hover .tcard-img2{opacity:1}}
.tcard-img::after{height:46%;opacity:.75}
.tcard-pc{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(20,28,23,.72);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tcard-pc i{font-size:11px;color:#F0D2B8}
.tcard-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard-wide .tcard-img{border-radius:12px 0 0 12px}
@media (max-width:575px){.tcard-wide .tcard-img{border-radius:12px 12px 0 0}}
.ts-card>img{object-position:center 55%}

/* ---------- Tour page: header link to photos ---------- */
.tour-sub-photos{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--primary)}
.tour-sub-photos:hover{color:var(--accent)}

/* ---------- Tour page: gallery mosaic (desktop) ---------- */
.gallery-wrap{position:relative}
.gallery.gm{position:relative;display:grid;gap:8px;height:520px;border-radius:14px;overflow:hidden}
.gallery.gm .g-item{display:block;min-height:0;cursor:zoom-in}
.gallery.gm .g-item:nth-child(n+6){display:none}
.gallery.gm .g-item img{display:block}
.gallery.gm .g-item::after{content:"";position:absolute;inset:0;background:rgba(20,28,23,0);transition:background .3s}
.gallery.gm .g-item:hover::after{background:rgba(20,28,23,.12)}
.gallery.gm.g1{grid-template-columns:1fr}
.gallery.gm.g2{grid-template-columns:2fr 1fr}
.gallery.gm.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.gallery.gm.g3 .g-item:first-child{grid-row:span 2}
.gallery.gm.g4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.gallery.gm.g4 .g-item:first-child{grid-row:span 2}
.gallery.gm.g4 .g-item:nth-child(4){grid-column:span 2}
.gallery.gm.g5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.gallery.gm.g5 .g-item:first-child{grid-row:span 2}
.g-all{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--dark);border:1px solid rgba(27,36,30,.15);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;letter-spacing:.04em;box-shadow:0 8px 24px -8px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.g-all i{color:var(--copper)}
.g-all:hover{transform:translateY(-2px);background:var(--ivory)}
.g-count{display:none}

/* ---------- Tour page: gallery as swipe strip (mobile) ---------- */
@media (max-width:767px){
.gallery.gm,.gallery.gm.g1,.gallery.gm.g2,.gallery.gm.g3,.gallery.gm.g4,.gallery.gm.g5{display:flex;height:300px;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px}
.gallery.gm::-webkit-scrollbar{display:none}
.gallery.gm .g-item,.gallery.gm .g-item:nth-child(n+6),.gallery.gm.g3 .g-item:not(:first-child){display:block;flex:0 0 88%;height:100%;scroll-snap-align:start;border-radius:12px}
.gallery.gm.g1 .g-item{flex-basis:100%}
.g-all{right:10px;bottom:10px;font-size:12px;padding:7px 12px}
}

/* ---------- Tour page: photo grid section ---------- */
.h-sec .h-count{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--font-b);font-size:.85rem;font-weight:500;color:var(--copper);border:1px solid var(--copper);border-radius:999px;padding:1px 10px;letter-spacing:.04em}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:8px}
.pg-item{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand);cursor:zoom-in}
.pg-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.pg-item:hover img{transform:scale(1.06)}
.pg-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,28,23,.58);color:#fff;font-family:var(--font-h);font-size:1.6rem;font-weight:600;letter-spacing:.02em}
@media (max-width:575px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-item:first-child{grid-row:span 1;aspect-ratio:4/3}}

/* ---------- Full-screen photo viewer ---------- */
.gal-modal .modal-content{background:#0f1411;color:#fff;border:0;border-radius:0}
.gal-head{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.gal-title{flex:1;min-width:0;font-family:var(--font-h);font-size:1.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-count{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.gal-count b{color:#fff;font-weight:600}
.gal-modal .carousel{flex:1;display:flex;flex-direction:column;min-height:0}
.gal-modal .carousel-inner{flex:1;min-height:0}
.gal-modal .carousel-item{height:100%;text-align:center}
.gal-modal .carousel-item img,#galleryModal .carousel-item img{width:auto;max-width:100%;height:calc(100vh - 190px);height:calc(100dvh - 190px);margin:0 auto;object-fit:contain;background:transparent;padding:14px 0}
.gal-modal .carousel-control-prev,.gal-modal .carousel-control-next{width:9%;bottom:118px;opacity:.9}
.gal-modal .carousel-control-prev-icon,.gal-modal .carousel-control-next-icon{width:46px;height:46px;border-radius:50%;background-color:rgba(255,255,255,.14);background-size:45%}
.gal-modal .carousel-caption{bottom:120px;font-size:11px;opacity:.7}
.gal-modal .carousel-indicators.gal-thumbs{position:static;margin:0;padding:12px 20px 16px;display:flex;justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:thin;border-top:1px solid rgba(255,255,255,.08)}
.gal-modal .carousel-indicators.gal-thumbs [data-bs-target]{flex:0 0 auto;width:96px;height:72px;margin:0;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;opacity:.5;text-indent:0;background:none;transition:opacity .2s,border-color .2s}
.gal-modal .carousel-indicators.gal-thumbs [data-bs-target] img{width:100%;height:100%;object-fit:cover;display:block}
.gal-modal .carousel-indicators.gal-thumbs .active,.gal-modal .carousel-indicators.gal-thumbs [data-bs-target]:hover{opacity:1;border-color:var(--copper)}
@media (min-width:1200px){.gal-modal .carousel-indicators.gal-thumbs{justify-content:center}}
@media (max-width:767px){
.gal-modal .carousel-item img,#galleryModal .carousel-item img{height:calc(100vh - 160px);height:calc(100dvh - 160px);padding:8px 0}
.gal-modal .carousel-control-prev,.gal-modal .carousel-control-next{display:none}
.gal-modal .carousel-indicators.gal-thumbs [data-bs-target]{width:64px;height:48px}
.gal-modal .carousel-caption{display:none}
}