/* ==========================================================================
   KINGSLAND — THE SUITE LAYER
   Dine In · Rooms · Banquets
   --------------------------------------------------------------------------
   Loaded only by those three pages, and only ever adding to style.css. Delete
   the one <link> and the pages fall back to the plain design intact.

   THE DESIGN THINKING, BRIEFLY

   Luxury on a screen is mostly restraint, not decoration. Four decisions do
   almost all the work here:

   1. SHARP FRAMES, NOT ROUNDED CARDS. Radius drops from 14px to 3px. Big
      rounded corners read as "app"; a crisp edge with a hairline reads as a
      framed photograph on a wall. This is the single biggest shift.

   2. A HAIRLINE THAT LIVES INSIDE THE PICTURE. A one-pixel gold rule inset
      from the edge, appearing on hover. It is the oldest trick in luxury
      print — the double frame — and costs nothing.

   3. SLOW MOTION. Nothing here moves in under half a second. Fast animation
      feels cheap and eager; a 1.2s image settle feels expensive.

   4. LIGHT, NOT FILTERS. The photographs get a gentle warm vignette that
      RECEDES on hover, so the picture appears to brighten as you approach
      it. No heavy grading — these are real rooms and they should look like
      the rooms guests will actually walk into.
   ========================================================================== */

.suite {
  --frame: 3px;
  --gold-hair: rgba(227, 197, 141, .42);
  --ease-lux: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   1. SECTION RHYTHM
   Luxury is largely whitespace. Everything gets more room to breathe.
   ========================================================================== */
.suite .section { padding: 68px 0; }

.suite .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: .64rem;
  letter-spacing: .3em;
}
/* a gold rule that runs out from the eyebrow, like a masthead */
.suite .eyebrow::after {
  content: "";
  width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.suite .eyebrow--light::after {
  background: linear-gradient(90deg, var(--gold-light), transparent);
}

.suite .section h2 {
  letter-spacing: -.018em;
  margin-bottom: .34em;
}
.suite .lede { max-width: 56ch; }

/* ==========================================================================
   2. THE FRAME
   Shared by every photograph on these pages.
   ========================================================================== */
.suite .shot,
.suite .photo-band figure,
.suite .space-card__media {
  position: relative;
  border-radius: var(--frame);
  overflow: hidden;
  background: #0d0906;
  cursor: zoom-in;
  isolation: isolate;
}

.suite .shot img,
.suite .photo-band figure img,
.suite .space-card__media img {
  transition: transform 1.2s var(--ease-lux), filter 1s var(--ease-lux);
  filter: saturate(1.04) contrast(1.04);
  will-change: transform;
}

/* the warm vignette — sits above the image, below the caption */
.suite .shot::after,
.suite .photo-band figure::after,
.suite .space-card__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 38%, transparent 44%, rgba(18, 11, 5, .40) 100%),
    linear-gradient(180deg, rgba(192, 154, 87, .12), transparent 42%);
  opacity: 1;
  transition: opacity .9s var(--ease-lux);
}

/* the inner hairline — the double frame, revealed on approach */
.suite .shot::before,
.suite .photo-band figure::before,
.suite .space-card__media::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--gold-hair);
  opacity: 0;
  transition: opacity .7s var(--ease-lux), inset .7s var(--ease-lux);
}

@media (hover: hover) {
  .suite .shot:hover img,
  .suite .photo-band figure:hover img,
  .suite .space-card:hover .space-card__media img {
    transform: scale(1.055);
    filter: saturate(1.13) contrast(1.02) brightness(1.04);
  }
  .suite .shot:hover::after,
  .suite .photo-band figure:hover::after,
  .suite .space-card:hover .space-card__media::after { opacity: .45; }

  .suite .shot:hover::before,
  .suite .photo-band figure:hover::before,
  .suite .space-card:hover .space-card__media::before { opacity: 1; inset: 12px; }
}

/* ---- the "open full screen" affordance ---- */
.suite .viewcue {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12, 8, 5, .5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 197, 141, .38);
  color: var(--gold-light);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .5s var(--ease-lux), transform .5s var(--ease-lux);
  pointer-events: none;
}
.suite .viewcue svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .suite .shot:hover .viewcue,
  .suite .photo-band figure:hover .viewcue,
  .suite .space-card:hover .viewcue { opacity: 1; transform: scale(1); }
}
/* touch devices get no hover, so keep it quietly visible */
@media (hover: none) {
  .suite .viewcue { opacity: .82; transform: scale(1); }
}

