/* ==========================================================================
   Destination pages (views/destinations): hero, facts, overview + photos,
   highlights, areas, weather chart, tips, related, hub grid. Builds on ux.css.
   ========================================================================== */
.ux-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- hero */
.ux-hero--dest{min-height:min(760px,92svh);padding:calc(var(--ux-header-h) + 40px) 0 64px}
.ux-hero--hub{min-height:min(640px,86svh)}
.ux-hero--dest .ux-hero__bg img{object-position:center 50%}
.ux-hero--dest .ux-hero__bg::after{background:linear-gradient(180deg,rgba(8,10,53,.74) 0%,rgba(8,10,53,.32) 34%,rgba(8,10,53,.36) 62%,rgba(8,10,53,.86) 100%)}
.ux-hero--dest .ux-hero__title{font-size:clamp(36px,5.4vw,70px)}
.ux-hero--dest .ux-hero__eyebrow .ux-flag{width:20px;height:15px;border-radius:3px}
.ux-destpage .content :is(ol,ul){max-width:none;counter-reset:none}
.ux-destpage .content article,.ux-destpage .content figure{margin:0}
.ux-crumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:0 0 18px!important;font-size:14px;font-weight:600;color:rgba(255,255,255,.78)}
.ux-crumbs li{display:inline-flex;align-items:center;gap:6px}
.ux-crumbs a{color:rgba(255,255,255,.88)!important}
.ux-crumbs a:hover{color:#fff!important;text-decoration:underline}
.ux-crumbs .ux-i{width:14px;height:14px;opacity:.6}
.ux-crumbs [aria-current]{color:#fff}

.ux-quick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:22px}
.ux-quick>span{display:inline-flex;align-items:center;gap:6px;margin-right:4px;font-size:14px;font-weight:600;color:rgba(255,255,255,.82)}
.ux-quick>span .ux-i{color:var(--ux-cyan)}
.ux-quick button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:600 14px/1 var(--ux-font);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.ux-quick button:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6);transform:translateY(-1px)}

/* ---------- key facts (overlap the hero; while a search dropdown is open the hero goes on top) */
.ux-dfacts{position:relative;z-index:6;margin-top:-34px}
.ux-hero--dest:has(.is-open,.ux-ac:not([hidden]),.ux-guests:not([hidden]),.ux-mini__panel:not([hidden])){z-index:7}
.ux-dfacts__list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;padding:8px!important;border-radius:var(--ux-r-lg);background:var(--ux-surface);border:1px solid var(--ux-line-2);box-shadow:var(--ux-shadow)}
.ux-dfacts__list li{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border-radius:var(--ux-r)}
.ux-dfacts__list li+li{box-shadow:-1px 0 0 var(--ux-line-2)}
.ux-dfacts__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--ux-icon-bg);color:var(--ux-sky)}
.ux-dfacts__list li>span:last-child{display:flex;flex-direction:column;min-width:0;gap:3px}
.ux-dfacts small{font-size:12px;font-weight:600;color:var(--ux-muted)}
.ux-dfacts strong{font:700 14.5px/1.3 var(--ux-font);color:var(--ux-heading)}
.ux-dfacts strong a{color:inherit!important;text-decoration:underline;text-decoration-color:var(--ux-line);text-underline-offset:3px}
.ux-dfacts strong a:hover{text-decoration-color:currentColor}

/* ---------- overview + photos */
.ux-dov{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.ux-dov--solo{grid-template-columns:minmax(0,820px)}
.ux-prose{margin-top:20px}
.ux-prose p{margin:0 0 16px!important;color:var(--ux-text);font-size:16.5px;line-height:1.75}
.ux-prose strong{color:var(--ux-heading)}
.ux-dov__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ux-dgal{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(3,150px);gap:14px}
.ux-dgal__item{position:relative;margin:0;border-radius:var(--ux-r-lg);overflow:hidden;background:var(--ux-tint)}
.ux-dgal__item--1{grid-row:span 2}
.ux-dgal__item--4{grid-column:span 2}
.ux-dgal__item:only-child,.ux-dgal__item--1:nth-last-child(2){grid-row:span 3}
.ux-dgal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ux-ease)}
.ux-dgal__item:hover img{transform:scale(1.05)}
.ux-dgal figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 10px;border-radius:10px;background:rgba(12,15,74,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(6px);transition:all .3s var(--ux-ease)}
.ux-dgal__item:hover figcaption,.ux-dgal__item:focus-within figcaption{opacity:1;transform:none}

