/* ═══════════════════════════════════════════════════════════════════════════
   "Everything for your stay" — the indoor/outdoor gateway INSIDE /your-stay/.

   Placement corrected 2026-09-04: this was briefly a full-width band on the
   homepage, above the tile catalogue. That inverted the guide — the homepage IS
   the menu, and pushing it below the fold made the site read as confused. The
   component now lives under the Your Stay banner, where it is a compact
   navigation layer for that section rather than a competing front door.

   Two treatments, one DOM:
     >= 860px  two balanced cards side by side, deliberately shorter than the
               homepage version and subordinate to the page's own <h1>;
     <  860px  a real tablist. Two 500px cards stacked on a phone is a wall, and
               the second door was arriving ~1000px down the page. Both choices
               stay permanently visible as tabs; one panel shows at a time.

   The tab semantics are applied by js/stay-gateway.js from a matchMedia query,
   never by CSS alone — a tab that is only a tab visually is not a tab.

   The illustrations are a progressive layer. Everything renders complete
   without them (.sg-art is absent until data/stay-gateway.json images.built is
   true), because the card text, not the picture, is the content.
   ═══════════════════════════════════════════════════════════════════════════ */

.stay-gateway{
  /* Contrast-checked against the ivory and navy grounds below.
     --sg-gold-ink is darker than --oro (#d4af37, 2.02:1 on ivory — decorative
     only) so gold-coloured TEXT still clears WCAG AA. */
  --sg-ivory:#fdfaf3;
  --sg-ivory-edge:#efe6d2;
  --sg-ink:#1a1a1a;
  --sg-ink-soft:#4a4a4a;
  --sg-gold:#d4af37;
  --sg-gold-ink:#7a5406;          /* 6.9:1 on --sg-ivory */
  --sg-navy:#16233f;
  --sg-navy-2:#0e1830;
  --sg-navy-edge:#2b3d63;
  --sg-on-navy:#f4f6fb;           /* 14.8:1 on --sg-navy */
  --sg-on-navy-soft:#c9d3e6;      /* 9.1:1 on --sg-navy */
  --sg-gold-on-navy:#e8c968;      /* 8.6:1 on --sg-navy */
  --sg-gap:16px;
  --sg-radius:14px;
  /* Narrower than .content (clamp(1080px,95vw,2000px)) on purpose: a navigation
     layer, not a full-bleed band. Narrower cards also mean a smaller 16:9
     illustration, which is how the height comes down without cropping an
     approved master. */
  max-width:820px;
  margin:16px auto 20px;
  padding:0 4px;
}

.sg-head{max-width:600px;margin:0 0 12px}
.sg-eyebrow{
  font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--sg-gold-ink);margin:0 0 6px;
  display:flex;align-items:center;gap:9px;
}
.sg-eyebrow::after{
  content:'';flex:1;height:1px;min-width:20px;
  background:linear-gradient(90deg,var(--sg-gold),transparent);
}
.sg-title{
  /* Smaller than on the homepage: the page's own "Your Stay" <h1> is the title
     of record here, and this must read as subordinate to it. */
  font-family:var(--fd);font-size:clamp(1.3rem,3.4vw,1.65rem);font-weight:600;
  line-height:1.15;color:var(--sg-ink);margin:0 0 5px;
}
.sg-intro{font-size:.9rem;line-height:1.5;color:var(--sg-ink-soft);margin:0;text-wrap:pretty}

/* ── the tablist (< 860px only) ────────────────────────────────────────────
   Both choices permanently visible; only the PANEL swaps. Never a carousel, a
   horizontal scroller or a gesture-only interaction — the two buttons are the
   whole control and they are always both on screen.

   Selection is not signalled by colour alone: the active tab also gains weight,
   a filled ground and a 3px underline bar. */
.sg-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;
}
.sg-tab{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:8px;min-height:52px;padding:10px 12px;cursor:pointer;
  border-radius:12px 12px 0 0;
  font-family:var(--fb);font-size:.9rem;font-weight:600;line-height:1.2;
  text-align:center;overflow-wrap:anywhere;
  border:1px solid var(--sg-ivory-edge);border-bottom:3px solid transparent;
  background:rgba(255,255,255,.55);color:var(--sg-ink-soft);
  transition:background .2s,color .2s,border-color .2s;
}
.sg-tab i{font-size:.95rem;flex:none}
.sg-tab[aria-selected="true"]{
  background:var(--sg-ivory);color:var(--sg-ink);
  border-color:var(--sg-ivory-edge);border-bottom-color:var(--sg-gold-ink);
}
/* The outdoor tab keeps the navy/gold identity even when it is not the active
   one, so it can never read as the quieter, optional half of the pair. */
