/* =====================================================================
   Hunza Tours v7 — Premium UX layer
   Loaded AFTER main.css. Consolidates the accumulated v4.x/v5.x/v6.x card
   patches into one coherent system and adds the v7 premium components.
   No SEO, URL, schema or content dependencies live here — visual only.
   ===================================================================== */

/* ── 1. Design tokens ──────────────────────────────────────────────
   One spacing scale, one type scale, one radius/shadow/breakpoint set.
   Everything below references these, so the system stays coherent.      */
:root{
  /* spacing scale (4px base) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;
  /* type scale */
  --fs-xs:12.5px; --fs-sm:14px; --fs-base:15.5px; --fs-md:17px;
  --fs-lg:20px;   --fs-xl:24px; --fs-2xl:clamp(26px,3.4vw,34px);
  --fs-3xl:clamp(30px,4.2vw,44px); --fs-hero:clamp(40px,5.6vw,68px);
  /* radii */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  /* elevation */
  --e-1:0 2px 8px rgba(18,48,38,.06);
  --e-2:0 10px 28px rgba(18,48,38,.09);
  --e-3:0 24px 60px rgba(18,48,38,.16);
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.28s;
  --section-y:clamp(56px,7vw,96px);
}

/* ── 2. Icon system ────────────────────────────────────────────────
   One line-weight SVG language. Inline <svg class="ic"> in markup and the
   PHP ht_icon() helper both inherit these rules so calendar, location,
   travellers, vehicle, hotel, mountain, guide and duration all match.     */
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;
  flex:0 0 auto;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round;fill:none}
.ic-lg{width:1.4em;height:1.4em}

/* ── 3. Button system ──────────────────────────────────────────────  */
.btn{border-radius:var(--r-sm);font-weight:600;letter-spacing:.01em;
  padding:13px 22px;transition:transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn-lg{padding:16px 30px;font-size:var(--fs-md)}
.btn-primary{box-shadow:var(--e-1)}
.btn-primary:hover{box-shadow:var(--e-2)}
.btn .ic{margin-right:.1em}

/* ── 4. Tour card — single source of truth ─────────────────────────
   Replaces the v4.0 / v4.3 / v4.4 / v4.7 stacks. Bigger photography,
   lighter metadata, clearer price hierarchy, fewer badges.               */
.grid-3,.grid-4{align-items:stretch}
.tour-card{position:relative;height:100%;min-width:0;display:flex;
  flex-direction:column;background:#fff;border:1px solid rgba(22,58,45,.10);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--e-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.tour-card:hover{transform:translateY(-4px);box-shadow:var(--e-3);
  border-color:rgba(229,142,58,.30)}

/* media: larger, consistent, one rule (no !important war) */
.tour-card .tc-media{position:relative;width:100%;aspect-ratio:3/2;
  height:auto!important;min-height:0!important;max-height:none!important;
  flex:0 0 auto!important;background:var(--glacier);overflow:hidden}
.tour-card .tc-media > a{display:block;width:100%;height:100%}
.tour-card .tc-media img{width:100%!important;height:100%!important;
  min-height:100%!important;max-height:none!important;object-fit:cover;
  object-position:center;display:block;transition:transform .5s var(--ease)}
.tour-card:hover .tc-media img{transform:scale(1.045)}

/* one badge, top-left; extra badges de-emphasised */
.tour-card .badge{top:var(--sp-3);left:var(--sp-3);border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:6px 12px;
  box-shadow:var(--e-1)}
.tour-card .alt-tag{display:none} /* altitude belongs inside the package, not on the card */

.tour-card .tc-body{display:flex;flex-direction:column;flex:1;
  padding:var(--sp-5) var(--sp-5) var(--sp-6);min-height:0!important;gap:0}
.tour-card .tour-category-label{font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--apricot-deep);
  margin-bottom:var(--sp-2)}
/* metadata: only what the card must answer — where / how long / private */
.tour-card .tc-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:0 0 var(--sp-3);min-height:0!important}
.tour-card .tc-meta span{display:inline-flex;align-items:center;gap:5px;
  background:var(--glacier);border:1px solid rgba(22,58,45,.08);
  padding:5px 10px;border-radius:8px;font-size:var(--fs-xs);color:var(--slate)}
.tour-card .tc-body h3{font-size:var(--fs-lg);line-height:1.24;margin:0 0 var(--sp-2);
  min-height:0!important;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden}
