/* Siyela Suites — page-specific styles

   Uses the existing variables/components in site.css. */



html { scroll-behavior:smooth; }

.suites-page { background:var(--bg); }

.suites-main { overflow:hidden; }



.suites-hero {

  min-height: 680px;

  padding: 190px 0 70px;

  display: flex;

  align-items: flex-end;

  background: var(--bg);



  background-image:

    linear-gradient(

      rgba(0, 0, 0, 0.55),

      rgba(0, 0, 0, 0.55)

    ),

    url(./images/suites-top-cover.jpg);



  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

.suites-hero__inner {

  display:grid;

  grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr);

  gap:80px;

  align-items:end;

}

.suites-hero__title {

  font-size:clamp(58px,6.6vw,108px);

  margin:25px 0 30px;

  max-width:950px;

}

.suites-hero__copy > p {

  max-width:570px;

  color:var(--ink-2);

  font-size:15px;

}

.suites-hero__choices {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;

  padding-bottom:6px;

}

.view-choice {

  border: 1px solid var(--rule);

  padding: 23px 22px;

  min-height: 96px;

  transition: .25s ease;



  background: rgba(0, 0, 0, 0.5);

}

.view-choice small,.suite-card__meta,.beyond-card small,.collection-card small {

  display:block;

  color:var(--gold);

  font-size:9px;

  letter-spacing:.22em;

  text-transform:uppercase;

}

.view-choice span {

  display:block;

  font-family:var(--display);

  font-size:20px;

  margin-top:7px;

}

.view-choice:hover { border-color:var(--gold); background:rgba(165,128,75,.06); }



.suite-anchor-nav {

  position:sticky;

  top:0;

  z-index:90;

  background:rgba(38,35,24,.96);

  border-bottom:1px solid var(--rule);

  backdrop-filter:blur(14px);

}

.suite-anchor-nav__inner {

  min-height:58px;

  display:flex;

  align-items:center;

  gap:34px;

}

.suite-anchor-nav a,.suite-anchor-nav span {

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.22em;

  color:var(--ink-3);

  white-space:nowrap;

}

.suite-anchor-nav span { color:var(--ink); }

.suite-anchor-nav a:hover { color:var(--gold); }

.suite-anchor-nav__cta {

  margin-left:auto;

  padding:11px 18px;

  background:var(--gold);

  color:var(--bg)!important;

}



.suite-views { background:var(--bg-2); }

.section-intro {

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:80px;

  align-items:end;

  margin-bottom:50px;

}

.section-intro h2 { margin:15px 0 0; }

.section-intro > p {

  max-width:470px;

  color:var(--ink-2);

  font-size:14px;

  justify-self:end;

}



.suite-cards {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;

}

.suite-card {

  border:1px solid var(--rule);

  background:rgba(0,0,0,.08);

}

.suite-card__image {

  height:460px;

  background-color:var(--bg-3);

  background-size:cover;

  background-position:center;

  position:relative;

}

.suite-card__image:after,.beyond-card__image:after,.legacy-band__image:after {

  content:""; position:absolute; inset:0;

  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.38));

}

.suite-card__image span,.beyond-card__image span,.legacy-band__image span {

  position:absolute; left:18px; bottom:16px; z-index:2;

  font-size:8px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-2);

}

.suite-card__body { padding:20px 24px 24px; }

.suite-card__meta { display:flex; justify-content:space-between; gap:15px; }

.suite-card__bottom {

  display:grid;

  grid-template-columns:1fr auto;

  gap:30px;

  align-items:end;

  margin-top:15px;

}

.suite-card h3 { font-size:31px; margin:0 0 5px; }

.suite-card p { margin:0; color:var(--ink-3); font-size:12px; max-width:430px; }

.suite-price { text-align:right; }

.suite-price small { display:block; color:var(--ink-3); font-size:8px; text-transform:uppercase; letter-spacing:.16em; }

.suite-price strong { display:block; color:var(--gold); font-family:var(--display); font-style:italic; font-size:27px; font-weight:400; }



.waterside-detail {

  display:grid;

  grid-template-columns:1.3fr .8fr auto;

  gap:70px;

  align-items:center;

  padding:70px 0 10px;

}

.waterside-detail h3 { font-size:26px; line-height:1.25; margin:16px 0 0; max-width:620px; }

.waterside-detail ul { margin:0; padding:0; list-style:none; color:var(--ink-2); font-size:12px; }

.waterside-detail li { margin:8px 0; }

.waterside-detail li:before { content:"✦"; color:var(--gold); margin-right:12px; font-size:8px; }