/* ---------- highlights */
.ux-dhl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ux-dhl__item{position:relative;padding:28px 26px;border-radius:var(--ux-r-lg);background:var(--ux-surface);border:1px solid var(--ux-line-2);box-shadow:var(--ux-shadow-sm);transition:transform .3s var(--ux-ease),box-shadow .3s}
.ux-dhl__item:hover{transform:translateY(-4px);box-shadow:var(--ux-shadow)}
.ux-dhl__num{position:absolute;top:22px;right:24px;font:800 30px/1 var(--ux-font-head);color:var(--ux-line)}
.ux-dhl__item h3{font:800 19px/1.25 var(--ux-font-head);color:var(--ux-heading);margin-bottom:8px!important}
.ux-dhl__item p{font-size:15px;line-height:1.65;color:var(--ux-text)}

/* ---------- areas */
.ux-dar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ux-dar__item{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:var(--ux-r-lg);background:var(--ux-surface);border:1px solid var(--ux-line-2);box-shadow:var(--ux-shadow-sm)}
.ux-dar__pin{display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 4px;background:var(--ux-primary);color:#fff;font:800 15px/1 var(--ux-font-head)}
.ux-dar__item h3{font:800 20px/1.2 var(--ux-font-head);color:var(--ux-heading)}
.ux-dar__for{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 10px;border-radius:999px;background:var(--ux-tint-2);color:var(--ux-sky);font-size:12.5px;font-weight:700}
.ux-dar__for .ux-i{width:14px;height:14px}
.ux-dar__item>p:not(.ux-dar__for){flex:1;font-size:15px;line-height:1.65;color:var(--ux-text)}
.ux-dar__item .ux-link{margin-top:4px;font-size:15px}

/* ---------- weather */
.ux-dcl{display:grid;grid-template-columns:.9fr 1.3fr;gap:56px;align-items:center}
.ux-dcl__best{display:inline-flex;align-items:center;gap:12px;margin-top:24px!important;padding:12px 18px 12px 14px;border-radius:var(--ux-r);background:var(--ux-icon-bg-warm)}
.ux-dcl__best>.ux-i{width:22px;height:22px;color:var(--ux-accent);fill:currentColor}
.ux-dcl__best span{display:flex;flex-direction:column;gap:2px}
.ux-dcl__best small{font-size:12px;font-weight:700;color:var(--ux-accent-ink)}
.ux-dcl__best strong{font:800 17px/1.2 var(--ux-font-head);color:var(--ux-heading)}
.ux-dcl__chart{margin:0;padding:24px 22px 18px;border-radius:var(--ux-r-lg);background:var(--ux-surface);border:1px solid var(--ux-line-2);box-shadow:var(--ux-shadow-sm)}
.ux-dcl__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--ux-muted)}
.ux-dcl__legend span{display:inline-flex;align-items:center;gap:7px}
.ux-dcl__legend span::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--ux-line)}
.ux-dcl__legend .is-air::before{background:linear-gradient(180deg,#ffb35c,#ff8a3d)}
.ux-dcl__legend .is-sea::before{background:var(--ux-sky)}
.ux-dcl__legend .is-best::before{background:var(--ux-tint-2);box-shadow:inset 0 0 0 1.5px var(--ux-sky)}
.ux-dcl__table{width:100%;border-collapse:separate;border-spacing:4px 0;table-layout:fixed}
.ux-dcl__table th,.ux-dcl__table td{padding:0;text-align:center;border:0;background:none}
.ux-dcl__table thead th{padding-top:8px;font-size:12px;font-weight:700;color:var(--ux-muted);text-transform:capitalize}
.ux-dcl__table thead{display:table-footer-group}
.ux-dcl__bars td{height:190px;vertical-align:bottom;border-radius:12px 12px 0 0}
.ux-dcl__bars td.is-best{background:var(--ux-tint-2)}
.ux-dcl__bar{position:relative;display:block;width:62%;max-width:30px;height:var(--h);margin:0 auto;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#ffb35c,#ff8a3d);transform-origin:bottom;animation:ux-grow .9s var(--ux-ease) both}
.ux-dcl__bars td:not(.is-best) .ux-dcl__bar{background:linear-gradient(180deg,#ffd29e,#ffb071)}
.ux-dcl__bar b{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font-size:11.5px;font-weight:800;color:var(--ux-heading);white-space:nowrap}
@keyframes ux-grow{from{transform:scaleY(0)}to{transform:none}}
.ux-dcl__sea td{padding:8px 0 2px;font-size:11.5px;font-weight:700;color:var(--ux-sky)}
.ux-dcl__sea .ux-i{display:block;width:13px;height:13px;margin:0 auto 2px}
.ux-dcl__chart figcaption{margin-top:12px;font-size:12px;color:var(--ux-muted)}

/* ---------- tips */
.ux-dtips{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ux-dtips li{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:var(--ux-r);background:var(--ux-surface);border:1px solid var(--ux-line-2)}
.ux-dtips li>.ux-i{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--ux-green-bg);color:var(--ux-green)}
.ux-dtips p{font-size:15px;line-height:1.65;color:var(--ux-text)}

/* ---------- faq: question as h3 inside summary */
.ux-faq__q{font:inherit!important;color:inherit;margin:0;letter-spacing:inherit}

/* ---------- related */
.ux-drel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ux-drel .ux-trend{aspect-ratio:4/3}
.ux-drel .ux-trend::after{background:linear-gradient(180deg,rgba(12,15,74,.3) 0%,rgba(12,15,74,0) 28%,rgba(12,15,74,0) 40%,rgba(12,15,74,.9) 100%)}
.ux-drel__tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:var(--ux-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ux-heading);font:700 13px/1 var(--ux-font)}
.ux-drel__tag .ux-flag{width:20px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ux-drel .ux-trend__text small{display:block;margin-top:6px;line-height:1.4}
.ux-drel__go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:#fff}
.ux-drel__go .ux-i{width:16px;height:16px;transition:transform .3s var(--ux-ease)}
.ux-drel .ux-trend:hover .ux-drel__go .ux-i{transform:translateX(4px)}

.ux-destpage .ux-cta{margin-top:0}

/* ---------- hub */
.ux-dhub{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ux-dhub__card{display:flex;flex-direction:column;border-radius:var(--ux-r-lg);overflow:hidden;background:var(--ux-surface);border:1px solid var(--ux-line-2);box-shadow:var(--ux-shadow-sm);color:var(--ux-heading)!important;transition:transform .3s var(--ux-ease),box-shadow .3s}
.ux-dhub__card:hover{transform:translateY(-4px);box-shadow:var(--ux-shadow)}
.ux-dhub__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ux-tint)}
.ux-dhub__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ux-ease)}
.ux-dhub__card:hover img{transform:scale(1.05)}
.ux-dhub__body{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px}
.ux-dhub__body small{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ux-muted)}
.ux-dhub__body strong{font:800 21px/1.2 var(--ux-font-head)}
.ux-dhub__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ux-text)}
.ux-dhub__meta span{display:inline-flex;align-items:center;gap:5px}
.ux-dhub__meta .ux-i{width:15px;height:15px;color:var(--ux-sky)}
.ux-dhub__body .ux-link{margin-top:auto;padding-top:6px}

