/* Top menu v2 (Just Sunshine): photo tiles in the Holiday menu, resort cards in the Hotels menu. Loaded after the main bundle. */

/* ---- Holiday menu: big photo tiles ---- */
.nav-mega--tiles { min-width: 720px; padding: 1rem !important; border-radius: 18px !important; }
.nav-mega--tiles .nav-mega__lead { padding: 10px 14px; margin-bottom: 4px; }
.nav-mega--tiles .nav-mega__head { margin: 14px 4px 8px; }
.nav-mega--tiles .nav-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; }
.nav-mega--tiles .nav-mega__dest {
    position: relative; display: flex; align-items: flex-end; height: 104px; padding: 0; overflow: hidden; border-radius: 14px;
    color: #fff; background: #1f2937; isolation: isolate;
}
.nav-mega--tiles .nav-mega__dest img {
    position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; z-index: -2;
    transition: transform .35s ease;
}
.nav-mega--tiles .nav-mega__dest::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 20, 35, 0) 35%, rgba(10, 20, 35, .72) 100%);
}
.nav-mega--tiles .nav-mega__dest span { position: relative; padding: 10px 14px; font-size: 1.02rem; font-weight: 800; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.nav-mega--tiles .nav-mega__dest:hover { background: #1f2937; color: #fff; }
.nav-mega--tiles .nav-mega__dest:hover img { transform: scale(1.07); }
.nav-mega--tiles .nav-mega__dest:hover span::after { content: " \2192"; }

/* ---- Hotels menu: one card per resort ---- */
.nav-hotels--cards { min-width: 860px; padding: 1.1rem 1.2rem .9rem !important; border-radius: 18px !important; }
.nav-hotels__intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 4px 14px; }
.nav-hotels__intro strong { display: block; font-size: 1.05rem; font-weight: 800; color: #1f2937; }
.nav-hotels__intro small { color: #6b7280; font-size: .82rem; }
.nav-hotels__cta {
    flex-shrink: 0; padding: 9px 16px; border-radius: 999px; background: var(--js-orange, #ef8a2c); color: #fff; font-weight: 700;
    font-size: .88rem; text-decoration: none; transition: background .12s ease, transform .12s ease;
}
.nav-hotels__cta:hover { background: var(--js-orange-dark, #d9731a); color: #fff; transform: translateY(-1px); }
.nav-hotels--cards .nav-hotels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nav-hotels__card { border: 1px solid #eef0f4; border-radius: 14px; padding: 0 0 8px; overflow: hidden; background: #fff; }
.nav-hotels__resort { position: relative; display: flex; align-items: flex-end; height: 68px; margin-bottom: 6px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.nav-hotels__resort img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .35s ease; }
.nav-hotels__resort::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 35, 0) 20%, rgba(10, 20, 35, .7) 100%); }
.nav-hotels__resort span { padding: 8px 14px; font-weight: 800; font-size: .98rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.nav-hotels__resort:hover img { transform: scale(1.07); }
.nav-hotels__card .dropdown-item { padding: .38rem 1rem; font-size: .9rem; border-radius: 0; }
.nav-hotels__card .dropdown-item:hover { background: color-mix(in srgb, var(--js-orange, #ef8a2c) 10%, #fff); color: var(--js-orange-dark, #d9731a); }
.nav-hotels__more-link { display: block; margin-top: 4px; padding: .3rem 1rem; font-size: .82rem; font-weight: 700; color: var(--js-orange-dark, #d9731a); text-decoration: none; }
.nav-hotels__more-link:hover { text-decoration: underline; }
.nav-hotels--cards .nav-hotels__all { margin-top: .8rem; }

@media (max-width: 991px) { .nav-mega--tiles, .nav-hotels--cards { min-width: 0; } }