/* bookbask design system v1
   Authority: docs/bookbask/bookbask-design-documentation-v1.pdf

   Every color has one job. A color doing a second job is a bug — which is why
   these are named for the job, not the hue. Reach for --bb-trust when you mean
   trust; if you want "the green one", you are about to introduce the bug.

   Separation is done by hairlines, not shadow stacks. There is exactly one
   shadow in this file and it is for hover and the two floating cards. */

:root {
  /* Surfaces */
  --bb-page:        #FBF7F0;  /* the only page background. never pure white */
  --bb-surface:     #FFFDF9;  /* cards and panels only, always with a hairline */

  /* Ink */
  --bb-ink:         #1C1A17;  /* primary text */
  --bb-ink-soft:    #8A857C;  /* metadata, distances, review counts, sublines */

  /* Jobs */
  --bb-primary:     #123A63;  /* buttons, selected states, links, wordmark */
  --bb-trust:       #0F6E56;  /* ratings, verified, live availability. never decoration */
  --bb-urgency:     #9A4A1C;  /* scarcity and heat. never red */

  /* Structure */
  --bb-hairline:    #E3DDD2;  /* every 1px border and divider */
  --bb-tint-blue:   #DCE8F2;  /* time chips, tag pills, info panels */
  --bb-tint-jade:   #E1F5EE;  /* verified pills, positive insets */

  /* On-navy variants */
  --bb-on-navy-trust:   #34C79A;
  --bb-on-navy-urgency: #E8A87C;
  --bb-on-navy-ink:     #FBF7F0;

  /* Radii */
  --bb-r-chip:      8px;
  --bb-r-card:      14px;
  --bb-r-feature:   16px;
  --bb-r-pill:      999px;

  /* The only shadow in the system. Hover, and the two floating cards. */
  --bb-shadow-hover: 0 4px 16px rgba(28, 26, 23, 0.08);

  /* Layout */
  --bb-column:       1140px;
  --bb-booking-card: 380px;
  --bb-row-photo:    264px;

  /* Type. Inter covers neither Lao nor Thai, so the script fallbacks are part
     of the stack rather than an override. Documented deviation from the doc's
     "one UI family". */
  --bb-font: Inter, "Noto Sans Lao", "Noto Sans Thai", system-ui, sans-serif;
  --bb-font-logo: Poppins, Inter, sans-serif;
}

html { background: var(--bb-page); }

body {
  margin: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  font-family: var(--bb-font);
  -webkit-font-smoothing: antialiased;
}

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

/* The `hidden` attribute is only `display:none` at user-agent strength, so any
   component rule setting display (every flex pill and chip in this file) beats
   it and the element stays visible while reading as hidden to script. */
[hidden] { display: none !important; }

a { color: var(--bb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--bb-tint-blue); }


/* ---------- Type ----------
   Roles from the doc, section 2. Hero headlines are a question or an
   invitation, never a value prop. Section headings are always paired with a
   warm-gray subline in a human voice — .bb-h2 without a following .bb-sub is
   an incomplete section. Meta is sentence case; ALL-CAPS eyebrows are banned. */

.bb-hero {
  font: 800 clamp(34px, 4.4vw, 54px)/1.08 var(--bb-font);
  letter-spacing: -1.5px;
  margin: 0;
}

.bb-h2 {
  font: 700 26px/1.2 var(--bb-font);
  letter-spacing: -0.5px;
  margin: 0;
}

.bb-sub {
  font: 400 14.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 6px 0 0;
}

.bb-card-title {
  font: 700 16px/1.3 var(--bb-font);
  margin: 0;
}

.bb-body {
  font: 400 15px/1.6 var(--bb-font);
  max-width: 66ch;
  margin: 0;
}

.bb-meta {
  font: 500 13px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* Numerals in prices, counts and times must not jitter as they change. */
.bb-tabular { font-variant-numeric: tabular-nums; }

.bb-wordmark {
  font: 700 24px/1 var(--bb-font-logo);
  letter-spacing: 2px;
  color: var(--bb-primary);
  text-transform: lowercase;
}


/* ---------- Cards ----------
   No resting shadow. Separation is the hairline. */

.bb-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
  transition: box-shadow .18s ease-out;
}
.bb-card:hover { box-shadow: var(--bb-shadow-hover); }
.bb-card--feature { border-radius: var(--bb-r-feature); }

.bb-card__photo {
  display: block;
  width: 100%;
  height: 180px;          /* doc: 172-190px */
  object-fit: cover;
  background: var(--bb-tint-blue);
}

.bb-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;          /* doc: 14-16px */
}


/* ---------- Rating ----------
   Jade seal + five drawn dots + the count. The count is mandatory: a rating
   without it is not allowed by the doc, so .bb-rating without .bb-count is a
   bug, not a style choice. Dots are real elements, never the bullet character. */

.bb-rating { display: flex; align-items: center; gap: 8px; }

.bb-seal {
  display: inline-flex;
  align-items: center;
  background: var(--bb-trust);
  color: var(--bb-page);
  border-radius: var(--bb-r-pill);
  padding: 2px 9px;
  font: 800 12.5px/1.5 var(--bb-font);
  font-variant-numeric: tabular-nums;
}

