/*
 * Weblatis public mobile experience.
 * Owns the shared navigation drawer and swipeable homepage card rails.
 */
body.weblatis-public-ui.is-public-drawer-open{overflow:hidden;touch-action:none}

body.weblatis-public-ui .drawer{
  position:fixed;
  inset-block:0;
  inset-inline-start:auto;
  inset-inline-end:0;
  width:min(390px,calc(100% - 28px));
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-inline-start:1px solid var(--wl-border,var(--border));
  border-radius:0;
  overflow:hidden;
  background:var(--wl-surface,var(--surface));
  color:var(--wl-text,var(--text));
  box-shadow:-24px 0 68px rgba(8,12,35,.24);
  transform:translateX(104%);
  opacity:.99;
  transition:transform .24s ease;
}
html[dir="rtl"] body.weblatis-public-ui .drawer{
  inset-inline-start:0;
  inset-inline-end:auto;
  border-inline-start:0;
  border-inline-end:1px solid var(--wl-border,var(--border));
  box-shadow:24px 0 68px rgba(8,12,35,.24);
  transform:translateX(-104%);
}
body.weblatis-public-ui .drawer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
body.weblatis-public-ui .drawer.is-open,
html[dir="rtl"] body.weblatis-public-ui .drawer.is-open{transform:none}
body.weblatis-public-ui .drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
  padding:14px 18px;
  border-block-end:1px solid var(--wl-border,var(--border));
  background:var(--wl-surface,var(--surface));
}
body.weblatis-public-ui .drawer__header .brand{display:inline-flex;align-items:center;color:var(--wl-text,var(--text));text-decoration:none}
body.weblatis-public-ui .drawer__header .brand strong{font-size:19px;letter-spacing:-.03em}
body.weblatis-public-ui .drawer__body{min-height:0;padding:18px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.weblatis-public-ui .drawer--navigation .drawer__body{display:grid;align-content:start;gap:7px}
body.weblatis-public-ui .drawer--navigation .drawer__body>a:not(.button){
  display:flex;
  align-items:center;
  min-height:48px;
  padding:11px 12px;
  border-radius:12px;
  color:var(--wl-text,var(--text));
  font-size:15px;
  font-weight:720;
  text-decoration:none;
}
body.weblatis-public-ui .drawer--navigation .drawer__body>a:not(.button):hover,
body.weblatis-public-ui .drawer--navigation .drawer__body>a:not(.button):focus-visible{
  background:color-mix(in srgb,var(--wl-primary,var(--brand-primary,#000099)) 8%,var(--wl-surface,var(--surface)));
  color:var(--wl-primary,var(--brand-primary,#000099));
}
body.weblatis-public-ui .drawer--navigation .drawer__body>.button{width:100%;margin-block-start:10px}
body.weblatis-public-ui .drawer__footer{padding:14px 18px;border-block-start:1px solid var(--wl-border,var(--border));background:var(--wl-surface,var(--surface))}
body.weblatis-public-ui .drawer__footer--split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.weblatis-public-ui .drawer::backdrop{background:rgba(8,12,35,.62);backdrop-filter:blur(4px)}

/* Mobile rails keep all server-rendered cards available while reducing vertical length. */
.weblatis-public-ui .wl-mobile-carousel-controls{display:none}
@media(max-width:700px){
  body.weblatis-public-ui .drawer{width:min(360px,100%)}
  body.weblatis-public-ui .drawer__header{min-height:66px;padding:12px 14px}
  body.weblatis-public-ui .drawer__body{padding:14px}

  .weblatis-public-ui [data-mobile-carousel]{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    width:100%;
    max-width:100%;
    margin-inline:0!important;
    padding:4px 4px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:inline mandatory;
    scroll-padding-inline:4px;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .weblatis-public-ui [data-mobile-carousel]::-webkit-scrollbar{display:none}
  .weblatis-public-ui [data-mobile-carousel]>*{
    flex:0 0 min(84vw,330px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .weblatis-public-ui .related-categories__grid>.related-category-card{min-block-size:220px!important}
  .weblatis-public-ui .intent-grid>.intent-card{flex-basis:min(88vw,340px)!important;min-height:92px}
  .weblatis-public-ui .local-pick-grid>.local-pick-card{flex-basis:min(84vw,320px)!important}
  .weblatis-public-ui .visit-city-grid>.visit-city-card{
    flex-basis:min(88vw,338px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:150px auto!important;
    min-block-size:0!important;
  }
  .weblatis-public-ui .visit-city-grid .visit-city-card__media{min-block-size:150px!important}
  .weblatis-public-ui .facts-grid-refined>.fact-card-refined{flex-basis:min(82vw,300px)!important}
  .weblatis-public-ui .top-search-list>.top-search-row{flex-basis:min(90vw,350px)!important;align-self:stretch}

  .weblatis-public-ui .wl-mobile-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-height:40px;
    margin-block-start:6px;
  }
  .weblatis-public-ui .wl-mobile-carousel-controls button{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--wl-border,var(--border));
    border-radius:12px;
    background:var(--wl-surface,var(--surface));
    color:var(--wl-primary,var(--brand-primary,#000099));
  }
  .weblatis-public-ui .wl-mobile-carousel-controls button[disabled]{opacity:.4;cursor:not-allowed}
  .weblatis-public-ui .wl-mobile-carousel-controls .icon{width:17px;height:17px}
  .weblatis-public-ui .wl-mobile-carousel-prev .icon{transform:rotate(180deg)}
  html[dir="rtl"] .weblatis-public-ui .wl-mobile-carousel-prev .icon{transform:none}
  html[dir="rtl"] .weblatis-public-ui .wl-mobile-carousel-next .icon{transform:rotate(180deg)}
  .weblatis-public-ui .wl-mobile-carousel-status{
    min-width:58px;
    color:var(--wl-muted,var(--text-3));
    font-size:12px;
    font-weight:750;
    text-align:center;
  }

  /* Fix narrow mobile card geometry seen in the supplied recording. */
  .weblatis-public-ui .local-pick-card__body{min-width:0}
  .weblatis-public-ui .local-pick-card__body>div:first-child{min-width:0}
  .weblatis-public-ui .local-pick-card h3,
  .weblatis-public-ui .top-search-row__text strong,
  .weblatis-public-ui .visit-city-card__body>strong{overflow-wrap:anywhere}
  .weblatis-public-ui .section-heading{gap:12px}
  .weblatis-public-ui .section-heading h2{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:380px){
  .weblatis-public-ui [data-mobile-carousel]>*{flex-basis:calc(100vw - 44px)!important}
  .weblatis-public-ui .top-search-row{grid-template-columns:42px minmax(0,1fr) 34px!important;gap:10px!important;padding:12px!important}
}

@media(prefers-reduced-motion:reduce){
  body.weblatis-public-ui .drawer{transition:none}
  .weblatis-public-ui [data-mobile-carousel]{scroll-behavior:auto!important}
}
