/* Rio Photo Guide — custom styles (things Tailwind CDN can't do inline). */

[x-cloak]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
img{ max-width:100%; }

/* Hero overlay: warm Rio-golden gradient over video */
.hero-overlay{
  background:
    linear-gradient(180deg, rgba(11,31,51,.55) 0%, rgba(11,31,51,.25) 40%, rgba(11,31,51,.75) 100%),
    radial-gradient(1200px 600px at 70% 20%, rgba(232,163,61,.25), transparent 60%);
}

/* ---------- location cards ---------- */
.loc-card{ position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:4/5; box-shadow:0 10px 30px rgba(11,31,51,.15); }
.loc-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.loc-card:hover img{ transform:scale(1.08); }
.loc-caption{ position:absolute; inset:auto 0 0 0; padding:1.1rem; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(11,31,51,.85)); }
.loc-caption h3{ font-family:"Playfair Display",serif; font-weight:700; font-size:1.25rem; }
.loc-caption p{ font-size:.8rem; opacity:.85; margin-top:.15rem; }

/* ---------- portfolio masonry (CSS columns: 3 / 2 / 1) ---------- */
.masonry{ column-count:3; column-gap:1rem; }
@media (max-width:1024px){ .masonry{ column-count:2; } }
@media (max-width:640px){ .masonry{ column-count:1; } }
.masonry-item{ break-inside:avoid; margin:0 0 1rem; border-radius:.85rem; overflow:hidden; box-shadow:0 8px 24px rgba(11,31,51,.12); }
.masonry-item img{ width:100%; display:block; transition:transform .6s ease, filter .6s ease; }
.masonry-item:hover img{ transform:scale(1.05); filter:saturate(1.1); }

/* ---------- before / after ---------- */
.ba{ position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:16/9; user-select:none; box-shadow:0 20px 50px rgba(11,31,51,.25); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before-wrap{ position:absolute; inset:0; width:50%; overflow:hidden; border-right:3px solid #fff; }
.ba-before-wrap img{ width:100vw; max-width:none; }
@media(min-width:1024px){ .ba-before-wrap img{ width:960px; } }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); z-index:2; pointer-events:none; }
.ba-handle::after{ content:"⇄"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.4rem; height:2.4rem; display:grid; place-items:center; background:#fff; color:#0b1f33; border-radius:50%; font-size:1rem; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.ba-tag{ position:absolute; top:.8rem; z-index:2; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; background:rgba(11,31,51,.7); color:#fff; }
.ba-tag-l{ left:.8rem; } .ba-tag-r{ right:.8rem; }

/* ---------- packages ---------- */
.pkg{ position:relative; background:#fff; border:1px solid rgba(11,31,51,.08); border-radius:1.25rem; padding:2rem; box-shadow:0 10px 30px rgba(11,31,51,.06); transition:transform .3s, box-shadow .3s; }
.pkg:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(11,31,51,.12); }
.pkg-featured{ border-color:#e8a33d; box-shadow:0 20px 50px rgba(232,163,61,.25); }
.pkg-badge{ position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); background:#e8a33d; color:#0b1f33; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .9rem; border-radius:999px; }
.pkg ul li{ padding-left:1.4rem; position:relative; }
.pkg ul li::before{ content:"✓"; position:absolute; left:0; color:#1f7a8c; font-weight:700; }
.pkg-btn{ display:block; text-align:center; padding:.8rem; border-radius:999px; font-weight:600; border:1px solid #0b1f33; color:#0b1f33; transition:.3s; }
.pkg-btn:hover{ background:#0b1f33; color:#fff; }
.pkg-btn-gold{ background:#e8a33d; border-color:#e8a33d; }
.pkg-btn-gold:hover{ background:#0b1f33; color:#fff; }

/* ---------- reviews ---------- */
.reviews{ padding-bottom:3rem; }
.rev-card{ background:#f7f3ec; border-radius:1rem; padding:2rem; height:100%; }
.rev-card p{ font-family:"Playfair Display",serif; font-size:1.15rem; line-height:1.5; }
.rev-card footer{ margin-top:1rem; font-size:.85rem; color:#1f7a8c; font-weight:600; }
.swiper-pagination-bullet-active{ background:#e8a33d !important; }

/* ---------- faq ---------- */
.faq-item{ background:#fff; border:1px solid rgba(11,31,51,.08); border-radius:.9rem; overflow:hidden; }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; padding:1.1rem 1.3rem; font-weight:600; }
.faq-a{ padding:0 1.3rem 1.2rem; color:rgba(11,31,51,.75); line-height:1.6; }

/* ---------- forms ---------- */
.form-inp{ width:100%; padding:.9rem 1.1rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.95); }
.form-inp:focus{ outline:2px solid #e8a33d; }

/* keep body from scrolling when mobile menu open */
.menu-open{ overflow:hidden; }
@media(min-width:768px){ .menu-open{ overflow:auto; } }