.tour-card .tc-desc{font-size:var(--fs-sm);line-height:1.6;color:var(--slate);
  margin:0 0 var(--sp-4);min-height:0!important;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tour-card .tc-foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-top:auto;min-height:0!important;
  border-top:1px solid var(--line);padding-top:var(--sp-4)}
.tour-card .price small{display:block;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--slate);margin-bottom:1px}
.tour-card .price b{font-family:var(--font-display);font-size:var(--fs-lg);
  color:var(--pine);line-height:1.05}
.tour-card .price b i{font-style:normal;font-size:12px;color:var(--slate);
  font-weight:400}
.tour-card .tc-foot .btn{padding:10px 16px;font-size:var(--fs-sm);white-space:nowrap}
.tour-card .tc-foot .btn::after{content:none} /* v7 uses an explicit ht_icon('arrow'); drop the legacy pseudo-arrow */
.tour-card .tc-foot .btn .ic{width:.95em;height:.95em}

/* empty media slot (kept from v4.4, cleaned) */
.tour-card .tc-media.tc-media-empty{background:#eef3f0;border-bottom:1px solid var(--line)}
.tour-card .tc-media.tc-media-empty::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#eef3f0,#e4ece8)}
.tour-card .tc-media.tc-media-empty .badge{z-index:2}

/* ── 5. Premium hero ───────────────────────────────────────────────
   One exceptional image, short H1, one primary + one secondary CTA, and
   compact trust indicators. The country-list paragraph is hidden here and
   preserved for SEO lower in the page (see home-content.php v7 block).     */
.hero.hero-v7{min-height:clamp(560px,86vh,860px)}
.hero.hero-v7 .wrap{grid-template-columns:1fr;max-width:940px;
  padding-top:var(--sp-16);padding-bottom:var(--sp-20);text-align:left}
.hero.hero-v7 .hero-kicker,
.hero.hero-v7 .hero-stats{display:none}
.hero.hero-v7 h1{font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.015em;
  margin:var(--sp-4) 0 var(--sp-5);max-width:16ch}
.hero.hero-v7 .hero-sub{font-size:var(--fs-md);color:#E7F0EB;max-width:52ch;
  line-height:1.6;margin-bottom:var(--sp-8);font-weight:300}
.hero.hero-v7 .hero-actions{margin-bottom:var(--sp-8);gap:var(--sp-3)}
.hero.hero-v7 .hero-actions .btn{border-radius:var(--r-sm)}
.hero-trust-inline{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  align-items:center}
.hero-trust-inline span{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);color:#D6E6DD;font-weight:500}
.hero-trust-inline .ic{color:#FFC98B}
.hero-trust-sep{width:1px;height:16px;background:rgba(255,255,255,.22)}
@media(max-width:900px){
  .hero.hero-v7 .wrap{padding-top:var(--sp-12);padding-bottom:var(--sp-16)}
}

/* ── 6. Editorial destination band ─────────────────────────────────
   Large photographic rows with short copy — replaces endless cards for
   Attabad, Passu, Khunjerab, Karimabad, Hopper, Gulmit.                  */
.dest-editorial{display:grid;gap:var(--sp-4)}
.dest-row{display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--e-1);transition:box-shadow var(--dur) var(--ease)}
.dest-row:hover{box-shadow:var(--e-2)}
.dest-row:nth-child(even){grid-template-columns:.9fr 1.1fr}
.dest-row:nth-child(even) .dest-media{order:2}
.dest-media{position:relative;min-height:280px;background:var(--glacier) center/cover}
.dest-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dest-copy{padding:var(--sp-10) var(--sp-10);display:flex;flex-direction:column;
  justify-content:center}
.dest-copy .eyebrow{margin-bottom:var(--sp-3)}
.dest-copy h3{font-size:var(--fs-xl);margin:0 0 var(--sp-3);line-height:1.15}
.dest-copy p{color:var(--slate);font-size:var(--fs-base);line-height:1.7;
  margin:0 0 var(--sp-4)}
.dest-copy .dest-link{display:inline-flex;align-items:center;gap:7px;
  font-weight:600;color:var(--pine);font-size:var(--fs-sm)}
.dest-copy .dest-link .ic{transition:transform var(--dur) var(--ease)}
.dest-copy .dest-link:hover .ic{transform:translateX(4px)}
@media(max-width:820px){
  .dest-row,.dest-row:nth-child(even){grid-template-columns:1fr}
  .dest-row:nth-child(even) .dest-media{order:0}
  .dest-media{min-height:220px}
  .dest-copy{padding:var(--sp-8) var(--sp-6)}
}

/* ── 7. Itinerary timeline (refined v6.0.8 base) ───────────────────
   Clean vertical timeline: Day 01 → destination → experience → overnight
   /altitude. No JS reveal; important content always visible.             */
.itin-head{margin:var(--sp-10) 0 var(--sp-5)}
.itin-body{border-radius:var(--r-md)}
.itin-day h3{font-size:var(--fs-md)}
.itin-day p{font-size:var(--fs-sm);line-height:1.72}
.itin-day .dstay{font-size:var(--fs-xs);font-weight:600;color:var(--pine);
  margin-top:var(--sp-3);display:inline-flex;align-items:center;gap:6px;
  background:var(--glacier);border:1px solid var(--line);padding:5px 12px;
  border-radius:var(--r-pill)}
.itin-day .dstay .ic{color:var(--apricot-deep)}

/* ── 8. Sticky booking / quote — desktop panel + mobile bar ────────  */
.d-side{top:var(--sp-16)}
.book-card{border-radius:var(--r-lg)}
/* mobile sticky Book Now bar (hidden on desktop) */
.mobile-quote-bar{display:none}
@media(max-width:1000px){
  .mobile-quote-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;justify-content:space-between;gap:var(--sp-3);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(18,48,38,.10)}
  .mobile-quote-bar .mqb-price{line-height:1.15}
  .mobile-quote-bar .mqb-price small{display:block;font-size:11px;color:var(--slate)}
  .mobile-quote-bar .mqb-price b{font-family:var(--font-display);font-size:var(--fs-lg);
    color:var(--pine)}
  .mobile-quote-bar .btn{flex:0 0 auto;margin:0}
  body.single-tour-v7{padding-bottom:76px}
}

