.resort-choice-heading { width: 92%; margin: 38px auto 0; text-align: center; font: 600 clamp(23px,2.3vw,30px)/1.3 var(--heading); letter-spacing: -.035em; color: #253023; }
.resort-context { width: 92%; margin: 24px auto 0; text-align: center; font: 400 16px/1.5 var(--body); color: #606357; }
.resort-context strong { color: #353e2d; font-weight: 500; }
.resort-selector { width: 87.5%; max-width: 1200px; margin: 18px auto 0; display: flex; justify-content: center; gap: clamp(25px,5vw,90px); border-bottom: 1px solid #e7e7df; }
.resort-tab { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px 24px; background: transparent; border: 0; color: #606357; text-align: left; }
.resort-tab::after { content: ''; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; background: transparent; border-radius: 8px; }
.resort-tab.active { color: #20251f; }
.resort-tab.active::after { background: #252b23; }
.resort-tab-label strong { display: block; font: 600 clamp(19px,1.8vw,27px)/1.3 var(--body); white-space: nowrap; }
.resort-tab-label small { display: block; font: 400 15px/1.5 var(--body); margin-top: 3px; }
.resort-icon { width: 80px; height: 80px; flex-shrink: 0; position: relative; transition: transform .2s; }
.resort-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.resort-tab:hover .resort-icon { transform: translateY(-3px); }
.catalog-categories { display: flex; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 92%; margin: 16px auto 0; padding: 6px; border-radius: 40px; background: #f4f3ee; }
.catalog-categories>button { position: relative; background: transparent; border: 0; border-radius: 30px; padding: 12px 31px; font: 500 17px/1.3 var(--body); color: #5c6052; transition: background .15s,color .15s; }
.catalog-categories>button.active { background: #222a21; color: white; box-shadow: 0 3px 9px #18251b18; }
.catalog-categories>button:hover:not(.active) { color: #20281d; background: #e9e9e0; }
.catalog-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
.catalog-eyebrow { display: block; font: 500 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; color: #737865; }
.catalog-mosaic { margin-bottom: 0; }
.catalog-mosaic .facility-card-copy>small { display: block; font: 400 14px/1.4 var(--body); margin-top: 12px; color: #ffffffe3; }
.catalog-mosaic[data-count="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(5,140px); }
.catalog-mosaic[data-count="4"]>.facility-card:nth-child(1) { grid-area: 1 / 1 / span 3; }
.catalog-mosaic[data-count="4"]>.facility-card:nth-child(2) { grid-area: 1 / 2 / span 2; }
.catalog-mosaic[data-count="4"]>.facility-card:nth-child(3) { grid-area: 4 / 1 / span 2; }
.catalog-mosaic[data-count="4"]>.facility-card:nth-child(4) { grid-area: 3 / 2 / span 3; }
.catalog-mosaic[data-count="4"] .facility-card-copy>strong { font-size: clamp(30px,3.7vw,52px); }
.catalog-mosaic[data-count="3"] { grid-template-rows: 72px 440px 72px; }
.catalog-mosaic[data-count="3"]>.facility-card:nth-child(1) { grid-area: 1 / 1 / span 2; }
.catalog-mosaic[data-count="3"]>.facility-card:nth-child(2) { grid-area: 2 / 2 / span 2; }
.catalog-mosaic[data-count="3"]>.facility-card:nth-child(3) { grid-area: 1 / 3 / span 2; }
.catalog-mosaic[data-count="1"],.catalog-mosaic[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 520px; }
.catalog-mosaic[data-count="1"]>.facility-card,.catalog-mosaic[data-count="2"]>.facility-card { grid-area: auto; }
.catalog-amenities { width: 87.5%; max-width: 1440px; margin: 35px auto 0; padding: 30px; background: #f5efe6; border-radius: 22px; }
.catalog-amenities h3 { font: 500 23px/1.3 var(--body); margin-bottom: 18px; }
.catalog-amenities ul { display: flex; flex-wrap: wrap; list-style: none; gap: 10px; padding: 0; }
.catalog-amenities li { border: 1px solid #d9d9cc; padding: 8px 14px; border-radius: 30px; font-size: 14px; }
.facility-gallery-footer { min-width: 0; }
#facility-thumbnails { max-width: 58%; min-width: 0; overflow-x: auto; padding: 3px 0 7px; scrollbar-width: thin; scrollbar-color: #c3c7b7 transparent; }
#facility-thumbnails button { flex: 0 0 66px; }
.gallery-meta { max-width: 38%; text-align: right; }
#facility-gallery-action { display: inline-block; background: #253421; color: #fff; padding: 9px 15px; border-radius: 24px; font: 500 13px/1.3 var(--body); margin-top: 8px; }
#facility-gallery-action[hidden] { display: none; }
@media(max-width:1050px) {
 .resort-selector { gap: 10px; }
 .resort-tab { gap: 7px; padding-inline: 8px; }
 .resort-icon { width: 62px; height: 62px; }
 .resort-tab-label strong { font-size: 20px; }
 .catalog-mosaic[data-count="4"] { grid-template-rows: repeat(5,125px); }
 .catalog-mosaic[data-count="3"] { grid-template-rows: 50px 370px 50px; }
}
@media(max-width:760px) {
 .resort-choice-heading { margin-top: 28px; font-size: 23px; }
 .resort-context { max-width: 340px; margin-top: 19px; padding-inline: 6px; font-size: 14px; }
 .resort-selector { width: 92%; margin-top: 14px; gap: 0; }
 .resort-tab { flex: 1; min-width: 0; flex-direction: column; gap: 2px; padding: 5px 0 16px; text-align: center; }
 .resort-tab-label strong { font-size: clamp(12px,3.5vw,19px); }
 .resort-tab-label small { font-size: 12px; margin-top: 0; }
 .resort-icon { width: 59px; height: 59px; }
 .resort-tab::after { height: 2px; left: 5px; right: 5px; }
 .catalog-categories { margin-top: 13px; gap: 2px; padding: 4px; }
 .catalog-categories>button { font-size: 14px; padding: 11px 19px; }
 .catalog-eyebrow { font-size: 11px; margin-bottom: 10px; }
 .catalog-mosaic[data-count="4"] { grid-template-rows: repeat(5,95px); }
 .catalog-mosaic[data-count="4"] .facility-card-copy>strong { font-size: clamp(24px,6vw,35px); }
 .catalog-mosaic[data-count="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 90px 240px 90px 110px; }
 .catalog-mosaic[data-count="3"]>.facility-card:nth-child(1) { grid-area: 1 / 1 / span 2; }
 .catalog-mosaic[data-count="3"]>.facility-card:nth-child(2) { grid-area: 1 / 2 / span 3; }
 .catalog-mosaic[data-count="3"]>.facility-card:nth-child(3) { grid-area: 3 / 1 / span 2; }
 .catalog-mosaic[data-count="1"],.catalog-mosaic[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 410px; }
 .catalog-mosaic .facility-card-copy>small { font-size: 11px; margin-top: 9px; }
 .catalog-mosaic .facility-card-copy>span { font-size: 9px; line-height: 1.4; }
 .catalog-amenities { width: 92%; padding: 22px; }
 .facility-gallery-footer { padding: 10px 12px 13px; gap: 7px; }
 #facility-thumbnails { width: 100%; max-width: 100%; }
 #facility-thumbnails button { flex-basis: 56px; height: 42px; }
 .gallery-meta { width: 100%; max-width: 100%; text-align: center; }
 #facility-gallery-action { font-size: 12px; padding: 8px 13px; margin-top: 6px; }
}
@media(max-width:370px) { .catalog-categories>button { padding-inline: 15px; } .facility-photo-label { font-size: 9px; padding-inline: 6px; } }
@media(prefers-reduced-motion:reduce) { .resort-icon,.catalog-categories>button { transition: none; } }

/* The resort overview and cabins share the same portrait cards. */
.catalog-mosaic[data-view="homes"][data-count] { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: auto; align-items: start; }
.catalog-mosaic[data-view="homes"][data-count]>.facility-card { grid-area: auto; width: 100%; min-height: 0; aspect-ratio: 3 / 4; }
.catalog-mosaic[data-view="homes"] .facility-card-copy>strong { font-size: clamp(24px,2.6vw,36px); }
@media(max-width:1050px) {
 .catalog-mosaic[data-view="homes"][data-count] { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
 .catalog-mosaic[data-view="homes"][data-count]>.facility-card { aspect-ratio: 2 / 3; }
 .catalog-mosaic[data-view="homes"] .facility-card-copy { top: 17px; left: 14px; right: 20px; }
 .catalog-mosaic[data-view="homes"] .facility-card-copy>strong { font-size: clamp(18px,5vw,27px); line-height: 1.2; }
 .catalog-mosaic[data-view="homes"] .facility-card-copy>span { font-size: 8px; letter-spacing: .08em; margin-bottom: 9px; }
 .catalog-mosaic[data-view="homes"] .facility-card-arrow { top: auto; bottom: 48px; right: 13px; font-size: 25px; }
 .catalog-mosaic[data-view="homes"] .facility-photo-label { left: 10px; bottom: 13px; padding: 5px 7px; font-size: 9px; }
}