.sg-tab--navy{
  background:linear-gradient(160deg,rgba(22,35,63,.86),rgba(14,24,48,.86));
  color:var(--sg-on-navy-soft);border-color:var(--sg-navy-edge);
}
.sg-tab--navy i{color:var(--sg-gold-on-navy)}
.sg-tab--navy[aria-selected="true"]{
  background:linear-gradient(160deg,var(--sg-navy),var(--sg-navy-2));
  color:var(--sg-on-navy);border-bottom-color:var(--sg-gold-on-navy);
}
.sg-tab--ivory i{color:var(--sg-gold-ink)}
@media(min-width:860px){
  /* Desktop shows both panels, so there is nothing to switch between. The
     element is also removed from the a11y tree by js/stay-gateway.js, which
     drops the tab roles at the same breakpoint. */
  .sg-tabs{display:none}
}

/* ── the pair ──────────────────────────────────────────────────────────────
   One column below 860px (where exactly one panel is shown at a time), two
   equal columns above it. */
.sg-cards{display:grid;grid-template-columns:1fr;gap:var(--sg-gap);align-items:stretch}
@media(min-width:860px){
  .sg-cards{grid-template-columns:1fr 1fr}
}

.sg-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--sg-radius);overflow:hidden;
  border:1px solid var(--sg-ivory-edge);
  background:var(--sg-ivory);
  /* Equal weight: both cards stretch to the tallest, so neither looks like a
     footnote to the other. */
  height:100%;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);
}
/* `.sg-card` sets display:flex, which BEATS the user-agent [hidden]{display:none}
   rule — so the inactive tabpanel stayed in the flow and the section was still
   1150px tall on a phone with only one panel "shown". Hiding a tabpanel with the
   hidden attribute is the whole mechanism here, so it has to actually hide. */
.sg-card[hidden]{display:none}
.sg-card--navy{
  background:linear-gradient(160deg,var(--sg-navy) 0%,var(--sg-navy-2) 100%);
  border-color:var(--sg-navy-edge);
}
/* The fine gold line that runs across both cards and ties the pair together. */
.sg-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--sg-gold),transparent);
  opacity:.85;
}
.sg-card:hover,.sg-card:focus-within{transform:translateY(-3px);box-shadow:0 10px 30px rgba(20,25,40,.13)}

/* ── illustration band ─────────────────────────────────────────────────────
   A fixed 16:9 aspect box at EVERY width, so the row never shifts while the
   picture loads and the shipped masters are shown whole. */
.sg-art-wrap{
  position:relative;overflow:hidden;flex:none;
  /* 16:9 on mobile too, matching the masters exactly — decided from the real
     derivatives, not from theory. A shallower 2:1 band was built and rendered
     side by side at 390px: it saves 23px of card height (493 vs 516) but crops
     11.1% off the bottom, which clipped the ATM screen and the phone map on the
     outdoor card. The masters were already cropped to 16:9 and approved at that
     ratio, so cropping them again here would be reinterpreting an approved
     asset for a 4.7% height saving. Both screenshots are kept as evidence. */
  aspect-ratio:16/9;
  background:linear-gradient(140deg,#f3ece0,#e7dcc7);
}
.sg-card--navy .sg-art-wrap{background:linear-gradient(140deg,#1d2c4d,#111c36)}
.sg-art{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--sg-focus,50% 50%)}
/* Box ratio == master ratio at every width, so `cover` crops nothing and these
   two declarations select nothing today. They are kept, not deleted, so that a
   future master shipped at a different ratio crops to a chosen band instead of
   to whatever the centre happens to be; data/stay-gateway.json records the
   band each scene would keep and marks the values inert at the shipped ratio. */
@media(min-width:860px){.sg-art{object-position:var(--sg-focus-wide,50% 50%)}}

/* No-image state — the required baseline, not a placeholder. A calm crest of
   the card's own colour with the card icon; it holds the same 16:9 box, so the
   layout is identical whether or not the illustrations ship. */
.sg-crest{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--sg-gold-ink);opacity:.42;
}
.sg-crest svg{width:clamp(46px,13%,84px);height:auto;fill:currentColor}
.sg-card--navy .sg-crest{color:var(--sg-gold-on-navy);opacity:.5}

.sg-body{display:flex;flex-direction:column;gap:10px;padding:14px 14px 15px;flex:1}
@media(min-width:520px){.sg-body{padding:15px 16px 16px}}
/* Under 860px the tab IS the card's title, so repeating it inside the panel is
   noise for everyone and a duplicate announcement for a screen reader. The
   panel is labelled by its tab, which js/stay-gateway.js wires with
   aria-labelledby. */
@media(max-width:859.98px){
  .sg-card-eyebrow,.sg-card-title{display:none}
  .sg-cards{gap:0}
  .sg-card{border-radius:0 0 var(--sg-radius) var(--sg-radius);margin-top:-1px}
}

.sg-card-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--sg-gold-ink);margin:0;
}
.sg-card--navy .sg-card-eyebrow{color:var(--sg-gold-on-navy)}
.sg-card-title{
  font-family:var(--fd);font-size:clamp(1.3rem,4vw,1.6rem);font-weight:600;line-height:1.15;
  color:var(--sg-ink);margin:0;
}
.sg-card--navy .sg-card-title{color:var(--sg-on-navy)}
.sg-card-desc{font-size:.9rem;line-height:1.5;color:var(--sg-ink-soft);margin:0;text-wrap:pretty}
.sg-card--navy .sg-card-desc{color:var(--sg-on-navy-soft)}

