/* ==========================================================================
   HOTEL VS HOTEL — shared component stylesheet
   Used by the 22 hotel-vs-hotel comparison pages.

   Every class here is prefixed "hvh-" to avoid collisions with sitewide
   classes (nav, footer, cmp-*, bb-*, etc).

   This file assumes the HOST PAGE already defines the following in its own
   <style> block (verified against da-nang-nightlife-guide.html and
   best-bars-in-da-nang.html):

     --sand, --sand-mid, --sand-dark
     --white, --ink, --ink-soft, --ink-muted
     --ocean, --ocean-deep, --ocean-pale
     --coral, --coral-light
     --night
     --font-serif, --font-sans
     --max, --gutter
     --r-sm, --r-md, --r-lg
     --ease

   Do NOT redefine :root variables here. Do NOT include nav/header/footer
   styles here — those stay in each page's own HTML/CSS.
   ========================================================================== */


/* ── SHARED PRIMITIVES ─────────────────────────────────────────────────── */

.hvh-section{padding:clamp(2.5rem,5vw,4rem) var(--gutter)}
.hvh-section-inner{max-width:var(--max);margin:0 auto}
.hvh-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:.65rem;display:block}
.hvh-h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2.8vw,2.1rem);letter-spacing:-.025em;color:var(--ink);margin-bottom:1.5rem}
.hvh-h2 em{font-style:italic;color:var(--ocean)}

/* generic 2-col frame every split module rides on top of */
.hvh-duel{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}


/* ── 1. SPLIT-SCREEN COMPARISON HERO ───────────────────────────────────── */

.hvh-hero{position:relative;background:var(--night);padding:clamp(2rem,4vw,3rem) var(--gutter) 0}
.hvh-hero-inner{max-width:var(--max);margin:0 auto}
.hvh-hero-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);text-align:center;margin-bottom:.9rem}
.hvh-hero-title{font-family:var(--font-serif);font-size:clamp(1.9rem,4.4vw,3.1rem);color:#fff;text-align:center;line-height:1.08;letter-spacing:-.03em;margin-bottom:.6rem}
.hvh-hero-title em{font-style:italic;color:rgba(255,255,255,.55)}
.hvh-hero-sub{font-size:clamp(.92rem,1.4vw,1.05rem);color:rgba(255,255,255,.55);text-align:center;max-width:62ch;margin:0 auto 2rem;line-height:1.7}

.hvh-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.hvh-split-side{position:relative;aspect-ratio:4/5;overflow:hidden}
.hvh-split-side img{width:100%;height:100%;object-fit:cover;display:block}
.hvh-split-side::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.88) 0%,rgba(10,10,10,.25) 55%,rgba(10,10,10,.05) 100%)}
.hvh-split-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.5rem 1.5rem 1.75rem;text-align:center}
.hvh-split-hotel-eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.4rem}
.hvh-split-hotel-name{font-family:var(--font-serif);font-size:clamp(1.3rem,2.6vw,1.9rem);color:#fff;line-height:1.15;letter-spacing:-.02em}

.hvh-split-divider{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:1.15rem;font-weight:400;letter-spacing:.02em;box-shadow:0 8px 28px rgba(0,0,0,.4);border:3px solid var(--night)}

@media(max-width:1024px){
  .hvh-split-side{aspect-ratio:16/10}
}
@media(max-width:768px){
  .hvh-split{grid-template-columns:1fr}
  .hvh-split-side{aspect-ratio:16/9}
  .hvh-split-divider{width:52px;height:52px;font-size:.95rem}
}


/* ── 2. EDITOR'S PICK MODULE ────────────────────────────────────────────── */

.hvh-editors-pick{background:var(--sand);padding:clamp(3rem,6vw,5rem) var(--gutter);border-top:1px solid var(--sand-dark)}
.hvh-editors-pick-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hvh-editors-pick-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.hvh-editors-pick-img img{width:100%;height:100%;object-fit:cover;display:block}
.hvh-editors-pick-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:.85rem}
.hvh-editors-pick-badge::before{content:'';width:24px;height:1px;background:var(--coral);flex-shrink:0}
.hvh-editors-pick-name{font-family:var(--font-serif);font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin-bottom:1.1rem}
.hvh-editors-pick-why-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.5rem}
.hvh-editors-pick-why{font-size:.97rem;line-height:1.8;color:var(--ink-soft)}

@media(max-width:1024px){
  .hvh-editors-pick-inner{grid-template-columns:1fr}
  .hvh-editors-pick-img{aspect-ratio:16/9;order:-1}
}


/* ── 3. THE 30-SECOND VERDICT SPLIT CARD ───────────────────────────────── */

