/* ==========================================================================
   Softbnb Design System — v1
   Editorial luxury-travel design language. Tokens + primitives + components.
   Scoped under .sb-page so it cannot leak into legacy templates.
   ========================================================================== */

/* Tokens live on .sb-page rather than :root on purpose.
   common/headerH.blade.php already defines --sb-bg, --sb-text, --sb-muted and
   --sb-border on :root, and its inline <style> loads after this file — so a
   :root block here would silently lose. Scoping to .sb-page both wins the
   cascade and guarantees these values never leak into another page. */
/* .sb-modal is listed because the locale dialogs render as siblings of the
   footer, outside .sb-page — without it every var(--sb-*) inside them
   resolves to nothing and the declarations are silently dropped. */
.sb-page,
.sb-foot,
.sb-modal,
.daterangepicker {
  /* ── Brand ─────────────────────────────────────────────────────────────
     --sb-primary is the existing Softbnb red, kept as the identity accent.
     --sb-primary-strong is the AA-safe variant (5.12:1 on white) used
     anywhere white text sits on a red fill, or red text sits on light. */
  --sb-primary:         #E63338;
  --sb-primary-strong:  #C8262B;
  --sb-primary-hover:   #A81E23;
  --sb-primary-soft:    #FDECEC;
  --sb-primary-ring:    rgba(230, 51, 56, 0.16);

  /* Brass — the quiet luxury secondary. Used sparingly: rules, small marks. */
  /* Was gold; now the brand red. 5.49:1 on page, 5.05:1 on sand,
     4.88:1 on the pale-red category band — AA on all three. */
  --sb-gold:            #C8262B;
  --sb-gold-soft:       #F4EADD;

  /* ── Neutrals — warm, not clinical grey ───────────────────────────────── */
  --sb-ink:             #14100E;
  /* Never inverts — the deep ground used by hero, band, host and footer. */
  --sb-deep:            #14100E;
  --sb-ink-soft:        #2A2320;
  --sb-bg:              #FFFDFB;
  --sb-surface:         #FFFFFF;
  --sb-surface-2:       #F7F3EE;
  --sb-surface-3:       #EFE8E0;
  --sb-border:          #E7DFD6;
  --sb-border-strong:   #D6CABB;
  --sb-text:            #1A1614;
  --sb-muted:           #6B615A;   /* 5.6:1 on --sb-bg */
  --sb-muted-2:         #786D64;   /* 4.96:1 / 4.56:1 — was 3.85:1 and failed AA */

  /* ── Status ───────────────────────────────────────────────────────────── */
  --sb-success:         #1E7A4D;
  --sb-warning:         #B4761A;
  --sb-error:           #C0392B;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --sb-font-display: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sb-font-body:    "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Supporting card lines only — Ubuntu has no instance below 300, and
     these read better very light. */
  --sb-font-meta:    "Poppins", "Ubuntu", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Scale ──────────────────────────────────────────────────────────────
     Base 17px, ratio ~1.125, every step rounded to a whole pixel so nothing
     lands on a half-pixel and blurs. Fixed steps below; the two head sizes
     are fluid because they carry the page at every width.

       micro   12px   legal, timestamps
       caption 13px   eyebrows, uppercase micro-labels
       small   15px   secondary UI, chips, buttons
       body    17px   default reading size
       lead    19px   ledes, supporting card rows
       h4      21px   small headings, ratings
       h3      24px   card titles
       h2      27px   prices, sub-section heads
       h1      fluid  section headings
       display fluid  hero
  */
  /* css/style.css sets html { font-size: 62.5% }, so 1rem = 10px on this
     site, not 16px. Every value below is therefore px/10 — 1.7rem IS 17px.
     Written in rem rather than px so the scale still respects a visitor who
     raises their browser's default text size. */
  --sb-t-micro:   1.2rem;      /* 12 */
  --sb-t-caption: 1.3rem;      /* 13 */
  --sb-t-small:   1.5rem;      /* 15 */
  --sb-t-body:    1.7rem;      /* 17 */
  --sb-t-lead:    1.9rem;      /* 19 */
  --sb-t-h4:      2.1rem;      /* 21 */
  --sb-t-h3:      2.4rem;      /* 24 */
  --sb-t-h2:      2.7rem;      /* 27 */
  --sb-t-h2-lg:   3rem;        /* 30 — the rung between h2 and h1 */
  --sb-t-h1:      clamp(3.2rem, 4.2vw, 5.2rem);   /* 32 -> 52 */
  --sb-t-display: clamp(4rem, 6vw, 7.6rem);       /* 40 -> 76 */

  /* ── Weights ────────────────────────────────────────────────────────────
     Ubuntu ships 300/400/500/700 and Poppins is loaded at 200 only, so these
     are the whole vocabulary. Nothing else is available — asking for a value
     not listed here gets synthesised, which is what made earlier passes look
     muddy. */
  --sb-w-quiet:   400;   /* Poppins regular — supporting prose */
  --sb-w-normal:  400;   /* Ubuntu  — body */
  --sb-w-medium:  500;   /* Ubuntu  — headings, labels, buttons */
  --sb-w-bold:    700;   /* Ubuntu  — titles, prices, emphasis */

  /* ── Leading ────────────────────────────────────────────────────────────
     Tighter as type gets larger: display text needs less room per line than
     a paragraph does. */
  --sb-lh-display: 1.05;
  --sb-lh-tight:   1.15;
  --sb-lh-snug:    1.25;
  --sb-lh-heading: 1.3;
  --sb-lh-body:    1.6;
  --sb-lh-quiet:   1.35;

  /* ── Tracking ───────────────────────────────────────────────────────────
     Negative as size grows, positive only for uppercase micro-labels. */
  --sb-ls-display: -0.02em;
  --sb-ls-heading: -0.012em;
  --sb-ls-tight:   -0.005em;
  --sb-ls-normal:  0;
  --sb-ls-caps:    0.12em;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --sb-1: 4px;   --sb-2: 8px;   --sb-3: 12px;  --sb-4: 16px;
  --sb-5: 24px;  --sb-6: 32px;  --sb-7: 48px;  --sb-8: 64px;
  --sb-9: 96px;  --sb-10: 128px;

  /* ── Radius — restrained. Pills only for icon buttons and chips. ──────── */
  --sb-r-sm: 8px;
  --sb-r-md: 14px;
  --sb-r-lg: 20px;
  --sb-r-xl: 28px;
  --sb-r-pill: 999px;

  /* ── Elevation — soft, warm-tinted, never harsh ───────────────────────── */
  --sb-shadow-1: 0 1px 2px rgba(20, 16, 14, 0.04), 0 2px 8px rgba(20, 16, 14, 0.04);
  --sb-shadow-2: 0 2px 6px rgba(20, 16, 14, 0.05), 0 12px 28px rgba(20, 16, 14, 0.08);
  --sb-shadow-3: 0 8px 20px rgba(20, 16, 14, 0.08), 0 28px 60px rgba(20, 16, 14, 0.12);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  /* Published curves, not hand-rolled. ease-out for anything entering or
     leaving; ease-in-out for something moving across the screen; plain `ease`
     for hover and colour. ease-in is never used on UI — it delays the exact
     moment the user is watching. */
  --sb-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sb-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sb-ease:        ease;

  --sb-dur-press:    120ms;   /* press feedback */
  --sb-dur-fast:     180ms;   /* hover, small state changes */
  --sb-dur:          240ms;   /* UI transitions stay under 300ms */
  --sb-dur-slow:     620ms;   /* image reveal */
  --sb-dur-entrance: 760ms;   /* hero only — marketing motion may run longer */

  --sb-maxw: 1240px;
}

