/* ═══════════════════════════════════════════════
   HOME.CSS — Homepage (index.html) only
   Vietnam City Breaks
   ═══════════════════════════════════════════════ */

/* ── Hero ── */
.hero{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.hero-clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1557750255-c76072a7aad1?w=1920&q=85') center/cover no-repeat;animation:kenBurns 18s ease-in-out infinite alternate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(20,20,40,.72) 0%,rgba(10,60,60,.55) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:115px 1.25rem 65px;width:100%;max-width:990px;margin:0 auto}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:white;padding:.4rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:1.25rem}
.hero h1{font-family:var(--fh);color:white;font-size:clamp(1.88rem,4.5vw,3.29rem);font-weight:800;line-height:1.18;margin-bottom:.75rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero h1 em{font-style:normal;color:#FFD580}
.hero-sub{color:rgba(255,255,255,.88);font-size:clamp(1rem,2vw,1.18rem);margin-bottom:2.25rem;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.hero-trust{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.75rem}
.hero-trust-item{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.9);font-size:.82rem;font-weight:500}
.hero-trust-item svg{color:#FFD580}

/* ── Helpers (replacing former inline styles) ── */
.section-hd-left{text-align:left;margin:0}
.section-hd-left h2{margin-top:.4rem}
.tcard-rating-cr{margin-bottom:.7rem}
.tours-empty{text-align:center;color:var(--text-m);font-size:.95rem;padding:1.5rem 0 .5rem}
.tours-empty a{color:var(--primary);font-weight:700}

/* ── Section Shared ── */
.section{padding:4.5rem 0}
.section-alt{background:var(--bg-soft)}
.section-hd{text-align:center;margin-bottom:2.5rem}
.section-hd h2{font-family:var(--fh);font-size:clamp(1.41rem,3vw,1.97rem);font-weight:800;color:var(--text-h);margin-bottom:.4rem}
.section-hd p{color:var(--text-m);font-size:.95rem;max-width:580px;margin:0 auto}
.section-hd .pill{display:inline-block;background:var(--primary-light);color:var(--primary);font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.btn-outline{display:inline-flex;align-items:center;gap:.4rem;margin:2rem auto 0;padding:.7rem 2rem;border:2px solid var(--primary);color:var(--primary);background:transparent;border-radius:50px;font-weight:600;font-size:.9rem;transition:all .2s;cursor:pointer;text-decoration:none}
.btn-outline:hover{background:var(--primary);color:white}
.center{display:flex;justify-content:center}

/* ── Destinations ── */
.dest-tabs{display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap;margin-bottom:2rem}
.dest-tab{padding:.55rem 1.25rem;font-size:.82rem;font-weight:600;border-radius:50px;background:white;border:2px solid var(--border);color:var(--text-b);cursor:pointer;transition:all .2s}
.dest-tab.active,.dest-tab:hover{background:var(--primary);color:white;border-color:var(--primary)}
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.dest-card{position:relative;border-radius:14px;overflow:hidden;height:210px;cursor:pointer;display:block}
.dest-card:hover .dest-img{transform:scale(1.1)}
.dest-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dest-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:.85rem}
.dest-name{font-family:var(--fh);color:white;font-size:.95rem;font-weight:700;line-height:1.2}
.dest-count{color:rgba(255,255,255,.75);font-size:.72rem;margin-top:.15rem}
.dest-card.large{grid-column:span 2;height:240px}

/* ── Tour Tabs + Grid ── */
.tabs-row{display:flex;align-items:center;gap:0;margin-bottom:2rem;border-bottom:2px solid var(--border)}
.tab-btn{padding:.75rem 1.25rem;font-size:.82rem;font-weight:600;color:var(--text-m);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .2s,border-color .2s;white-space:nowrap}
.tab-btn.active,.tab-btn:hover{color:var(--primary);border-bottom-color:var(--primary)}
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ── Cruises ── */
.cruise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.crcard{background:white;border-radius:14px;overflow:hidden;box-shadow:var(--sh-card);transition:transform .3s,box-shadow .3s}
.crcard:hover{transform:translateY(-5px);box-shadow:var(--sh-hover)}
.crcard-img{height:175px;overflow:hidden;position:relative}
.crcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.crcard:hover .crcard-img img{transform:scale(1.08)}
.crcard-stars{position:absolute;bottom:.6rem;left:.6rem;background:rgba(0,0,0,.5);color:var(--star);font-size:.75rem;padding:.2rem .5rem;border-radius:4px;backdrop-filter:blur(4px)}
.crcard-body{padding:.9rem}
.crcard-title{font-family:var(--fh);font-weight:700;font-size:18px;color:var(--text-h);margin-bottom:.35rem;line-height:1.3}
.crcard-meta{font-size:.75rem;color:var(--text-m);margin-bottom:.65rem}
.crcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cr-price{font-family:var(--fh);font-weight:800;font-size:1.05rem;color:var(--primary)}
.cr-price span{font-size:.72rem;font-weight:400;color:var(--text-m)}
.btn-cr{padding:.45rem .9rem;background:var(--secondary);color:white;border-radius:var(--r-btn);font-size:.75rem;font-weight:600;transition:background .2s}
.btn-cr:hover{background:#085858}

/* ── Reviews ── */
.reviews-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.review-platforms{display:flex;gap:1rem;flex-wrap:wrap}
.rp-badge{display:flex;align-items:center;gap:.5rem;background:white;border:1px solid var(--border);border-radius:10px;padding:.5rem 1rem}
.rp-badge .score{font-family:var(--fh);font-weight:800;font-size:1.3rem;color:var(--text-h)}
.rp-badge .info{font-size:.75rem}
.rp-badge .platform{font-weight:600;color:var(--text-h)}
.rp-badge .cnt{color:var(--text-m)}
.rp-stars{color:var(--star);font-size:.8rem}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* ── Why Book With Us ── */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
.why-card{text-align:center;padding:1.5rem 1rem;background:white;border-radius:14px;border:1px solid var(--border);transition:border-color .2s,box-shadow .2s}
.why-card:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.why-icon{width:68px;height:68px;margin:0 auto 1rem;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary)}
.why-card h3{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--text-h);margin-bottom:.35rem}
.why-card p{font-size:.83rem;color:var(--text-b);line-height:1.6}

/* ── Team / Local Experts ── */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.tmcard{text-align:center;transition:transform .3s}
.tmcard:hover{transform:translateY(-5px)}
.tm-ava{width:115px;height:115px;border-radius:50%;margin:0 auto .9rem;overflow:hidden;border:3px solid white;box-shadow:var(--sh-card)}
.tm-ava img{width:100%;height:100%;object-fit:cover}
.tm-name{font-family:var(--fh);font-weight:700;font-size:.9rem;color:var(--text-h)}
.tm-role{font-size:.78rem;color:var(--text-m);margin-top:.15rem}
.tm-langs{display:flex;justify-content:center;gap:.25rem;margin-top:.4rem;flex-wrap:wrap}
.lang-tag{font-size:.65rem;background:var(--secondary-light);color:var(--secondary);padding:.15rem .4rem;border-radius:3px;font-weight:600}

/* ── Team bio expand (shared: index + about) ── */
.ab-team-grid .tmcard{position:relative;padding-bottom:.5rem}
.tm-bio{max-height:0;overflow:hidden;transition:max-height .4s ease;text-align:left;padding:0 .25rem}
.tm-bio.tm-bio-open{max-height:280px}
.tm-bio p{font-size:.82rem;color:var(--text-b);line-height:1.6;padding:.75rem 0 .35rem}
.tm-bio em{color:var(--text-m);font-style:italic}
.tm-toggle{display:inline-flex;align-items:center;gap:.35rem;background:none;border:1px solid var(--border);border-radius:20px;padding:.3rem .85rem;font-family:var(--fh);font-size:.72rem;font-weight:700;color:var(--text-m);cursor:pointer;margin-top:.6rem;transition:all .2s}
.tm-toggle:hover,.tm-toggle[aria-expanded="true"]{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.tm-toggle span{transition:transform .3s;display:inline-block}
.tm-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.team-footer{text-align:center}

/* ── Blog ── */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.blcard{background:white;border-radius:14px;overflow:hidden;box-shadow:var(--sh-card);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.blcard:hover{transform:translateY(-5px);box-shadow:var(--sh-hover)}
.bl-img{height:170px;overflow:hidden}
.bl-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blcard:hover .bl-img img{transform:scale(1.08)}
.bl-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.bl-tag{font-size:.68rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.bl-title{font-family:var(--fh);font-weight:700;font-size:18px;color:var(--text-h);line-height:1.4;margin-bottom:auto;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-date{font-size:.73rem;color:var(--text-m);margin-top:.6rem;display:flex;align-items:center;gap:.3rem}

/* ── Newsletter ── */
.nl-section{padding:4rem 0;background:linear-gradient(135deg,var(--secondary) 0%,#063030 100%);position:relative;overflow:hidden}
.nl-section::before{content:'';position:absolute;top:-40%;right:-10%;width:500px;height:500px;background:rgba(255,255,255,.04);border-radius:50%}
.nl-inner{text-align:center;position:relative;z-index:2;max-width:560px;margin:0 auto;padding:0 1.25rem}
.nl-inner h2{font-family:var(--fh);font-size:clamp(1.41rem,3vw,1.88rem);font-weight:800;color:white;margin-bottom:.4rem}
.nl-inner p{color:rgba(255,255,255,.8);font-size:.95rem;margin-bottom:1.5rem}
.nl-form{display:flex;background:white;border-radius:50px;padding:.35rem;overflow:hidden}
.nl-form input{flex:1;border:none;outline:none;padding:.65rem 1.25rem;font-size:.9rem;font-family:var(--fb);min-width:0}
.nl-form button{background:var(--primary);color:white;border:none;border-radius:50px;padding:.65rem 1.5rem;font-weight:700;font-size:.88rem;cursor:pointer;transition:background .2s;white-space:nowrap}
.nl-form button:hover{background:var(--primary-dark)}

/* ── Media Logos ── */
.media-strip{padding:2.5rem 0;background:white;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.media-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.media-label{font-size:.78rem;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.media-logos{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;justify-content:center}
.ml{font-family:var(--fh);font-weight:800;font-size:1.15rem;color:#CCCCDD;letter-spacing:-.02em;transition:color .2s;cursor:default}
.ml:hover{color:#888899}
.ml-ta{color:#00A680;opacity:.5}.ml-ta:hover{color:#00A680;opacity:.8}
.ml-g{color:#4285F4;opacity:.4}.ml-g:hover{color:#4285F4;opacity:.7}
.ml-viator{color:#1B3A6B;opacity:.4}.ml-viator:hover{color:#1B3A6B;opacity:.7}

/* ── Customize CTA Banner ── */
.cta-banner{padding:3rem 0;background:var(--bg-soft)}
.cta-inner{background:linear-gradient(135deg,#1A1A2E 0%,#0A3030 100%);border-radius:20px;padding:2.5rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}
.cta-inner::before{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:rgba(232,82,26,.12);border-radius:50%}
.cta-inner::after{content:'';position:absolute;right:80px;bottom:-80px;width:180px;height:180px;background:rgba(10,110,110,.2);border-radius:50%}
.cta-text{position:relative;z-index:2}
.cta-text .eyebrow{color:var(--star);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.cta-text h3{color:white;font-family:var(--fh);font-size:1.41rem;font-weight:800;line-height:1.25}
.cta-text p{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:.4rem;max-width:480px}
.cta-actions{display:flex;gap:.75rem;flex-shrink:0;position:relative;z-index:2;flex-wrap:wrap}
.btn-cta-primary{background:var(--primary);color:white;padding:.8rem 1.8rem;border-radius:50px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transition:background .2s,transform .15s;white-space:nowrap}
.btn-cta-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-cta-ghost{background:rgba(255,255,255,.1);color:white;padding:.8rem 1.8rem;border-radius:50px;font-weight:600;font-size:.9rem;border:1px solid rgba(255,255,255,.2);transition:background .2s;white-space:nowrap}
.btn-cta-ghost:hover{background:rgba(255,255,255,.18)}

/* ── Responsive ── */
@media(max-width:1024px){
  .tours-grid,.cruise-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero-content{padding:100px 1rem 55px}
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .tours-grid,.cruise-grid,.reviews-grid,.why-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr);justify-items:center}
  .tm-bio.tm-bio-open{max-height:520px}
  .cta-inner{flex-direction:column;text-align:center;padding:2rem 1.5rem}
  .cta-actions{justify-content:center}
  .nl-form{flex-direction:column;border-radius:12px;gap:.35rem}
  .nl-form input{border-radius:8px}
  .nl-form button{border-radius:8px;width:100%}
  .reviews-top{flex-direction:column;align-items:flex-start}
  .tabs-row{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .media-inner{gap:1.25rem;flex-direction:column;text-align:center}
  .media-logos{gap:1rem}
}
@media(max-width:480px){
  .dest-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .review-platforms{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .tm-bio{transition:none}
}