/* ==========================================================================
   asar.cloud — the additions this page needs on top of asar.css
   Everything else (tokens, header, .btn, .card, .tag, .head, footer) is the
   site stylesheet already serving pms.theorionhotels.com. Nothing is
   redefined here; a second definition of .card is a second answer waiting to
   disagree with the first.
   ========================================================================== */

/* ---------- hero ------------------------------------------------------ */
.chero{background:var(--navy);color:#fff;padding:56px 0 60px;position:relative;overflow:hidden}
.chero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:70%;
  background:radial-gradient(closest-side,rgba(176,152,138,.22),transparent);pointer-events:none}
.chero h1{font-size:clamp(1.9rem,7vw,3.1rem);color:#fff;margin:14px 0 16px;max-width:19ch}
.chero h1 em{font-style:normal;color:var(--tan-lt)}
.chero .lede{color:#B9CCD3;font-size:clamp(1rem,2.6vw,1.15rem);max-width:56ch;margin-bottom:26px}
.chero .cta{position:relative;z-index:1}

/* the module strip drawn under the hero copy */
.strip{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:36px;position:relative;z-index:1}
.strip div{border:1px solid rgba(255,255,255,.17);border-radius:var(--r-sm);padding:11px 13px;
  background:rgba(255,255,255,.05)}
.strip b{display:block;font-size:.87rem;color:#fff;letter-spacing:-.01em}
.strip span{font-size:.72rem;color:#93AEB8}

/* ---------- the suite grid -------------------------------------------- */
.suite{display:grid;gap:16px;grid-template-columns:1fr}
.suite .card{display:flex;flex-direction:column}
.suite .card .foot-note{margin-top:auto;padding-top:12px;font-size:.79rem;color:var(--muted-2)}

/* ---------- one record, drawn ----------------------------------------- */
.spine{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
.spine .lane{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  background:rgba(255,255,255,.05);padding:16px 18px}
.spine .lane h4{font-size:.95rem;color:#fff;margin-bottom:6px}
.spine .lane p{color:#A9BEC6;font-size:.88rem}
.spine .lane .who{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tan-lt);font-weight:700;display:block;margin-bottom:8px}

/* ---------- the doors ------------------------------------------------- */
.doors{display:grid;gap:12px;grid-template-columns:1fr}
.door{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:#fff;
  display:flex;gap:14px;align-items:flex-start;transition:.18s}
.door:hover{border-color:var(--tan);box-shadow:var(--shadow-sm)}
.door code{font-size:.9rem;font-weight:700;color:var(--navy);font-family:inherit;
  letter-spacing:-.01em;display:block}
.door p{color:var(--muted);font-size:.87rem;margin-top:3px}
.door .k{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--tan-bg);
  color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:.72rem;
  letter-spacing:.04em}

/* ---------- the numbers ----------------------------------------------- */
.figs{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.figs div b{display:block;font-size:1.9rem;letter-spacing:-.03em;color:var(--navy)}
.figs div span{font-size:.82rem;color:var(--muted)}
.dark .figs div b{color:#fff}
.dark .figs div span{color:#A9BEC6}

@media (min-width:600px){
  .strip{grid-template-columns:repeat(3,1fr)}
  .suite{grid-template-columns:repeat(2,1fr)}
  .doors{grid-template-columns:repeat(2,1fr)}
  .figs{grid-template-columns:repeat(4,1fr)}
  .spine{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .chero{padding:76px 0 84px}
  .strip{grid-template-columns:repeat(5,1fr)}
  .suite{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   PRODUCT SCREENSHOTS
   --------------------------------------------------------------------------
   Every picture below this line is the running product, photographed by
   tools/site-shots against the demo hotel — never a mockup, never a redraw.
   That is why the frame is deliberately plain: a heavy laptop-on-a-desk
   rendering makes a real screenshot look like an illustration of one, which is
   the opposite of what these are here to do.

   THE SIZES ARE FIXED IN CSS, NOT LEFT TO THE IMAGE. Each figure reserves its
   box with aspect-ratio before the file arrives, so a page loading thirteen
   lazy images does not reflow under the reader thirteen times.
   ========================================================================== */
.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);position:relative}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:9px 13px;
  background:#F6F3F1;border-bottom:1px solid var(--line)}
.shot .chrome i{width:8px;height:8px;border-radius:50%;background:#DDD6D0;flex:0 0 8px}
.shot .chrome b{margin-left:7px;font-size:.67rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.shot img{display:block;width:100%;height:auto;background:#fff}
/* THE CROP, AND WHY IT IS A ZOOM AND NOT A FIT.
   A module card is about 310px wide. A 1440px screen scaled down to fit inside
   it is grey texture — the reader can see that it is dense and cannot read one
   word of it, which proves nothing and looks like a stock illustration. So the
   thumbnail is a magnified corner of the real screen instead: the header and
   the first rows, at a size a person can actually read. The whole screen is
   one click away in the lightbox.
   Top-left, because that is where a screen says which screen it is — except
   where the layout is centred, which .centre handles. */
.shot picture{display:block}
.shot.crop picture{aspect-ratio:16/10;overflow:hidden}
.shot.crop img{width:100%;height:100%;object-fit:cover;object-position:left top;
  transform:scale(1.7);transform-origin:left top}
.shot.crop.centre img{transform-origin:top center}
.shot.crop.tall picture{aspect-ratio:4/3}
.shot .note{display:block;padding:10px 13px;font-size:.76rem;color:var(--muted-2);
  border-top:1px solid var(--line-2);background:#fff;white-space:normal}

/* Zoom. The button is the figure itself so there is one hit target and it is
   the whole picture, which is what a reader tries to click anyway. */
button.shot{display:block;width:100%;padding:0;font:inherit;text-align:left;
  cursor:zoom-in;transition:.18s}
button.shot:hover{border-color:var(--tan);box-shadow:var(--shadow-sm)}

/* ---------- inside a module card -------------------------------------- */
/* width:auto, not the 100% that button.shot sets: an explicit 100% resolves
   against the card's CONTENT box, so the negative margins slid the picture
   left without ever widening it and it stopped 44px short of the right edge. */
.suite .card > .shot{width:auto;margin:-22px -22px 18px;border-width:0 0 1px;border-radius:0}
.suite .card{overflow:hidden}

/* ---------- the hero's own shot --------------------------------------- */
.chero .showcase{margin-top:38px;position:relative;z-index:1}
.chero .showcase .shot{border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.42);background:var(--navy-2)}
.chero .showcase .shot .chrome{background:#16404C;border-bottom-color:rgba(255,255,255,.12)}
.chero .showcase .shot .chrome i{background:rgba(255,255,255,.22)}
.chero .showcase .shot .chrome b{color:#9FBAC3}
.chero .showcase .shot img{aspect-ratio:16/9;object-fit:cover;object-position:left top}
.chero .showcase .cap{margin-top:12px;font-size:.79rem;color:#93AEB8}

/* ---------- a figure alongside the dark section ----------------------- */
.dark .shot{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.dark .shot .chrome{background:rgba(255,255,255,.07);border-bottom-color:rgba(255,255,255,.12)}
.dark .shot .chrome i{background:rgba(255,255,255,.22)}
.dark .shot .chrome b{color:#9FBAC3}
.dark .shot .note{background:transparent;color:#A9BEC6;
  border-top-color:rgba(255,255,255,.12)}
.dark button.shot:hover{border-color:var(--tan-lt)}
/* start, not centre: the folio is a tall portrait and the paragraph beside it
   is four lines, so centring floated the words in the middle of a column of
   nothing. Aligned to the top they read as a caption to the picture, which is
   what they are. */
.evidence{display:grid;gap:22px;grid-template-columns:1fr;align-items:start;margin-top:36px}
.evidence .said h4{font-size:1.05rem;color:#fff;margin-bottom:8px}
.evidence .said p{color:#A9BEC6;font-size:.92rem;margin-bottom:10px}

/* ---------- the filmstrip --------------------------------------------
   A row that scrolls sideways rather than a grid that wraps: these are the
   screens that did not earn a card, and a wrapping grid of them competes with
   the module grid above for the same attention. */
.strip-shots{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strip-shots > *{scroll-snap-align:start}
.strip-shots .shot img{aspect-ratio:16/10;object-fit:cover;object-position:left top}

/* ---------- the lightbox ---------------------------------------------- */
#lb{position:fixed;inset:0;z-index:200;background:rgba(8,24,29,.93);
  display:none;padding:24px;overflow:auto}
#lb.on{display:grid;place-items:center}
#lb img{max-width:min(1400px,100%);max-height:88vh;width:auto;border-radius:var(--r);
  box-shadow:0 30px 90px rgba(0,0,0,.6);background:#fff}
#lb .lbcap{color:#B9CCD3;font-size:.82rem;text-align:center;margin:14px auto 0;
  max-width:70ch}
#lbx{position:fixed;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer}
#lbx:hover{background:rgba(255,255,255,.16)}

@media (min-width:600px){
  .strip-shots{grid-auto-columns:46%}
}
@media (min-width:900px){
  .evidence{grid-template-columns:1.15fr .85fr;gap:38px}
  .strip-shots{grid-auto-columns:31.5%}
}

/* Somebody who has asked for less motion gets the page with no zoom transition
   and no smooth scroll; the pictures are still all there. */
@media (prefers-reduced-motion:reduce){
  button.shot{transition:none}
  .strip-shots{scroll-snap-type:none}
}