/* ==========================================================================
   Dark mode
   The site switches theme automatically after dark (see headerH.blade.php),
   so this is not optional polish — it is the live experience half the time.
   Only tokens are redefined; every component follows.
   ========================================================================== */

body.dark-mode .sb-page,
body.dark-mode .sb-foot,
body.dark-mode .sb-modal,
body.dark-mode .daterangepicker {
  color-scheme: dark;
  --sb-ink:            #F5F0EB;   /* "strongest text" — inverts */
  --sb-ink-soft:       #D9D0C7;
  --sb-bg:             #0F0D0C;
  --sb-surface:        #1A1614;
  --sb-surface-2:      #221D1A;
  --sb-surface-3:      #2C2521;
  --sb-border:         #332B26;
  --sb-border-strong:  #4A3F37;
  --sb-text:           #F1EAE4;
  --sb-muted:          #A99E95;   /* 7.1:1 on --sb-bg */
  --sb-muted-2:        #8B8078;

  --sb-primary-soft:   rgba(230, 51, 56, 0.16);
  --sb-gold:           #FF8A8D;   /* red, lifted so it reads on a dark ground */
  --sb-gold-soft:      #2A2118;

  --sb-success:        #4ADE80;
  --sb-warning:        #FBBF24;
  --sb-error:          #F87171;

  --sb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sb-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  --sb-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55);
}