.hvh-verdict30{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0}
.hvh-verdict30-card{background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--r-lg);padding:1.75rem}
.hvh-verdict30-hotel{font-family:var(--font-serif);font-size:1.3rem;color:var(--ink);margin-bottom:1rem;letter-spacing:-.02em}
.hvh-verdict30-label{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean);margin:1.1rem 0 .5rem}
.hvh-verdict30-label:first-of-type{margin-top:0}
.hvh-verdict30-bestfor{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.hvh-verdict30-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.hvh-verdict30-list li{font-size:.88rem;line-height:1.55;color:var(--ink-soft);padding-left:1.4rem;position:relative}
.hvh-verdict30-wins li::before{content:'✓';position:absolute;left:0;color:var(--ocean);font-weight:700}
.hvh-verdict30-tradeoff li::before{content:'−';position:absolute;left:.15rem;color:var(--coral);font-weight:700}

@media(max-width:600px){
  .hvh-verdict30{grid-template-columns:1fr}
}


/* ── 4. EDITORIAL SCORECARD ────────────────────────────────────────────── */

.hvh-scorecard-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--sand-dark)}
.hvh-scorecard-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hvh-scorecard{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.hvh-scorecard thead th{background:var(--ocean-deep);color:#fff;padding:.85rem 1.1rem;text-align:left;font-weight:600;font-size:.78rem;letter-spacing:.02em}
.hvh-scorecard thead th:not(:first-child){text-align:center}
.hvh-scorecard tbody td{padding:.8rem 1.1rem;border-bottom:1px solid var(--sand-dark);color:var(--ink-soft);vertical-align:middle;background:var(--white)}
.hvh-scorecard tbody tr:nth-child(even) td{background:var(--sand)}
.hvh-scorecard tbody tr:last-child td{border-bottom:none}
.hvh-scorecard td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.hvh-scorecard td:not(:first-child){text-align:center}
.hvh-scorecard-score{font-weight:700;color:var(--ink)}

/* mobile card fallback — stacked, readable rows, no page-level scroll */
.hvh-scorecard-cards{display:none;flex-direction:column;gap:.75rem}
.hvh-scorecard-card{background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--r-md);padding:1rem 1.1rem}
.hvh-scorecard-card-cat{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.65rem}
.hvh-scorecard-card-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0}
.hvh-scorecard-card-row+.hvh-scorecard-card-row{border-top:1px solid var(--sand-mid)}
.hvh-scorecard-card-hotel{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.hvh-scorecard-card-score{font-size:.9rem;font-weight:700;color:var(--ink)}

@media(max-width:768px){
  .hvh-scorecard-wrap{display:none}
  .hvh-scorecard-cards{display:flex}
}


/* ── 5. OVERALL SCORE DISPLAY ───────────────────────────────────────────── */

.hvh-overall-scores{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}
.hvh-overall-score-card{background:var(--ocean-deep);border-radius:var(--r-lg);padding:2rem 1.5rem;text-align:center}
.hvh-overall-score-hotel{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.85rem}
.hvh-overall-score-num{font-family:var(--font-serif);font-size:clamp(3rem,7vw,4.25rem);color:#fff;line-height:1;letter-spacing:-.02em}
.hvh-overall-score-num span{font-size:.42em;color:rgba(255,255,255,.4);font-family:var(--font-sans);font-weight:600}
.hvh-overall-score-card.hvh-is-winner{background:var(--coral)}
.hvh-overall-score-card.hvh-is-winner .hvh-overall-score-hotel{color:rgba(255,255,255,.8)}

@media(max-width:600px){
  .hvh-overall-scores{grid-template-columns:1fr}
}


/* ── 6. SIDE-BY-SIDE PHOTO COMPARISON MODULE ───────────────────────────── */

.hvh-photo-compare{margin:2.5rem 0}
.hvh-photo-compare-label{font-family:var(--font-serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--ink);margin-bottom:1rem;letter-spacing:-.02em}
.hvh-photo-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hvh-photo-compare-item{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.hvh-photo-compare-item img{width:100%;height:100%;object-fit:cover;display:block}
.hvh-photo-compare-tag{position:absolute;bottom:.75rem;left:.75rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:.3rem .65rem;border-radius:3px;backdrop-filter:blur(4px)}
.hvh-photo-compare-note{font-size:.9rem;line-height:1.75;color:var(--ink-soft);margin-top:1rem}
.hvh-photo-compare-winner-row{margin-top:.85rem}

@media(max-width:600px){
  .hvh-photo-compare-grid{grid-template-columns:1fr}
}


/* ── 7. WINNER BADGE ───────────────────────────────────────────────────── */

.hvh-winner-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .75rem;border-radius:100px;background:var(--ocean-pale);color:var(--ocean-deep)}
.hvh-winner-badge::before{content:'🏆';font-size:.8em}
.hvh-winner-badge.hvh-tie{background:var(--sand-mid);color:var(--ink-muted)}
.hvh-winner-badge.hvh-tie::before{content:'—'}
.hvh-winner-badge.hvh-coral{background:rgba(200,96,74,.14);color:var(--coral)}


/* ── 8. "WHICH SHOULD YOU BOOK?" CHECKLIST ─────────────────────────────── */

.hvh-book-check{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0}
.hvh-book-check-card{background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--r-lg);padding:1.75rem}
.hvh-book-check-title{font-family:var(--font-serif);font-size:1.2rem;color:var(--ink);margin-bottom:1.1rem;letter-spacing:-.02em}
.hvh-book-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.hvh-book-check-list li{font-size:.9rem;line-height:1.55;color:var(--ink-soft);padding-left:1.6rem;position:relative}
.hvh-book-check-list li::before{content:'';position:absolute;left:0;top:.15rem;width:1.05rem;height:1.05rem;border-radius:4px;background:var(--ocean-pale);border:1px solid rgba(27,92,92,.25)}
.hvh-book-check-list li::after{content:'✓';position:absolute;left:.19rem;top:.02rem;color:var(--ocean);font-size:.7rem;font-weight:700}

@media(max-width:600px){
  .hvh-book-check{grid-template-columns:1fr}
}


/* ── 9. "KNOW BEFORE YOU BOOK" TRADEOFF CARDS ──────────────────────────── */

.hvh-tradeoff{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0}
.hvh-tradeoff-card{background:var(--sand);border:1px solid var(--sand-dark);border-radius:var(--r-lg);padding:1.75rem}
.hvh-tradeoff-hotel{font-family:var(--font-serif);font-size:1.15rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.3rem}
.hvh-tradeoff-label{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:1rem;display:block}
.hvh-tradeoff-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.hvh-tradeoff-list li{font-size:.88rem;line-height:1.55;color:var(--ink-soft);padding-left:1.1rem;position:relative}
.hvh-tradeoff-list li::before{content:'−';position:absolute;left:0;color:var(--ink-muted);font-weight:700}

@media(max-width:600px){
  .hvh-tradeoff{grid-template-columns:1fr}
}


/* ── 10. PRICE TIER INDICATOR ───────────────────────────────────────────── */

.hvh-price-tier{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-soft)}
.hvh-price-tier-signs{font-weight:800;letter-spacing:.02em;color:var(--sand-dark)}
.hvh-price-tier-signs .hvh-active{color:var(--ocean)}
.hvh-price-tier-text{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);padding:.2rem .55rem;background:var(--sand-mid);border-radius:100px}


