:root{--clay:#A77F68}
.suites{background:#F9F7F2;padding:120px 0}
.suites .container{max-width:1280px}

/* section head (Figma specs) */
.suites__head{text-align:center;margin:0 auto 30px;}
.suites__eyebrow{margin:0 0 24px;font:300 14px/14.4px "Jost",sans-serif;letter-spacing:2.88px;text-transform:uppercase;color:var(--clay)}
.suites__heading{margin:0 0 24px;font:300 82px/100% "Cormorant Garamond",serif;letter-spacing:.16px;text-transform:capitalize;color:#1c1c1c}
.suites__text{margin:0 auto;font:300 18px/28px "Jost",sans-serif;letter-spacing:.16px;color:#6b6b6b}

/* grid */
.suites__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 20px}
.suite{display:grid;min-width:0}
.suite:has([data-suite-gallery]){cursor:pointer}
.suite--full{grid-column:1 / -1;grid-template-columns:1fr 1.3fr 1fr;column-gap:32px;border-bottom:1px solid rgba(28,28,28,.15);padding-bottom:24px}
.suite--full .suite__media{grid-column:1 / -1}
.suite--half{grid-template-columns:1fr}

.suite__media{overflow:hidden;background:#e6e0d3;margin-bottom:28px}
.suite__media img,.suite__media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .9s ease}
.suite--half .suite__media{aspect-ratio:448/285}
.suite--full .suite__media{aspect-ratio:910/342}
.suite:hover .suite__media img,.suite:hover .suite__media video{transform:scale(1.04)}

/* card photo is a button when the suite has a gallery: click -> lightbox slider (assets/js/suite-gallery.js) */
.suite__media--btn{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#e6e0d3;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.suite__media--btn:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.suite__media--btn::after{content:"";position:absolute;inset:0;background:rgba(24,16,10,0);transition:background .35s ease;pointer-events:none}
.suite:hover .suite__media--btn::after,.suite__media--btn:focus-visible::after{background:rgba(24,16,10,.14)}
.suite__count{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:rgba(249,247,242,.85);color:#1c1c1c;font:400 10.5px/1 "Jost",sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.suite__count svg{flex:none}
.suite:hover .suite__count,.suite__media--btn:focus-visible .suite__count{opacity:1;transform:none}
@media (hover:none){.suite__count{opacity:1;transform:none}.suite:hover .suite__media--btn::after{background:none}}

.suite__eyebrow{margin:0 0 14px;font:300 14px/14px "Jost",sans-serif;letter-spacing:2.23px;text-transform:uppercase;color:var(--clay)}
.suite__title{margin:0;font:300 36px/1.15 "Cormorant Garamond",serif;letter-spacing:.16px;color:#1c1c1c}
.suite__desc{margin:14px 0 0;font:300 17px/1.6 "Jost",sans-serif;letter-spacing:.16px;color:#7a7a7a;max-width:560px}
.suite--full .suite__desc{margin:0;}

.suite__foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.suite--half .suite__foot{margin-top:24px;padding:14px 0;border-top:1px solid rgba(28,28,28,.15);border-bottom:1px solid rgba(28,28,28,.15)}
.suite--full .suite__foot{flex-direction:column;align-items:flex-end;justify-content:space-between;padding-top:6px}
.suite__features{margin:0;font:300 10px/1.4 "Jost",sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#8a8a8a}
.suite--full .suite__features{text-align:right}

.suite__explore{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;font:400 11px/1 "Jost",sans-serif;letter-spacing:2px;text-transform:uppercase;color:#1c1c1c;white-space:nowrap;transition:opacity .2s}
.suite__explore:hover{opacity:.55}







/* responsive */
@media (max-width:1279px){.suites__heading{font-size:64px}.suite--full{grid-template-columns:1fr 1.2fr 1fr}}
@media (max-width:1023px){
  .suites{padding:88px 0}
  .suites__head{margin-bottom:56px}
  .suites__heading{font-size:52px}
  .suites__grid{grid-template-columns:1fr;gap:48px}
  .suite--full{grid-template-columns:1fr;row-gap:0}
  .suite--full .suite__desc{padding-top:14px}
  .suite--full .suite__foot{flex-direction:row;align-items:center;margin-top:24px;padding:14px 0;border-top:1px solid rgba(28,28,28,.15)}
  .suite--full .suite__features{text-align:left}
  .suite--full{border-bottom:0}
  .suite--full .suite__foot{border-bottom:1px solid rgba(28,28,28,.15)}
}
@media (max-width:767px){
  .suites{padding:64px 0}
  .suites__heading{font-size:40px}
  .suites__text{font-size:16px;line-height:26px}
  .suite__title{font-size:30px}
  .suite__foot{flex-direction:column !important;align-items:flex-start !important;gap:12px}
}
/* ---------- slider of half cards (post type "Suites") ---------- */
.suites__slider{position:relative}
.suites__track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;outline:none}
.suites__track::-webkit-scrollbar{display:none}
.suites__track .suite--half{flex:0 0 calc((100% - 20px) / 2);scroll-snap-align:start}
.suites__track:focus-visible{outline:1px solid rgba(28,28,28,.35);outline-offset:6px}

.suites__nav{display:flex;justify-content:flex-end;gap:10px;margin-bottom:28px}
.suites__nav[hidden]{display:none}
.suites__btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(28,28,28,.25);border-radius:50%;background:transparent;color:#1c1c1c;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.suites__btn:hover:not(:disabled){background:#1c1c1c;border-color:#1c1c1c;color:#F9F7F2}
.suites__btn:disabled{opacity:.3;cursor:default}

/* full-width cards sit below the slider */
.suites__slider + .suites__grid{margin-top:64px}

@media (max-width:1023px){
  .suites__track .suite--half{flex-basis:100%}
  .suites__slider + .suites__grid{margin-top:48px}
}
@media (max-width:767px){
  .suites__track{gap:14px}
  .suites__track .suite--half{flex-basis:88%}
}

/* ---------- suite photo lightbox (click the card / photo) ---------- */
body.slb-open{overflow:hidden}
.slb{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s ease}
.slb[hidden]{display:none}
.slb.is-open{opacity:1}
.slb__backdrop{position:absolute;inset:0;background:rgba(24,16,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.slb__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:1100px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  border-radius:10px;background:#1A1410;box-shadow:0 30px 80px rgba(0,0,0,.45);outline:0;overflow:hidden;
  transform:translateY(16px);transition:transform .35s ease}
.slb.is-open .slb__dialog{transform:none}

.slb__top{display:flex;align-items:center;gap:16px;flex:none;padding:16px 20px 14px 24px;background:#F8F4EB}
.slb__caption{margin:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.slb__eyebrow{font:300 11px/1 "Jost",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.slb__eyebrow[hidden]{display:none}
.slb__title{font:400 22px/1.2 "Cormorant Garamond",serif;letter-spacing:.16px;color:#241C16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slb__counter{margin:0;flex:none;font:300 12px/1 "Jost",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6D6359}
.slb__close{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(36,28,22,.08);color:#1c1c1c;cursor:pointer;transition:background .2s,transform .2s}
.slb__close:hover{background:#fff;transform:rotate(90deg)}

.slb__stage{position:relative;flex:1 1 auto;min-height:0;background:#1A1410}
.slb__track{display:flex;height:min(62vh, 720px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.slb__track::-webkit-scrollbar{display:none}
.slb__slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.slb__slide img{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

.slb__arrow{position:absolute;top:50%;z-index:2;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(248,244,235,.35);border-radius:50%;
  background:rgba(26,20,16,.45);color:#F8F4EB;cursor:pointer;transform:translateY(-50%);transition:background .2s,border-color .2s,opacity .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.slb__arrow:hover{background:rgba(248,244,235,.95);color:#241C16;border-color:transparent}
.slb__arrow[hidden]{display:none}
.slb__arrow--prev{left:16px}
.slb__arrow--next{right:16px}

.slb__thumbs{flex:none;display:flex;gap:8px;padding:14px 20px 18px;overflow-x:auto;scrollbar-width:none;background:#1A1410}
.slb__thumbs::-webkit-scrollbar{display:none}
.slb__thumbs[hidden]{display:none}
.slb__thumb{flex:none;width:64px;height:44px;padding:0;border:1px solid transparent;border-radius:4px;overflow:hidden;background:#2a221c;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.slb__thumb img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.slb__thumb.is-active,.slb__thumb:hover{opacity:1;border-color:var(--clay)}
.slb__thumb:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

@media (max-width:767px){
  .slb{padding:0;align-items:flex-end}
  .slb__dialog{max-width:none;max-height:96vh;max-height:96dvh;border-radius:14px 14px 0 0}
  .slb__top{padding:14px 14px 12px 18px}
  .slb__title{font-size:20px}
  .slb__track{height:min(58vh, 520px)}
  .slb__arrow{width:40px;height:40px}
  .slb__arrow--prev{left:10px}
  .slb__arrow--next{right:10px}
  .slb__thumbs{padding:12px 14px 20px}
  .slb__thumb{width:56px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .slb,.slb__dialog,.slb__close{transition:none}
}