/* Chips on a dark ground need a lighter fill than the light-theme default. */
body.dark-mode .sb-chip--gold { background: var(--sb-gold-soft); color: #E8C489; border-color: #3D3327; }

/* ==========================================================================
   Base
   ========================================================================== */

.sb-page {
  /* Native controls (date pickers, scrollbars) follow the active theme. */
  color-scheme: light;
  background: var(--sb-bg);
  color: var(--sb-text);
  font-family: var(--sb-font-body);
  font-size: var(--sb-t-body);
  line-height: var(--sb-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.sb-page *,
.sb-page *::before,
.sb-page *::after { box-sizing: border-box; }

.sb-page img { max-width: 100%; }

.sb-shell {
  width: 100%;
  max-width: var(--sb-maxw);
  margin-inline: auto;
  padding-inline: var(--sb-5);
}
@media (max-width: 575.98px) { .sb-shell { padding-inline: var(--sb-4); } }

/* Screen-reader-only, still focusable */
.sb-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible focus, everywhere, always */
.sb-page :focus-visible {
  outline: 3px solid var(--sb-primary-strong);
  outline-offset: 3px;
  border-radius: var(--sb-r-sm);
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

/* ── Roles ────────────────────────────────────────────────────────────────
   Ubuntu carries structure and emphasis; Poppins ExtraLight carries the
   quiet supporting lines. That division is the whole system — if a piece of
   text is doing work, it is Ubuntu; if it is context, it is Poppins.
   ────────────────────────────────────────────────────────────────────── */

.sb-display {
  font-family: var(--sb-font-display);
  font-size: var(--sb-t-display);
  line-height: var(--sb-lh-display);
  font-weight: var(--sb-w-medium);
  letter-spacing: var(--sb-ls-display);
  margin: 0;
  text-wrap: balance;
}
.sb-h1 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-t-h1);
  line-height: var(--sb-lh-tight);
  font-weight: var(--sb-w-medium);
  letter-spacing: var(--sb-ls-display);
  margin: 0;
  text-wrap: balance;
}
.sb-h2 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-t-h2);
  line-height: var(--sb-lh-snug);
  font-weight: var(--sb-w-medium);
  letter-spacing: var(--sb-ls-heading);
  margin: 0;
  color: var(--sb-ink);
  text-wrap: balance;
}
.sb-h3 {
  font-family: var(--sb-font-body);
  font-size: var(--sb-t-h3);
  line-height: var(--sb-lh-heading);
  font-weight: var(--sb-w-bold);
  letter-spacing: var(--sb-ls-tight);
  margin: 0;
}
.sb-h4 {
  font-family: var(--sb-font-body);
  font-size: var(--sb-t-h4);
  line-height: var(--sb-lh-heading);
  font-weight: var(--sb-w-bold);
  letter-spacing: var(--sb-ls-tight);
  margin: 0;
}

.sb-body    { font-size: var(--sb-t-body);  line-height: var(--sb-lh-body); margin: 0; }
.sb-lede    { font-family: var(--sb-font-meta); font-weight: var(--sb-w-quiet);
              font-size: var(--sb-t-lead);  line-height: var(--sb-lh-quiet); color: var(--sb-muted); margin: 0; max-width: 54ch; }
.sb-small   { font-size: var(--sb-t-small); line-height: var(--sb-lh-quiet); }
.sb-caption { font-size: var(--sb-t-caption); line-height: 1.4; letter-spacing: 0.02em; color: var(--sb-muted); }
.sb-micro   { font-size: var(--sb-t-micro); line-height: 1.4; color: var(--sb-muted); }

/* Quiet: the Poppins half of the system. Context, never content. */
.sb-quiet {
  font-family: var(--sb-font-meta);
  font-weight: var(--sb-w-quiet);
  line-height: var(--sb-lh-quiet);
  color: var(--sb-muted);
}

/* Anywhere digits line up in a column — prices, ratings, counts. */
.sb-nums { font-variant-numeric: tabular-nums; }

/* Eyebrow — small caps label above a heading. The brass rule is the
   signature detail that recurs across every section. */