/* ==========================================================================
   3. THE FEATURED SHOT
   Larger, with gold corner brackets. Used once or twice per page — the
   detail loses its power if it is on everything.
   ========================================================================== */
.suite .shot {
  aspect-ratio: 4 / 3;
  box-shadow: 0 26px 60px rgba(14, 10, 6, .22);
}
.suite .shot figcaption {
  z-index: 2;
  padding: 58px 24px 22px;
  font-size: .85rem;
  letter-spacing: .01em;
}
.suite .shot figcaption strong {
  display: block;
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .005em;
  margin-bottom: 3px;
  color: var(--gold-light);
}

.suite .shot--feature { aspect-ratio: 3 / 2; }

/* A tall plate, for when the best available photograph is portrait. Standing
   a 3:4 image beside a block of text is an old magazine layout and reads
   richer than cropping the picture down to a letterbox to match its
   neighbours. Used on Rooms, where every clean landscape frame is spoken
   for. */
.suite .shot--tall { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .suite .shot--tall { aspect-ratio: 4 / 5; }
}

/* corner brackets, drawn with two elements' borders */
.suite .shot--feature .bracket {
  position: absolute;
  z-index: 4;
  width: 40px; height: 40px;
  pointer-events: none;
  border: 0 solid var(--gold-light);
  opacity: .72;
  transition: inset .8s var(--ease-lux), opacity .8s var(--ease-lux);
}
.suite .shot--feature .bracket--tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.suite .shot--feature .bracket--br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }
@media (hover: hover) {
  .suite .shot--feature:hover .bracket--tl { top: 22px; left: 22px; opacity: 1; }
  .suite .shot--feature:hover .bracket--br { bottom: 22px; right: 22px; opacity: 1; }
}

/* ==========================================================================
   4. THE PHOTO BAND
   A row of three, locked to 4:3 — which is the native shape of very nearly
   every photograph in media/kingsland. Choosing the frame to match the
   source means the crop takes only a sliver off the edges instead of
   beheading a room. Cropping to a fashionable shape and losing half the
   picture is the most common way a good photograph gets wasted.
   ========================================================================== */
.suite .photo-band { gap: 10px; margin-top: 34px; }
.suite .photo-band figure { aspect-ratio: 4 / 3; }
.suite .photo-band figcaption {
  z-index: 2;
  padding: 44px 15px 15px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
}

/* ==========================================================================
   5. SPACE CARDS
   ========================================================================== */
.suite .space-grid { gap: 16px; margin-top: 36px; }

.suite .space-card {
  border-radius: var(--frame);
  border-color: rgba(22, 25, 26, .1);
  background: var(--cream);
  box-shadow: 0 18px 44px rgba(14, 10, 6, .09);
  transition: transform .7s var(--ease-lux), box-shadow .7s var(--ease-lux);
  overflow: hidden;
}
@media (hover: hover) {
  .suite .space-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 64px rgba(14, 10, 6, .16);
  }
}

.suite .space-card__media { aspect-ratio: 3 / 2; }

.suite .space-card__body {
  padding: 22px 22px 24px;
  position: relative;
}
/* a gold rule that draws itself in on hover */
.suite .space-card__body::before {
  content: "";
  position: absolute;
  top: 0; left: 22px;
  width: 26px; height: 1px;
  background: var(--gold);
  transition: width .8s var(--ease-lux);
}
@media (hover: hover) {
  .suite .space-card:hover .space-card__body::before { width: calc(100% - 44px); }
}
.suite .space-card__body h3 {
  font-size: 1.5rem;
  letter-spacing: -.008em;
  margin-bottom: 7px;
}
.suite .space-card__body p { font-size: .875rem; line-height: 1.6; }

.suite .section--forest .space-card {
  background: rgba(255, 251, 243, .045);
  border-color: rgba(227, 197, 141, .18);
}

/* ==========================================================================
   6. NUMBERED CARDS  — large ghosted numerals
   ========================================================================== */