.suite-standard { background:#211f16; }

.standard-grid {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:0 34px;

}

.standard-item {

  border-top:1px solid var(--rule);

  padding:18px 0 32px;

  min-height:150px;

}

.standard-item small { color:var(--gold); font-size:9px; letter-spacing:.18em; }

.standard-item h3 { font-family:var(--display); font-size:21px; font-weight:400; margin:8px 0; }

.standard-item p { color:var(--ink-3); font-size:11px; line-height:1.55; margin:0; }



.rates { background:#2d2b1c; }

.rates-wrap { max-width:1240px; }

.rates-heading {

  display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:38px;

}

.rates-heading h2 { margin:15px 0 0; }

.year-tabs { display:flex; border:1px solid var(--rule); }

.year-tabs span { padding:10px 17px; font-size:9px; letter-spacing:.15em; }

.year-tabs span:first-child { background:var(--gold); color:var(--bg); }

.rates-table { border-top:1px solid var(--rule); }

.rates-row {

  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px;

  padding:25px 0; border-bottom:1px solid var(--rule);

  align-items:center;

}

.rates-row--head { padding:13px 0; color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; font-size:8px; }

.rates-row strong { font-family:var(--display); font-size:23px; font-weight:400; display:block; }

.rates-row small { display:block; color:var(--ink-3); font-size:9px; }

.rate-price { font-family:var(--display); font-style:italic; color:var(--gold); font-size:27px; }

.rate-price small { font-family:var(--sans); font-style:normal; text-align:left; }

.rates-foot { display:flex; justify-content:space-between; gap:40px; align-items:center; padding-top:30px; }

.rates-foot p { color:var(--ink-3); max-width:650px; font-size:11px; }

.rates-foot > div { display:flex; gap:10px; }



.beyond { background:var(--bg-2); }

.beyond-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.beyond-card { border:1px solid var(--rule); background:rgba(0,0,0,.08); transition:transform .3s ease,border-color .3s ease; }

.beyond-card:hover { transform:translateY(-5px); border-color:rgba(165,128,75,.6); }

.beyond-card__image {

  height:320px; position:relative; background-color:var(--bg-3); background-size:cover; background-position:center;

}

.beyond-card__body { padding:20px; min-height:190px; display:flex; flex-direction:column; }

.beyond-card h3 { font-family:var(--display); font-weight:400; font-size:22px; margin:8px 0; }

.beyond-card p { color:var(--ink-3); font-size:11px; line-height:1.55; margin:0 0 20px; }

.beyond-card b { margin-top:auto; color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:8px; font-weight:500; }



.legacy-band { background:#272519; }

.legacy-band__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.legacy-band__image {

  height:370px; background-color:var(--bg-3); background-size:cover; background-position:center; position:relative;

}

.legacy-band__copy h2 { margin:14px 0 16px; }

.legacy-band__copy p { color:var(--ink-3); max-width:530px; }

.legacy-links { display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; }

.legacy-links a { color:var(--gold); font-size:8px; text-transform:uppercase; letter-spacing:.18em; }



.collection { background:#242216; }

.collection-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; gap:30px; }

.collection-heading h2 { margin:12px 0 0; }

.collection-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }

.collection-card > div { height:250px; background:var(--bg-3) center/cover no-repeat; margin-bottom:14px; }

.collection-card strong { display:block; font-family:var(--display); font-size:17px; font-weight:400; margin-top:4px; }



.suite-final-cta { background:#17160f; padding:75px 0; border-top:1px solid var(--rule); }

.suite-final-cta__inner { display:flex; justify-content:space-between; align-items:center; gap:50px; }

.suite-final-cta h2 { margin:0; }

.suite-final-cta__actions { min-width:300px; display:flex; flex-direction:column; gap:12px; text-align:center; }

.suite-final-cta__actions > a:not(.btn) { color:var(--ink-3); font-size:11px; }



@media(max-width:1100px){

  .suites-hero__inner { grid-template-columns:1fr; }

  .suites-hero__choices { max-width:700px; }

  .waterside-detail { grid-template-columns:1fr 1fr; }

  .waterside-detail .btn { grid-column:1/-1; justify-self:start; }

  .standard-grid { grid-template-columns:repeat(2,1fr); }

  .beyond-grid { grid-template-columns:repeat(2,1fr); }

  .collection-grid { grid-template-columns:repeat(3,1fr); }

}

@media(max-width:760px){

  .suites-hero { min-height:auto; padding:135px 0 55px; }

  .suites-hero__inner { gap:42px; }

  .suites-hero__title { font-size:clamp(46px,14vw,68px); margin:18px 0 24px; }

  .suites-hero__choices { grid-template-columns:1fr; }

  .suite-anchor-nav { overflow-x:auto; }

  .suite-anchor-nav__inner { width:max-content; padding-right:22px!important; gap:24px; }

  .section-intro { grid-template-columns:1fr; gap:20px; margin-bottom:34px; }

  .section-intro > p { justify-self:start; }

  .suite-cards { grid-template-columns:1fr; }

  .suite-card__image { height:62vw; min-height:270px; max-height:420px; }

  .suite-card__bottom { grid-template-columns:1fr; }

  .suite-price { text-align:left; }

  .waterside-detail { grid-template-columns:1fr; gap:30px; padding-top:50px; }

  .waterside-detail .btn { grid-column:auto; }

  .standard-grid { grid-template-columns:1fr; }

  .rates-heading,.rates-foot,.collection-heading,.suite-final-cta__inner { flex-direction:column; align-items:flex-start; }

  .rates-row { grid-template-columns:1fr 1fr; }

  .rates-row--head span:first-child { grid-column:1/-1; }

  .rates-row > div:first-child { grid-column:1/-1; }

  .rate-price small { text-align:left; }

  .rates-foot > div { flex-wrap:wrap; }

  .beyond-grid { grid-template-columns:1fr; }

  .beyond-card__image { height:65vw; min-height:280px; }

  .legacy-band__grid { grid-template-columns:1fr; gap:35px; }

  .legacy-band__image { height:65vw; min-height:280px; }

  .collection-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; }

  .collection-card { flex:0 0 75%; scroll-snap-align:start; }

  .collection-card > div { height:280px; }

  .suite-final-cta__actions { min-width:0; width:100%; text-align:left; }

}