.sb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sb-3);
  font-size: var(--sb-t-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-gold);
  margin: 0 0 var(--sb-3);
}
.sb-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; opacity: 0.55; flex: none;
}
.sb-eyebrow--center::after {
  content: ""; width: 28px; height: 1px;
  background: currentColor; opacity: 0.55; flex: none;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.sb-section { padding-block: 20px; }              /* 96 -> 76 -> 56 -> 20 */
.sb-section--tight { padding-block: 10px; }       /* 64 -> 44 -> 24 -> 10 */
.sb-section--sand  { background: var(--sb-surface-2); }
@media (max-width: 767.98px) {
  .sb-section { padding-block: 16px; }            /* mobile */
  .sb-section--tight { padding-block: 8px; }      /* mobile */
}

.sb-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sb-5); margin-bottom: var(--sb-5);
}
.sb-section-head__text { max-width: 60ch; }
.sb-section-head__text .sb-lede { margin-top: var(--sb-3); }
@media (max-width: 767.98px) {
  .sb-section-head { flex-direction: column; align-items: flex-start; gap: var(--sb-4); margin-bottom: var(--sb-6); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.sb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sb-2);
  font-family: var(--sb-font-body);
  font-size: var(--sb-t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 15px var(--sb-6);
  border-radius: var(--sb-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;                       /* touch target */
  transition: background var(--sb-dur-fast) var(--sb-ease),
              color var(--sb-dur-fast) var(--sb-ease),
              border-color var(--sb-dur-fast) var(--sb-ease),
              transform var(--sb-dur-fast) var(--sb-ease),
              box-shadow var(--sb-dur-fast) var(--sb-ease);
}
.sb-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sb-btn:active { transform: translateY(0); }

.sb-btn--primary { background: var(--sb-primary-strong); color: #fff; box-shadow: var(--sb-shadow-1); }
.sb-btn--primary:hover { background: var(--sb-primary-hover); color: #fff; box-shadow: var(--sb-shadow-2); }

.sb-btn--ghost { background: transparent; color: var(--sb-ink); border-color: var(--sb-border-strong); }
.sb-btn--ghost:hover { background: var(--sb-surface-2); color: var(--sb-ink); border-color: var(--sb-ink); }

/* On dark imagery. Text is pinned to --sb-deep: --sb-ink inverts at night,
   which would put white text on this white fill. */
.sb-btn--light { background: rgba(255,255,255,0.96); color: var(--sb-deep); }
.sb-btn--light:hover { background: #fff; color: var(--sb-deep); }
.sb-btn--outline-light { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.55); backdrop-filter: blur(3px); }
.sb-btn--outline-light:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: #fff; }

.sb-btn--lg { padding: 17px var(--sb-7); font-size: var(--sb-t-body); min-height: 54px; }

/* Text link with an animated rule — used for "view all" affordances */
.sb-link {
  display: inline-flex; align-items: center; gap: var(--sb-2);
  font-size: var(--sb-t-small); font-weight: 500;
  color: var(--sb-ink); text-decoration: none;
  padding-bottom: 3px; position: relative; white-space: nowrap;
}
.sb-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: right; transform: scaleX(1);
  transition: transform var(--sb-dur) var(--sb-ease-out);
}
.sb-link:hover { color: var(--sb-primary-strong); text-decoration: none; }
.sb-link:hover::after { transform-origin: left; transform: scaleX(0.35); }

/* ==========================================================================
   Chips / badges
   ========================================================================== */

.sb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sb-t-caption); font-weight: 500; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: var(--sb-r-pill);
  background: var(--sb-surface-2); color: var(--sb-ink-soft);
  border: 1px solid var(--sb-border);
}
.sb-chip--onmedia {
  background: rgba(20,16,14,0.62); color: #fff; border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sb-chip--gold { background: var(--sb-gold-soft); color: #6E4B1E; border-color: #E3D2BB; }

/* ==========================================================================
   Media frame — the shared image treatment (reveal + slow zoom on hover)
   ========================================================================== */

.sb-media {
  position: relative; overflow: hidden;
  background: var(--sb-surface-3);
  border-radius: var(--sb-r-md);
}
.sb-media > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--sb-dur-slow) var(--sb-ease-out);
  will-change: transform;
}
.sb-media--reveal > img { opacity: 0; transition: opacity var(--sb-dur) var(--sb-ease), transform var(--sb-dur-slow) var(--sb-ease-out); }
.sb-media--reveal.is-loaded > img { opacity: 1; }

/* Legibility scrim for text-over-image */
.sb-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(12, 9, 8, 0.80) 0%,
    rgba(12, 9, 8, 0.45) 32%,
    rgba(12, 9, 8, 0.10) 62%,
    rgba(12, 9, 8, 0.02) 100%);
}
.sb-scrim--even {
  background: linear-gradient(to top, rgba(12,9,8,0.72), rgba(12,9,8,0.34) 55%, rgba(12,9,8,0.42));
}

/* ==========================================================================
   Scroll reveal — opt-in, and a no-op under reduced motion
   ========================================================================== */

.sb-reveal { opacity: 0; transform: translateY(18px); }
.sb-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--sb-dur-slow) var(--sb-ease-out),
              transform var(--sb-dur-slow) var(--sb-ease-out);
}

/* Blur-in variant — the 21st.dev filterVariants effect. Blur is composited,
   so it stays cheap, but it is heavy enough on low-end Android that it is
   dropped entirely under reduced motion (see the block below). */
.sb-reveal--blur { filter: blur(10px); }
.sb-reveal--blur.is-in {
  filter: blur(0px);
  transition: opacity var(--sb-dur-slow) var(--sb-ease-out),
              transform var(--sb-dur-slow) var(--sb-ease-out),
              filter var(--sb-dur-slow) var(--sb-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .sb-page *,
  .sb-page *::before,
  .sb-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sb-reveal { opacity: 1 !important; transform: none !important; }
  .sb-reveal--blur { filter: none !important; }
  .sb-media > img { transition: none !important; }
}