/* ── 9. Reviews / trust ────────────────────────────────────────────  */
.operator-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
  background:var(--glacier);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--slate)}
.operator-strip b{color:var(--pine)}
.operator-strip .ic{color:var(--pine)}

/* ── 10. Motion / accessibility floor ──────────────────────────────  */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .tour-card:hover{transform:none}
  .tour-card:hover .tc-media img{transform:none}
}

/* ── 11. Visible planning context ───────────────────────────────────
   Keeps useful international/guide information available to users instead of
   hiding SEO-oriented copy inside the hero. */
.home-context-v7{background:#fff;border-bottom:1px solid var(--line)}
.home-context-v7 .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-8);padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.home-context-v7 p{margin:0;color:var(--slate);font-size:var(--fs-sm);line-height:1.65}
.home-context-v7 strong{color:var(--pine)}
@media(max-width:760px){.home-context-v7 .wrap{grid-template-columns:1fr;gap:var(--sp-3);padding-top:var(--sp-5);padding-bottom:var(--sp-5)}}


/* v7.0.4 — compact homepage quote card */
.hero-v7 .quote-card-compact{
  width:min(100%,380px);
  max-width:380px;
  padding:20px 22px;
  justify-self:end;
}
.hero-v7 .quote-card-compact h2{
  margin:0 0 4px;
  font-size:clamp(1.35rem,2vw,1.65rem);
  line-height:1.15;
}
.hero-v7 .quote-card-compact .sub{
  margin:0 0 12px;
  font-size:.9rem;
  line-height:1.4;
}
.hero-v7 .quote-card-compact label{
  margin-top:8px;
  margin-bottom:4px;
  font-size:.82rem;
}
.hero-v7 .quote-card-compact select,
.hero-v7 .quote-card-compact input[type="month"]{
  min-height:42px;
  padding:8px 10px;
  font-size:.9rem;
}
.hero-v7 .quote-card-compact .consent-check{
  margin-top:10px;
  gap:7px;
  font-size:.76rem;
  line-height:1.35;
}
.hero-v7 .quote-card-compact .btn{
  min-height:42px;
  margin-top:10px;
}
.hero-v7 .quote-card-compact .quote-note{
  margin:7px 0 0;
  font-size:.72rem;
  line-height:1.3;
}
@media (max-width:900px){
  .hero-v7 .quote-card-compact{
    width:100%;
    max-width:520px;
    justify-self:stretch;
    margin-inline:auto;
  }
}
@media (max-width:560px){
  .hero-v7 .quote-card-compact{
    padding:16px;
    max-width:100%;
  }
}


