/* Snorkeling page (v2). Builds on home-v2.css, rooms-v2.css (split hero, photo viewer, help band), packages-v2.css
   (package card), getting-here-v2.css (FAQ) and scuba-v2.css (section heads, photo grid, next links). */

/* Hero title: a little smaller than the room pages so "at Pulau Aur." stays on one line. */
.room-hero--sn .room-hero__title { font-size: clamp(52px, 6.4vw, 116px); }

/* ---------- Two ways to snorkel ---------- */
.ways { padding: 16vh 0 8vh; }
.ways__note { margin-bottom: 8px; font-size: 15px; color: #2a3030; }
.ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 5vh, 48px); padding: 0 6px; }
.way__image { aspect-ratio: 16 / 10; }
.way__num { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-soft); }
.way__title { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.01em; }
.way__text { max-width: 30em; margin-top: 12px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: #2a3030; }

/* ---------- The package: card beside the full inclusion list ---------- */
.sn-package { padding: 8vh 0 6vh; }
.sn-package__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(24px, 4vw, 72px); margin-top: clamp(28px, 5vh, 48px); }
.sn-package__card { grid-template-columns: 1fr; margin: 0; }
.sn-package__details { padding: 0 6px; }
.sn-list__title { font-family: var(--caps); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #5d6363; }
.sn-list__title + .course__list { margin-top: 14px; }
.sn-package__details .course__list li { font-size: 15.5px; }
.sn-list__title:not(:first-child) { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(22, 27, 27, .12); }
.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sn-chips li { padding: 8px 14px; border: 1px solid rgba(22, 27, 27, .2); border-radius: 999px; font-size: 14px; }
.sn-package__note { margin-top: 28px; font-size: 14.5px; color: #5d6363; }
.sn-package__note .text-link { margin-left: 8px; }

@media (max-width: 1023px) {
    .sn-package__grid { grid-template-columns: 1fr; }
    .sn-package__card { max-width: 460px; }
}

@media (max-width: 767px) {
    .ways { padding-top: 10vh; }
    .ways__grid { grid-template-columns: 1fr; padding: 0; }
    .sn-package__details { padding: 0; }
}