/* ── quick actions ─────────────────────────────────────────────────────────
   Independent links, never nested inside a card-wide <a>. Two columns so four
   actions read as one block at every width; each cell is its own tap target
   and is at least 44px tall. */
.sg-actions{
  list-style:none;margin:2px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.sg-action{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 11px;
  border-radius:10px;text-decoration:none;font-size:.85rem;font-weight:500;
  color:var(--sg-ink);background:rgba(255,255,255,.72);
  border:1px solid var(--sg-ivory-edge);
  transition:background .2s,border-color .2s,transform .2s;
}
.sg-action i{font-size:.95rem;color:var(--sg-gold-ink);flex:none;width:1.05em;text-align:center}
.sg-action span{min-width:0;overflow-wrap:anywhere}
.sg-action:hover{background:#fff;border-color:var(--sg-gold);transform:translateX(2px)}
.sg-card--navy .sg-action{
  color:var(--sg-on-navy);background:rgba(255,255,255,.07);border-color:rgba(232,201,104,.28);
}
.sg-card--navy .sg-action i{color:var(--sg-gold-on-navy)}
.sg-card--navy .sg-action:hover{background:rgba(255,255,255,.14);border-color:var(--sg-gold-on-navy)}

/* ── primary action ───────────────────────────────────────────────────────── */
.sg-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;min-height:46px;padding:11px 16px;border-radius:11px;
  font-family:var(--fb);font-size:.92rem;font-weight:600;text-decoration:none;
  background:#1f1f24;color:#fff;border:1px solid #1f1f24;
  transition:background .2s,border-color .2s,transform .2s;
}
.sg-cta:hover{background:#000;transform:translateY(-1px)}
.sg-card--navy .sg-cta{background:var(--sg-gold-on-navy);color:#11192c;border-color:var(--sg-gold-on-navy)}
.sg-card--navy .sg-cta:hover{background:#f0d68a;border-color:#f0d68a}
.sg-cta i{font-size:.85em}

/* ── LuxIA row, below the pair ────────────────────────────────────────────── */
.sg-luxia{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
  margin-top:12px;padding:11px 14px;border-radius:12px;
  background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.3);
}
.sg-luxia-text{flex:1 1 240px;min-width:0;font-size:.87rem;color:var(--sg-ink-soft);margin:0}
.sg-luxia-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;
  border-radius:10px;border:1px solid var(--sg-gold);background:#fff;cursor:pointer;
  font-family:var(--fb);font-size:.9rem;font-weight:600;color:var(--sg-gold-ink);
  transition:background .2s,transform .2s;
}
.sg-luxia-btn:hover{background:#fffaf0;transform:translateY(-1px)}

/* ── focus, always visible and never colour-only ──────────────────────────── */
.stay-gateway a:focus-visible,.stay-gateway button:focus-visible{
  outline:3px solid var(--sg-gold-ink);outline-offset:2px;border-radius:10px;
}
.sg-card--navy a:focus-visible{outline-color:var(--sg-gold-on-navy)}
/* Roving tabindex means only ONE tab is reachable by Tab, so its focus ring has
   to be unmistakable — and inset, because the tab sits flush against the panel. */
.sg-tab:focus-visible{outline:3px solid var(--sg-gold-ink);outline-offset:-4px}
.sg-tab--navy:focus-visible{outline-color:var(--sg-gold-on-navy)}

/* ── motion ───────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  /* Entrance only, and only where both cards actually arrive together. Running
     it on every tab switch would animate the panel each time a guest changes
     their mind, which reads as a page reload rather than a choice. */
  @media(min-width:860px){
    .sg-card{animation:sg-rise .45s cubic-bezier(.2,.7,.3,1) both}
    .sg-card:nth-child(2){animation-delay:.07s}
  }
  @keyframes sg-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  .sg-card,.sg-cta,.sg-action,.sg-luxia-btn,.sg-tab{animation:none!important;transition:none!important}
  .sg-card:hover,.sg-card:focus-within,.sg-cta:hover,.sg-action:hover,.sg-luxia-btn:hover{transform:none}
}

/* ── narrow phones ────────────────────────────────────────────────────────── */
@media(max-width:400px){
  .stay-gateway{padding:0;margin-top:16px}
  /* 8px is the floor: two adjacent 44px targets need a gap a thumb can miss. */
  .sg-actions{gap:8px}
  .sg-action{padding:8px 9px;font-size:.8rem}
  .sg-tab{font-size:.82rem;min-height:50px;padding:8px 8px}
}
/* 320px keeps TWO columns. The single-column override this replaces made the
   active mobile panel taller than it needed to be and pushed the CTA — and the
   Your Stay content below it — further down for no benefit: measured at 320px
   the four labels fit two columns with the 44px target height intact, wrapping
   naturally where they must. `minmax(0,1fr)` on the track and `overflow-wrap`
   on the label are what stop a long word forcing an overflow instead. */
@media(max-width:339px){
  .sg-action{padding:8px 8px;gap:6px;font-size:.78rem;line-height:1.2}
  .sg-action i{font-size:.85rem}
}