.bb-dots { display: inline-flex; gap: 2.5px; }

.bb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bb-trust);
}
/* Half fill is a hard-stop gradient, not an opacity — the empty side must read
   as the empty color, not as washed-out jade. */
.bb-dot--half {
  background: linear-gradient(90deg, var(--bb-trust) 0 50%, var(--bb-hairline) 50% 100%);
}
.bb-dot--empty { background: var(--bb-hairline); }

.bb-count {
  font: 500 12.5px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
}


/* ---------- Chips and pills ----------
   Urgency is plain rust text at weight 600. It is never a filled badge and
   never red — see the doc's anti-SaaS rule 6. */

.bb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  border: 1px solid transparent;
  border-radius: var(--bb-r-chip);
  padding: 9px 14px;
  font: 600 13px/1.2 var(--bb-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bb-chip--selected {
  background: var(--bb-primary);
  color: var(--bb-page);
}
.bb-chip--gone {
  background: transparent;
  border: 1px dashed var(--bb-hairline);
  color: var(--bb-ink-soft);
  text-decoration: line-through;
  cursor: default;
}

.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  border-radius: var(--bb-r-pill);
  padding: 5px 12px;
  font: 600 12.5px/1.4 var(--bb-font);
}
.bb-pill--trust {
  background: var(--bb-tint-jade);
  color: var(--bb-trust);
}

.bb-urgency {
  color: var(--bb-urgency);
  font: 600 13px/1.45 var(--bb-font);
}


/* ---------- Buttons ----------
   Always radius 999. Sentence case labels — "Request a listing", never
   "REQUEST A LISTING →". Jade solid is reserved for review actions. */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--bb-r-pill);
  padding: 11px 22px;
  font: 600 14.5px/1.2 var(--bb-font);
  font-family: var(--bb-font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.bb-btn--primary {
  background: var(--bb-primary);
  color: var(--bb-page);
}
.bb-btn--secondary {
  background: transparent;
  color: var(--bb-primary);
  border-color: var(--bb-hairline);
}
.bb-btn--secondary:hover { border-color: var(--bb-primary); }
.bb-btn--review {
  background: var(--bb-trust);
  color: var(--bb-page);
}


/* ---------- Icon discs ----------
   Pure geometry only — circles, lines, arcs. No icon fonts, no illustration
   packs, no emoji. If a concept needs more than three simple shapes, use words. */

.bb-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  flex: none;
}
.bb-disc--jade { background: var(--bb-tint-jade); color: var(--bb-trust); }
.bb-disc--rust { background: rgba(154, 74, 28, 0.11); color: var(--bb-urgency); }


/* ---------- Dividers ----------
   Hairlines separate list rows, not boxes. Do not wrap a group of rows in a
   border as well — that is the box the doc is trying to avoid. */

.bb-divider { height: 1px; background: var(--bb-hairline); border: 0; margin: 0; }

.bb-list { list-style: none; margin: 0; padding: 0; }
.bb-list__item { padding: 14px 0; border-top: 1px solid var(--bb-hairline); }
.bb-list__item:first-child { border-top: 0; }


/* ---------- Photography ----------
   Photo heroes, never gradient heroes. The scrim is warm — built from
   rgba(28,26,23,...) with navy at the top. Never gray, never purple. */

.bb-photo { position: relative; overflow: hidden; }
.bb-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bb-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(18, 58, 99, 0.55) 0%,
    rgba(28, 26, 23, 0.40) 45%,
    rgba(28, 26, 23, 0.50) 82%,
    rgba(28, 26, 23, 0.15) 100%
  );
}

/* Every hero photo carries a location tag, because photos are rotated
   editorially and the traveler needs to know where they are looking. */
.bb-photo-tag {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--bb-r-pill);
  background: rgba(28, 26, 23, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 247, 240, 0.20);
  color: rgba(251, 247, 240, 0.92);
  font: 500 12.5px/1.4 var(--bb-font);
}
.bb-photo-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-urgency);
}

.bb-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bb-trust);
  color: var(--bb-page);
  border-radius: var(--bb-r-pill);
  padding: 5px 12px;
  font: 700 11.5px/1.4 var(--bb-font);
}

.bb-save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* ---------- Layout ---------- */

.bb-column {
  max-width: var(--bb-column);
  margin: 0 auto;
  padding-inline: 24px;
}

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

.bb-row-listing {
  display: grid;
  grid-template-columns: var(--bb-row-photo) 1fr;
  gap: 20px;
  align-items: start;
}

.bb-booking-card {
  position: sticky;
  top: 24px;
  width: var(--bb-booking-card);
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 22px;
  box-shadow: var(--bb-shadow-hover);  /* one of the two floating cards */
}

@media (max-width: 900px) {
  .bb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bb-row-listing { grid-template-columns: 1fr; }
  .bb-booking-card { position: static; width: 100%; }
}
@media (max-width: 560px) {
  .bb-grid-4 { grid-template-columns: 1fr; }
  .bb-column { padding-inline: 22px; }
}