.suite .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--frame);
  transition: transform .6s var(--ease-lux), border-color .6s var(--ease-lux);
}
.suite .card__no {
  font-family: var(--display);
  font-size: 3.1rem;
  line-height: 1;
  color: var(--gold);
  opacity: .28;
  margin-bottom: 6px;
  transition: opacity .6s var(--ease-lux);
}
@media (hover: hover) {
  .suite .card:hover { transform: translateY(-3px); border-color: rgba(192, 154, 87, .45); }
  .suite .card:hover .card__no { opacity: .6; }
}

/* ==========================================================================
   7. TAGS, HOURS, SPLIT
   ========================================================================== */
.suite .tags span {
  border-color: rgba(192, 154, 87, .4);
  letter-spacing: .13em;
}
.suite .hours li { border-bottom-color: rgba(227, 197, 141, .16); }

@media (min-width: 900px) {
  /* an asymmetric editorial split reads richer than a 50/50 */
  .suite .split { grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
  .suite .section { padding: 92px 0; }
  .suite .shot figcaption { padding: 70px 30px 28px; }
  .suite .photo-band { gap: 14px; }
}

/* ==========================================================================
   8. THE FULL-SCREEN VIEWER
   Deliberately not a carousel. One photograph, filling the screen, and one
   obvious way out. No arrows to hunt for, no counter, nothing to learn.
   ========================================================================== */
.kv {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(8, 6, 4, .96);
  backdrop-filter: blur(14px);
}
.kv.open { display: block; animation: kvIn .3s var(--ease-lux, ease); }
@keyframes kvIn { from { opacity: 0; } }

.kv__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 62px 18px 84px;
}

/* SIZING — READ BEFORE CHANGING
   The obvious way to write this is `max-width:100%; max-height:100%` on the
   image. It does not work, and the failure is silent.

   `.kv__frame` shrink-wraps its content, so its height comes FROM the image.
   A percentage max-height on the image therefore resolves against a height
   that depends on the image itself. That is circular, so the browser throws
   the constraint away and paints the photograph at its natural pixel size —
   1500x2000 for a portrait room shot. It overflows the screen and you get an
   arbitrary crop that looks like a broken zoom.

   Measuring against the VIEWPORT instead breaks the circularity. The numbers
   subtracted are exactly the stage's own padding, so the photograph always
   lands inside it with the close button and caption clear of the edges.
   If you change .kv__stage padding, change these to match. */
.kv__img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 146px);
  max-height: calc(100svh - 146px);   /* svh accounts for mobile browser chrome */
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  animation: kvRise .45s var(--ease-lux, ease);
}
@keyframes kvRise { from { transform: scale(.975); opacity: 0; } }

/* the gold hairline follows the photograph into full screen */
.kv__frame {
  position: relative;
  line-height: 0;        /* kills the inline descender gap under the image */
}
.kv__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(227, 197, 141, .26);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-lux);
}
/* only draw the hairline once the photograph has actually arrived, otherwise
   it flashes as a small empty rectangle while the file downloads */
.kv.is-ready .kv__frame::after { opacity: 1; }

.kv__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(227, 197, 141, .4);
  background: rgba(255, 251, 243, .07);
  color: var(--gold-light);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .3s, transform .3s, border-color .3s;
}
.kv__close:hover {
  background: rgba(227, 197, 141, .18);
  border-color: var(--gold-light);
  transform: rotate(90deg);
}

.kv__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 22px 30px;
  text-align: center;
  color: var(--cream);
  font-size: .88rem;
  line-height: 1.5;
  background: linear-gradient(0deg, rgba(8, 6, 4, .9), transparent);
}
.kv__cap strong {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 2px;
}
.kv__hint {
  display: block;
  margin-top: 8px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 251, 243, .42);
}

@media (min-width: 900px) {
  .kv__stage { padding: 78px 60px 96px; }
  .kv__close { top: 26px; right: 26px; }
  /* must stay in step with the stage padding above */
  .kv__img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 174px);
    max-height: calc(100svh - 174px);
  }
}

body.kv-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .suite .shot img,
  .suite .photo-band figure img,
  .suite .space-card__media img,
  .suite .space-card,
  .suite .card,
  .kv.open,
  .kv__img { transition: none !important; animation: none !important; }
  .suite .shot:hover img,
  .suite .photo-band figure:hover img,
  .suite .space-card:hover .space-card__media img { transform: none; }
}