/* ---------- dark theme */
html[data-theme="dark"] .ux-dcl__bar b{color:#e8eaff}
html[data-theme="dark"] .ux-dhl__num{color:rgba(255,255,255,.12)}

/* ---------- responsive */
@media (max-width:1240px){
  .ux-dfacts__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ux-dfacts__list li+li{box-shadow:none}
  .ux-dar{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .ux-dov,.ux-dcl{grid-template-columns:1fr;gap:36px}
  .ux-dhl,.ux-dhub{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .ux-dfacts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-drel{grid-template-columns:1fr 1fr}
  .ux-drel .ux-trend:nth-child(3){display:none}
}
@media (max-width:640px){
  .ux-hero--dest{min-height:0;padding:calc(var(--ux-header-h) + 20px) 0 56px}
  .ux-crumbs ol{font-size:13px;margin-bottom:12px!important}
  .ux-quick{gap:6px}
  .ux-quick>span{flex-basis:100%;justify-content:center;margin:0}
  .ux-quick button{height:34px;padding:0 12px;font-size:13px}
  .ux-dfacts{margin-top:-24px}
  .ux-dfacts__list li{padding:10px;gap:10px}
  .ux-dfacts__icon{width:34px;height:34px;border-radius:10px}
  .ux-dfacts strong{font-size:13.5px}
  .ux-dgal{grid-template-rows:repeat(3,110px);gap:10px}
  .ux-dgal figcaption{display:none}
  .ux-dhl,.ux-dar,.ux-dhub,.ux-drel{grid-template-columns:1fr}
  .ux-drel .ux-trend:nth-child(3){display:block}
  .ux-dcl__chart{padding:18px 10px 14px;overflow-x:auto}
  .ux-dcl__table{min-width:460px}
  .ux-dcl__bars td{height:150px}
  .ux-dtips{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ux-dcl__bar{animation:none}
}