/* =========================================================
   PUSHPANJALI VILLA — LAYOUT
   Page-section patterns built from the components. A page
   composes these + components; it should never need to
   invent a new one-off layout rule.
   ========================================================= */

.container-xl{max-width:1280px;margin:0 auto;padding:0 24px;}

.section{padding:var(--sp-7) 0;}
.section-tight{padding:70px 0;}

.section-head{max-width:680px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:var(--fs-h2);line-height:1.15;margin:16px 0 0;}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden;}
.hero.hero-short{height:60vh;min-height:420px;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,12,8,.35) 0%, rgba(15,12,8,.45) 45%, rgba(15,12,8,.85) 100%),
             linear-gradient(90deg, rgba(15,12,8,.55) 0%, rgba(15,12,8,.15) 55%);
  z-index:1;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05);}
.hero-content{position:relative;z-index:2;color:#fff;max-width:760px;}
.hero-content .eyebrow{color:var(--gold);}
.hero-content .eyebrow::before{background:var(--gold);}
.hero-content h1{font-size:var(--fs-h1);line-height:1.08;color:#fff;margin:20px 0 22px;}
.hero-content h1 em{color:var(--gold);font-style:normal;}
.hero-content p.lead{color:rgba(255,255,255,.85);font-size:1.15rem;max-width:560px;margin-bottom:36px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.hero-stats{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.25);padding-top:28px;max-width:620px;}
.hero-stats .stat{flex:1;padding-right:24px;}
.hero-stats .stat .num{font-family:var(--font-display);font-size:2.1rem;color:var(--gold);font-weight:700;}
.hero-stats .stat .lbl{font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.75);}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.8;}
.hero-scroll .line{width:1px;height:36px;background:linear-gradient(#fff, transparent);animation:pvscroll 1.8s infinite;}

/* ---------- EXPERIENCE / FEATURE CARDS ---------- */
.exp-card{position:relative;overflow:hidden;border-radius:var(--radius);height:460px;}
.exp-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) ease;}
.exp-card:hover img{transform:scale(1.06);}
.exp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);}
.exp-card .exp-body{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2;color:#fff;}
.exp-card .exp-num{font-family:var(--font-display);color:var(--gold);font-size:.85rem;letter-spacing:2px;}
.exp-card h3{color:#fff;font-size:1.6rem;margin:6px 0 6px;}
.exp-card p{color:rgba(255,255,255,.8);font-size:.9rem;margin:0;}

/* ---------- DARK / WEDDING-STYLE SECTION ---------- */
.section-dark{background:var(--ink);color:#fff;position:relative;}
.section-dark .eyebrow{color:var(--gold);}
.section-dark .section-head h2{color:#fff;}
.section-dark p{color:rgba(255,255,255,.68);}

.masonry-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;gap:12px;}
.masonry-grid a{grid-row:span 2;overflow:hidden;position:relative;border-radius:var(--radius);cursor:pointer;}
.masonry-grid a:nth-child(1){grid-row:span 3;grid-column:span 2;}
.masonry-grid a:nth-child(4){grid-row:span 3;}
.masonry-grid img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) ease;}
.masonry-grid a:hover img{transform:scale(1.08);}

/* ---------- ROOM / EDITORIAL CARDS ---------- */
.room-card{display:block;background:var(--card);border:1px solid var(--border);overflow:hidden;transition:box-shadow var(--dur-fast) ease;}
.room-card:hover{box-shadow:var(--shadow-card);}
.room-card .img-wrap{height:280px;overflow:hidden;}
.room-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) ease;}
.room-card:hover .img-wrap img{transform:scale(1.05);}
.room-card .body{padding:26px;}
.room-card h3{font-size:1.35rem;margin-bottom:6px;}
.room-card .price{color:var(--gold-dark);font-family:var(--font-display);font-size:1.1rem;}

.dine-feature{position:relative;height:560px;overflow:hidden;border-radius:var(--radius);cursor:pointer;}
.dine-feature img,.dine-feature video{width:100%;height:100%;object-fit:cover;}

/* ---------- COUNTERS ---------- */
.counter-box{text-align:center;padding:20px;}
.counter-box .num{font-family:var(--font-display);font-size:3rem;color:var(--gold-dark);font-weight:700;}
.counter-box .lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-soft);margin-top:6px;}
.section-dark .counter-box .lbl{color:rgba(255,255,255,.6);}

/* ---------- REVIEWS ---------- */
.review-card{background:var(--card);border:1px solid var(--border);padding:34px;height:100%;}
.review-card .stars{color:var(--gold);letter-spacing:2px;margin-bottom:16px;}
.review-card p.quote{color:var(--text);font-style:italic;font-size:1.02rem;}
.review-card .who{margin-top:20px;font-weight:600;font-size:.85rem;letter-spacing:.5px;}
.review-card .who span{display:block;color:var(--text-soft);font-weight:400;font-size:.78rem;}