/* v7.0.6 — desktop hero: true 50/50 content and quote layout */
@media (min-width:901px){
  .hero-v7 > .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(32px,4vw,64px);
  }
  .hero-v7 > .wrap > div:first-child{
    width:100%;
    max-width:none;
    min-width:0;
  }
  .hero-v7 .quote-card-compact{
    width:100%;
    max-width:380px;
    justify-self:end;
    margin:0;
  }
}


/* v7.0.10 — authoritative desktop hero split.
   Higher specificity overrides the earlier one-column v7 hero rule. */
@media (min-width:901px){
  .hero.hero-v7 > .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    column-gap:clamp(36px,5vw,72px);
    max-width:1200px;
    width:100%;
    text-align:left;
  }
  .hero.hero-v7 > .wrap > div:first-child{
    grid-column:1;
    width:100%;
    max-width:100%;
    min-width:0;
    justify-self:stretch;
  }
  .hero.hero-v7 > .wrap > .quote-card.quote-card-compact{
    grid-column:2;
    width:100%;
    max-width:380px;
    min-width:0;
    justify-self:end;
    align-self:center;
    margin:0;
  }
}


/* v7.0.14 — International Hunza tour card titles reveal on desktop hover/focus.
   Mobile/touch keeps titles visible because hover is not reliable there. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .international-hover-titles .tour-card .tc-body h3{
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .international-hover-titles .tour-card:hover .tc-body h3,
  .international-hover-titles .tour-card:focus-within .tc-body h3{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}
@media (hover:none), (pointer:coarse), (max-width:900px){
  .international-hover-titles .tour-card .tc-body h3{
    opacity:1;
    visibility:visible;
    transform:none;
  }
}



/* v7.0.19 — MET Norway native live Hunza weather figures on tour pages */
.tour-weather-card{
  margin-top:18px;padding:16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 10px 28px rgba(18,48,38,.07);overflow:hidden
}
.tour-weather-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.tour-weather-head h3{margin:2px 0 0;font-family:var(--font-display);font-size:1.2rem;color:var(--pine);line-height:1.15}
.weather-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--apricot)}
.weather-location{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:.76rem;font-weight:700;color:var(--slate)}
.weather-location .ic{width:15px;height:15px}
.weather-current{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--glacier)}
.weather-current-main{display:flex;align-items:center;gap:10px}
.weather-symbol{font-size:2rem;line-height:1}
.weather-temp{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--pine)}
.weather-condition{display:block;margin-top:3px;font-size:.78rem;color:var(--slate)}
.weather-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.weather-stats span{padding:7px 5px;background:#fff;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:.68rem;color:var(--slate)}
.weather-stats b{display:block;color:var(--pine);font-size:.64rem;text-transform:uppercase;letter-spacing:.03em}
.weather-forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.weather-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border:1px solid var(--line);border-radius:10px;text-align:center;background:#fff;font-size:.72rem;color:var(--slate)}
.weather-day b{color:var(--pine)}
.weather-day-icon{font-size:1.15rem}
.weather-day small{font-size:.62rem}
.weather-updated{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:.61rem;color:var(--slate)}
.weather-updated a{color:var(--pine);text-decoration:underline}
.weather-unavailable{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--glacier);font-size:.76rem;color:var(--slate)}
.weather-unavailable b{display:block;color:var(--pine);margin-bottom:3px}
.weather-note{margin:10px 0 0;font-size:.7rem;line-height:1.45;color:var(--slate)}
@media(max-width:900px){.tour-weather-card{margin-top:14px}}
@media(max-width:420px){
  .weather-stats{grid-template-columns:1fr}
  .weather-forecast{gap:5px}
  .weather-day{font-size:.66rem}
}

/* =====================================================================
   v7.1 — Professional hotels page + hotel detail polish
   Fixes the dark-card invisible ghost button, upgrades room-type cards,
   gallery and listing cards to a consistent premium standard.
   ===================================================================== */

/* --- Fix: ghost button was dark-on-dark inside the booking card --- */
.vehicle-booking-card .btn-ghost,
.premium-hotel-booking .btn-ghost,
.hotel-booking-card .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.vehicle-booking-card .btn-ghost:hover,
.premium-hotel-booking .btn-ghost:hover,
.hotel-booking-card .btn-ghost:hover{
  color:#fff;border-color:#fff;background:rgba(255,255,255,.12)}

/* --- Premium room-type cards --- */
.hotel-room-grid{gap:16px;margin:20px 0 26px}
.hotel-room-option{position:relative;padding:20px 20px 18px;border:1px solid var(--line);
  border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(18,48,38,.05);
  overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.hotel-room-option::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--apricot),var(--pine))}
