/*
 * Home page. Same system as the result pages (tokens.css, results.css): neutral paper, the production Walanja orange for
 * actions and prices, Plus Jakarta Sans, and the ticket (a hotel or a promo is a ticket with its stub). The home page
 * differs from the results in rhythm: banner, search ribbon, then sections that change shape (tiles, photo row, voucher,
 * news) so it does not read as one template repeated.
 */
.hm { background: var(--wj-paper); color: var(--wj-ink); font-family: var(--wj-font); font-size: 14px; line-height: 1.5; padding-bottom: 56px; }
.hm *:not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]) { font-family: var(--wj-font) !important; }
.hm p { padding: 0; }
.hm a:focus-visible, .hm button:focus-visible { outline: 3px solid var(--wj-focus); outline-offset: 2px; }

/* hero: the promo banner is the content, the search ribbon follows and sticks to the top of the viewport */
.hm-hero { padding-top: 16px; }
/* the banners are 1366 x 320 and often carry a white margin inside the picture: the strip is cropped to 1366 x 250 around the centre so the art reaches the top and the bottom edge, and it is as wide as the content below */
.hm-hero #header_placeholder { aspect-ratio: 1366 / 250; border-radius: 20px; background: var(--wj-line-soft); }
.hm-hero #carousel-slider .hm-slide { line-height: 0; }
.hm-hero #carousel-slider .img_header { display: block; width: 100%; height: auto; aspect-ratio: 1366 / 250; border-radius: 20px; object-fit: cover; object-position: center; }
.hm-hero .slick-list { border-radius: 20px; }
.hm-hero .slick-dots { position: absolute; right: 16px; bottom: 10px; left: auto; display: flex !important; gap: 6px; width: auto; margin: 0; padding: 0; }
.hm-hero .slick-dots li { width: auto; height: auto; margin: 0; }
.hm-hero .slick-dots li button { width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(37, 37, 37, .45); }
.hm-hero .slick-dots li button::before { display: none; }
.hm-hero .slick-dots li.slick-active button { background: var(--wj-orange, #F24C00); }
.hm-hero .slick-dots li button:focus-visible { outline: 3px solid var(--wj-focus); outline-offset: 2px; }
.hm .rs-ribbon--full { margin-top: 4px; }

.hm-body { padding-top: 32px; }
.hm-section { margin: 0 0 52px; }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hm-head h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--wj-ink); }
.hm-head p { margin: 2px 0 0; color: var(--wj-ink-2); font-size: 14px; }
.hm-all { flex: 0 0 auto; color: var(--wj-orange-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hm-all:hover { color: var(--wj-orange-hover-ink); }
.hm-empty { padding: 30px 20px; border: 1px dashed var(--wj-line-strong); border-radius: 18px; background: var(--wj-card); color: var(--wj-ink-2); text-align: center; }
.hm-empty p { margin: 0 auto; max-width: 46ch; }

/* the ticket as a tile: photo on top, the stub underneath (carousels) */
.rs-card--tile { display: flex; flex-direction: column; height: 100%; margin: 0; }
.rs-card--tile .rs-card-photo { margin: 0; min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; }
.rs-card--tile .rs-card-body { flex: 1 1 auto; padding: 14px 16px 12px; }
.rs-card--tile .rs-card-name { font-size: 17px; }
.rs-card--tile .rs-facilities { display: none; }
.rs-card--tile .rs-stub {
    grid-template-columns: 1fr auto; grid-template-areas: "note go" "price go" "per go"; align-items: center; padding: 12px 16px;
    border-left: 0; border-top: 2px dashed var(--wj-line-strong);
}
.rs-card--tile .rs-stub::before, .rs-card--tile .rs-stub::after { top: -15px; bottom: auto; }
.rs-card--tile .rs-stub::before { left: -15px; }
.rs-card--tile .rs-stub::after { left: auto; right: -15px; }
.rs-card--tile .rs-stub > :nth-child(1) { grid-area: note; }
.rs-card--tile .rs-stub > :nth-child(2) { grid-area: price; }
.rs-card--tile .rs-stub > :nth-child(3) { grid-area: per; }
.rs-card--tile .rs-stub > .rs-stub-go { grid-area: go; margin: 0; }
.rs-card--voucher .rs-stub > :nth-child(3) { grid-area: go; margin: 0; }
.rs-price--code { font-size: 17px; letter-spacing: 0; word-break: break-all; }
.hm-tiles .owl-stage-outer { padding: 2px; margin: -2px; }
.hm-tiles .owl-item > * { height: 100%; }
.hm-tiles .owl-nav button.owl-prev, .hm-tiles .owl-nav button.owl-next,
.hm-news .owl-nav button.owl-prev, .hm-news .owl-nav button.owl-next, .hm-why .owl-nav button.owl-prev, .hm-why .owl-nav button.owl-next {
    width: 40px !important; height: 40px !important; background: var(--wj-card) !important; color: var(--wj-ink) !important; border: 1px solid var(--wj-line-strong) !important; box-shadow: 0 2px 8px rgba(37, 37, 37, .15);
}
.hm-tiles .owl-nav button:hover, .hm-news .owl-nav button:hover, .hm-why .owl-nav button:hover { border-color: var(--wj-ink) !important; }
.hm-tiles .owl-nav button.disabled, .hm-news .owl-nav button.disabled, .hm-why .owl-nav button.disabled { opacity: .35; }

/* destinations: one row of photos, swipe on a phone */
.hm-destinations { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hm-place { position: relative; display: block; height: 280px; overflow: hidden; border-radius: 18px; background: var(--wj-line-soft); color: #fff; text-decoration: none; scroll-snap-align: start; }
.hm-place:hover { color: #fff; }
.hm-place img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the gradient is only there so the white name stays readable on any photo */
.hm-place::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(37, 37, 37, .8) 0, rgba(37, 37, 37, 0) 55%); }
.hm-place-text { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; gap: 2px; }
.hm-place-text strong { font-size: 18px; font-weight: 800; }
.hm-place-text span { font-size: 13px; }

/* news and the "why Walanja" cards */
.hm-news .card, .hm-why-card { border: 1px solid var(--wj-line) !important; border-radius: 18px !important; background: var(--wj-card); box-shadow: none !important; overflow: hidden; }
.hm-news .card-img-top, .hm-news iframe { border-radius: 0 !important; }
.hm-news .walanja-card-title { color: var(--wj-ink); font-size: 16px; font-weight: 800; }
.hm-news .walanja-card-subtitle, .hm-news .message-preview { color: var(--wj-ink-2); font-size: 14px; }
.hm-why-card { height: 100%; padding: 20px; }
.hm-why-card img { display: block; width: 100%; max-height: 160px; margin-bottom: 14px; object-fit: contain; }
.hm-why-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.hm-why-card p { margin: 0; color: var(--wj-ink-2); }

@media (max-width: 767.98px) {
    .hm-hero { padding-top: 10px; }
    .hm-hero #carousel-slider .img_header, .hm-hero .slick-list, .hm-hero #header_placeholder { border-radius: 14px; }
    .hm-hero .slick-dots { right: 10px; bottom: 6px; }
    .hm-hero .slick-dots li button { width: 8px; height: 8px; }
    /* a phone shows the whole card, so it does not stick: it would cover the screen */
    .hm-body { padding-top: 22px; }
    .hm-section { margin-bottom: 40px; }
    .hm-head h2 { font-size: 21px; }
    .hm-head { align-items: flex-start; flex-direction: column; gap: 4px; }
    .hm-destinations { grid-auto-columns: 62%; scrollbar-width: none; }
    .hm-destinations::-webkit-scrollbar { display: none; }
    .hm-place { height: 230px; }
}

/* phone: the full 1366 x 320 strip would be ~60px tall, too small to read. Crop to a taller frame around the centre, where the headline sits. */
@media (max-width: 767.98px) {
    .hm-hero #carousel-slider .img_header, .hm-hero #header_placeholder { aspect-ratio: 2.4 / 1; }
    .hm-hero #carousel-slider .hm-slide { overflow: hidden; border-radius: 14px; }
    .hm-hero #carousel-slider .img_header { object-position: 50% 50%; transform: scale(1.22); } /* the picture carries a white margin top and bottom; zooming in trims it */
}