/* ---------- REVIEW CAROUSEL (Swiper) ---------- */
.pv-review-swiper{padding-bottom:10px;}
.pv-review-swiper .swiper-slide{height:auto;display:flex;}
.pv-review-swiper .review-card{width:100%;}
.pv-review-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px;}
.pv-review-prev,.pv-review-next{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur-fast) ease;}
.pv-review-prev:hover,.pv-review-next:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.pv-review-swiper .swiper-pagination{position:static;display:flex;gap:8px;align-items:center;}
.pv-review-swiper .swiper-pagination-bullet{width:8px;height:8px;background:var(--border);opacity:1;border-radius:50%;transition:all var(--dur-fast) ease;}
.pv-review-swiper .swiper-pagination-bullet-active{background:var(--gold);width:22px;border-radius:4px;}

/* ---------- GALLERY GRID ---------- */
.gal-item{position:relative;overflow:hidden;height:260px;border-radius:var(--radius);cursor:pointer;}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) ease;}
.gal-item:hover img{transform:scale(1.08);}
.gal-filter-btn{background:transparent;cursor:pointer;font-family:var(--font-body);}
.gal-filter-btn.active{background:var(--gold);color:#fff;border-color:var(--gold);}

/* Dedicated 2-col + 1-wide showcase (used on Experience page) — deliberately
   does NOT reuse .masonry-grid, whose children default to grid-row:span 2;
   reusing it here doubled the image column height and created the dead
   dark space below the text column that was flagged in QA. */
.showcase-grid-2x1{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:12px;}
.showcase-grid-2x1 a{overflow:hidden;position:relative;border-radius:var(--radius);cursor:pointer;}
.showcase-grid-2x1 a.wide{grid-column:span 2;}
.showcase-grid-2x1 img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) ease;}
.showcase-grid-2x1 a:hover img{transform:scale(1.08);}

/* ---------- WOW / CINEMATIC FULL-BLEED ---------- */
.wow-section{position:relative;height:72vh;min-height:460px;overflow:hidden;}
.wow-section video,.wow-section img{width:100%;height:100%;object-fit:cover;}
.wow-section .wow-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,12,8,.25) 0%, rgba(15,12,8,.55) 100%);display:flex;align-items:center;justify-content:center;text-align:center;}
.wow-section h2{color:#fff;font-size:3rem;max-width:760px;padding:0 24px;line-height:1.25;}

/* ---------- FINAL CTA ---------- */
.final-cta{position:relative;padding:120px 0;text-align:center;color:#fff;overflow:hidden;}
.final-cta img,.final-cta video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.final-cta::after{content:"";position:absolute;inset:0;background:rgba(15,12,8,.72);z-index:1;}
.final-cta-tall{min-height:550px;display:flex;align-items:center;}
.final-cta-tall::after{background:rgba(15,12,8,.55);}
.final-cta .inner{position:relative;z-index:2;}
.final-cta h2{color:#fff;font-size:2.8rem;max-width:700px;margin:0 auto 20px;}
.final-cta p{color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 36px;}

.cta-strip{background:var(--gold);padding:36px 0;}
.cta-strip h3{color:#fff;font-size:1.4rem;margin:0;}

/* ---------- TIMELINE (About page) ---------- */
.pv-timeline{position:relative;padding-left:36px;border-left:2px solid var(--border);}
.pv-timeline .tl-item{position:relative;padding-bottom:44px;}
.pv-timeline .tl-item:last-child{padding-bottom:0;}
.pv-timeline .tl-item::before{content:"";position:absolute;left:-43px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid var(--bg);}
.pv-timeline .tl-year{font-family:var(--font-display);color:var(--gold-dark);font-size:1.2rem;margin-bottom:4px;}

/* ---------- WEDDING JOURNEY (horizontal timeline, weddings.php) ---------- */
.pv-journey{display:flex;justify-content:space-between;position:relative;flex-wrap:wrap;gap:30px 0;}
.pv-journey::before{content:"";position:absolute;top:19px;left:5%;right:5%;height:1px;background:rgba(255,255,255,.18);z-index:0;}
.pv-journey-item{flex:1 1 20%;min-width:110px;text-align:center;position:relative;z-index:1;padding:0 10px;}
.pv-journey-dot{width:38px;height:38px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);color:var(--gold);font-family:var(--font-display);font-size:.9rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.pv-journey-item h4{color:#fff;font-size:1rem;margin-bottom:6px;}
.pv-journey-item p{font-size:.8rem;margin:0;}
@media (max-width:768px){
  .pv-journey{flex-direction:column;align-items:flex-start;gap:0;}
  .pv-journey::before{top:0;bottom:0;left:19px;right:auto;width:1px;height:auto;}
  .pv-journey-item{display:flex;align-items:flex-start;gap:16px;text-align:left;padding:0 0 32px;min-width:0;}
  .pv-journey-item:last-child{padding-bottom:0;}
  .pv-journey-dot{margin:0;flex-shrink:0;}
}

/* ---------- FAQ ---------- */
.pv-faq-item{border-bottom:1px solid var(--border);padding:22px 0;}
.pv-faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--font-display);font-size:1.1rem;}
.pv-faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-fast) ease;font-size:.92rem;}
.pv-faq-item.open .pv-faq-a{max-height:300px;padding-top:14px;}
.pv-faq-item.open .pv-faq-icon{transform:rotate(45deg);}
.pv-faq-icon{transition:transform var(--dur-fast) ease;color:var(--gold);}

/* ---------- TRUST METRICS STRIP (homepage) ---------- */
.pv-trust-strip{background:var(--card);border-bottom:1px solid var(--border);padding:30px 0;}
.pv-trust-strip i{color:var(--gold-dark);font-size:1.3rem;display:block;margin-bottom:8px;}
.pv-trust-strip .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-soft);font-weight:600;}