/* ── 11. BOOKING CTA BUTTON ─────────────────────────────────────────────── */

.hvh-cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.hvh-cta-btn{flex:1;min-width:220px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;background:var(--coral);color:#fff;font-family:var(--font-sans);font-size:.88rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:var(--r-md);border:none;cursor:pointer;text-decoration:none;text-align:center;transition:background .15s,transform .12s;box-shadow:0 4px 16px rgba(200,96,74,.28)}
.hvh-cta-btn:hover{background:var(--coral-light);transform:translateY(-2px)}
.hvh-cta-btn.hvh-cta-secondary{background:transparent;color:var(--ocean-deep);border:1.5px solid var(--ocean-deep);box-shadow:none}
.hvh-cta-btn.hvh-cta-secondary:hover{background:var(--ocean-deep);color:#fff}

@media(max-width:600px){
  .hvh-cta-row{flex-direction:column}
  .hvh-cta-btn{width:100%}
}


/* ── 12. FINAL VERDICT MODULE ───────────────────────────────────────────── */

.hvh-final-verdict{background:var(--ocean-deep);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);margin:2.5rem 0}
.hvh-final-verdict-eyebrow{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.75rem}
.hvh-final-verdict-h2{font-family:var(--font-serif);font-size:clamp(1.5rem,2.8vw,2rem);color:#fff;margin-bottom:1.1rem;letter-spacing:-.02em;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.15)}
.hvh-final-verdict-body{color:rgba(255,255,255,.75);line-height:1.8;font-size:.96rem;margin-bottom:1rem}
.hvh-final-verdict-body:last-of-type{margin-bottom:1.5rem}
.hvh-final-verdict-pick{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:700;color:#fff;margin-bottom:1.25rem}
.hvh-final-verdict-pick::before{content:'🏆';font-size:1rem}
.hvh-final-verdict .hvh-cta-row{margin-top:0}
.hvh-final-verdict .hvh-cta-btn.hvh-cta-secondary{color:#fff;border-color:rgba(255,255,255,.4)}
.hvh-final-verdict .hvh-cta-btn.hvh-cta-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}


/* ── RESPONSIVE — SITE-WIDE PASSES FOR THIS TEMPLATE ───────────────────── */

@media(max-width:1024px){
  .hvh-verdict30{gap:1.25rem}
  .hvh-overall-scores{gap:1.25rem}
}

@media(max-width:768px){
  .hvh-verdict30{grid-template-columns:1fr}
  .hvh-book-check{grid-template-columns:1fr}
  .hvh-tradeoff{grid-template-columns:1fr}
  .hvh-editors-pick-inner{gap:2rem}
  .hvh-final-verdict{padding:1.75rem 1.25rem}
}

@media(max-width:600px){
  .hvh-duel{grid-template-columns:1fr;gap:1.25rem}
  .hvh-cta-btn{min-width:0}
}

/* Belt-and-braces: nothing in this template should ever force page-level
   horizontal scroll on mobile. Only the scorecard's own inner wrapper
   scrolls (and only above 768px, where it's shown as a real table). */
.hvh-section-inner,.hvh-duel,.hvh-verdict30,.hvh-overall-scores,.hvh-photo-compare-grid,.hvh-book-check,.hvh-tradeoff{max-width:100%}