.hotel-room-option:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(18,48,38,.12);
  border-color:rgba(229,142,58,.35)}
.hotel-room-option h3{display:flex;align-items:center;gap:8px;margin:0 0 8px!important;
  font-size:17px!important;color:var(--pine)!important;line-height:1.25}
.hotel-room-option h3::before{content:"";flex:0 0 auto;width:20px;height:20px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 18h18M6 10V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 18h18M6 10V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85}
.hotel-room-option p{margin:0 0 12px!important;font-size:14px!important;line-height:1.6!important;color:var(--slate)}
.hotel-room-option span{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  background:var(--glacier);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--pine)}

/* --- Real-photo gallery: cleaner, consistent --- */
.hotel-real-gallery{gap:12px;margin:6px 0 26px}
.hotel-real-gallery a{border-radius:14px;box-shadow:0 4px 14px rgba(18,48,38,.08)}
.hotel-real-gallery img{transition:transform .5s var(--ease)}

/* --- Booking card: clearer rate block --- */
.hotel-booking-rate{margin:2px 0 6px}
.hotel-booking-rate small{display:block;color:#bcd0c6;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.hotel-booking-rate strong{display:block;font-family:var(--font-display);font-size:22px;color:#ffc98b;margin-top:3px}

/* --- Listing-page hotel cards: premium + fixed photo placeholder --- */
.premium-hotel-card .tc-media{aspect-ratio:3/2}
/* Robust fallback: guarantee the media box keeps height even if aspect-ratio is
   unsupported or the <img> is hidden after a load error, so a card can never
   collapse to a lone floating badge on a blank row. */
.premium-hotel-card .tc-media,
.premium-hotel-card .hotel-card-media{min-height:200px!important;height:auto;
  background:linear-gradient(150deg,#eef4f0,#dde9e2)}
.premium-hotel-card .tc-media > a{display:block;width:100%;height:100%;min-height:200px}
.premium-hotel-card .tc-media img{min-height:200px}
/* If an image errors and JS hides it, reveal the icon fallback behind it. */
.premium-hotel-card .hotel-card-media.img-failed{display:flex;align-items:center;justify-content:center}
.premium-hotel-card .hotel-card-media.img-failed::before{content:"";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;opacity:.5;
  background:var(--pine);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M7 8h.01M7 12h.01M11 8h.01M11 12h.01M7 21v-4h4v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M7 8h.01M7 12h.01M11 8h.01M11 12h.01M7 21v-4h4v4'/%3E%3C/svg%3E") center/contain no-repeat}
.premium-hotel-card .tc-media > a.hotel-photo-placeholder{display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;width:100%;height:100%;min-height:0;text-align:center;padding:20px 14px;
  background:linear-gradient(150deg,#eef4f0,#dde9e2)}
.premium-hotel-card .hotel-photo-placeholder::before{content:"";width:34px;height:34px;margin-bottom:2px;
  background:var(--pine);opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M7 8h.01M7 12h.01M11 8h.01M11 12h.01M7 21v-4h4v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M7 8h.01M7 12h.01M11 8h.01M11 12h.01M7 21v-4h4v4'/%3E%3C/svg%3E") center/contain no-repeat}
.premium-hotel-card .hotel-photo-placeholder span{font-size:.7rem;text-transform:uppercase;
  letter-spacing:.12em;color:#7a8c83;font-weight:700}
.premium-hotel-card .hotel-photo-placeholder b{font-size:1rem;color:var(--pine);font-family:var(--font-display)}
.premium-hotel-card .amen{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.premium-hotel-card .amen span{display:inline-flex;align-items:center;gap:5px;background:var(--glacier);
  border:1px solid var(--line);padding:5px 10px;border-radius:8px;font-size:12px;color:var(--slate)}
.premium-hotel-card .hotel-rate small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.premium-hotel-card .hotel-rate b{color:var(--pine)}
.premium-hotel-card .tc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.premium-hotel-card .hotel-card-btn{flex:0 0 auto;padding:11px 20px;font-size:14px;white-space:nowrap}

/* --- Hotel hero: guarantee legible overlay even with a bright photo --- */
.hotel-single-hero{position:relative}
.hotel-single-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,28,22,.30),rgba(12,28,22,.62));z-index:0}
.hotel-single-hero .wrap{position:relative;z-index:1}
.hotel-chip-verified{background:rgba(46,107,82,.85)!important;border-color:rgba(255,255,255,.35)!important}

@media(max-width:640px){
  .hotel-room-grid{grid-template-columns:1fr}
}