/* ---------- ROOM EDITORIAL BLOCKS (rooms.php collection) ---------- */
.room-editorial-block{padding:56px 0;border-bottom:1px solid var(--border);}
.room-editorial-block:last-child{border-bottom:0;padding-bottom:0;}
.room-editorial-block:first-child{padding-top:0;}
.room-editorial-img{height:420px;overflow:hidden;border-radius:var(--radius);cursor:pointer;}
.room-editorial-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-luxury);}
.room-editorial-img:hover img{transform:scale(1.05);}

/* ---------- COMPARISON TABLE ---------- */
.pv-compare-table{width:100%;border-collapse:collapse;background:var(--card);font-size:.9rem;}
.pv-compare-table th{background:var(--ink);color:#fff;text-align:left;padding:16px 18px;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;}
.pv-compare-table td{padding:16px 18px;border-bottom:1px solid var(--border);color:var(--text-soft);}
.pv-compare-table tr:hover td{background:var(--bg);}
.pv-compare-table td strong{color:var(--text);font-family:var(--font-display);font-weight:700;}

/* ---------- SPECIFICATION GRID (room.php) ---------- */
.pv-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.pv-spec-item{background:var(--card);padding:22px;text-align:center;}
.pv-spec-item i{color:var(--gold-dark);font-size:1.3rem;margin-bottom:10px;display:block;}
.pv-spec-item .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-soft);margin-bottom:4px;}
.pv-spec-item .val{font-family:var(--font-display);font-size:1.05rem;color:var(--text);}

/* ---------- TRUE MASONRY (gallery.php) — CSS columns, no fixed grid gaps ---------- */
.pv-masonry{column-count:4;column-gap:14px;}
.pv-masonry .pv-masonry-item{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;}
.pv-masonry .pv-masonry-item img,.pv-masonry .pv-masonry-item video{width:100%;display:block;transition:transform var(--dur-med) ease;}
.pv-masonry .pv-masonry-item:hover img{transform:scale(1.06);}
.pv-masonry .pv-masonry-item .cat-tag{position:absolute;top:10px;left:10px;background:rgba(15,12,8,.7);color:#fff;font-size:.65rem;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:20px;}
.pv-masonry .pv-masonry-item .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,12,8,.25);}
.pv-masonry .pv-masonry-item .play-badge i{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* ---------- HIGHLIGHT CARDS (room.php) ---------- */
.pv-highlight-card{background:var(--card);border:1px solid var(--border);padding:28px 22px;text-align:center;height:100%;transition:box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;}
.pv-highlight-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);}
.pv-highlight-card i{color:var(--gold-dark);font-size:1.7rem;margin-bottom:14px;display:block;}
.pv-highlight-card h4{font-size:1rem;margin-bottom:6px;}
.pv-highlight-card p{font-size:.85rem;margin:0;}

/* ---------- LEGAL PAGES (privacy/terms) ---------- */
.pv-legal h2{font-size:1.3rem;margin:36px 0 14px;}
.pv-legal h2:first-child{margin-top:0;}
.pv-legal p{margin-bottom:16px;line-height:1.8;}
.pv-legal ul{margin-bottom:16px;padding-left:22px;color:var(--text-soft);}
.pv-legal li{margin-bottom:8px;line-height:1.7;}
.pv-legal a{color:var(--gold-dark);text-decoration:underline;}