/* ============================================================
   ASTER HOTEL GROUP — INNER PAGES
   Dining, Meetings, Careers. Loaded after shared.css, which carries
   the tokens, the header, the footer and the motion rules.

   These pages open on cream with the solid header (body.header-solid);
   `main` is already pushed below the header by shared.css.
   The scale and the colours repeat the home page's sections, so an
   inner page reads as the same site, not as a second design.
   ============================================================ */

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 52px 120px;
}

/* ---------- Head: what the page is (left), what to do (right) ---------- */
.page-head {
  display: grid;
  /* minmax(0, …) for the same reason as the footer grid: a track must be
     able to shrink below its longest unbreakable string. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 100px;
  align-items: start;
}

.page-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 24px;
  font-weight: 400;
}

.page-title {
  font-family: var(--brand-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 32px;
}

.page-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(43, 27, 24, 0.72);
  font-weight: 300;
  max-width: 520px;
}

.page-lead + .page-lead {
  margin-top: 16px;
}

/* ---------- Actions: the menu, and how to book ---------- */
.page-actions {
  padding-top: 8px;
}

/* The page's main action (Dining menu, Meetings proposal) is .btn.btn-primary
   from the button system in shared.css (2026-10-14); .page-btn is retired. */

.page-note {
  margin-top: 36px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(43, 27, 24, 0.72);
  max-width: 440px;
}

.page-contacts {
  list-style: none;
  margin-top: 14px;
}

.page-contacts li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(168, 137, 87, 0.2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.page-contacts li:first-child {
  border-top: 1px solid rgba(168, 137, 87, 0.2);
}

/* 0.78 — the clickable-on-cream standard; the qualifier after it is 0.65,
   the not-clickable level, as in the footer. */
.page-contacts a {
  color: rgba(43, 27, 24, 0.78);
  text-decoration: none;
  transition: color 0.3s;
}

.page-contacts a:hover {
  color: var(--oxblood);
}

.page-contacts span {
  color: rgba(43, 27, 24, 0.65);
  font-size: 0.82rem;
}

/* ---------- Facts ----------
   A definition list across the full width, two columns: label above,
   fact below, a hairline between rows — the site's hairline motif.
   Facts only; nothing here is a claim. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 100px;
  margin-top: 96px;
  border-top: 1px solid rgba(168, 137, 87, 0.2);
}

.facts-row {
  padding: 22px 0;
  border-bottom: 1px solid rgba(168, 137, 87, 0.2);
}

.facts dt {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin-bottom: 10px;
}

.facts dd {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ink);
}
/* Russian: Times had no light weight, so until 2026-10-07 these values were drawn
   regular and read as headings of their rows. Noto Serif Display really is light at
   300 and the values faded (Jun) — Medium brings back the emphasis. */
html:lang(ru) .facts dd { font-weight: 500; }

/* A second, quieter line under a fact */
.facts dd span {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(43, 27, 24, 0.65);
}

/* ---------- Gallery ----------
   Every photo keeps its own proportions — the layout follows the files,
   as on the home page (handoff: "Photographs — the layout follows the
   files"). CSS columns stack them without cropping; width and height on
   each <img> reserve the space, so nothing shifts while they load. */
.gallery {
  margin-top: 120px;
}

.gallery-group + .gallery-group {
  margin-top: 72px;
}

.gallery-title {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oxblood);
  font-weight: 500;
  margin-bottom: 20px;
}

.gallery-grid {
  column-count: 2;
  column-gap: 24px;
}

.gallery-grid--three {
  column-count: 3;
}

.gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 24px;
  overflow: hidden;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .page {
    padding: 56px 24px 80px;
  }
  .page-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  /* Sized to the screen so a short title stays on one line in BOTH the
     fallback serif and Fraunces. At a fixed 41.6px «Shade Restaurant» fitted
     one line in the fallback and broke onto two once Fraunces arrived, pushing
     the page down 43px — a 0.036 layout shift on a 375px phone (measured
     2026-10-02). Fraunces needs about 8.3 × font-size for that title; this
     clamp keeps it inside the column from 320px up. A long title wraps in
     both fonts anyway. */
  .page-title {
    font-size: clamp(2rem, 9.3vw, 2.6rem);
    margin-bottom: 24px;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 64px;
  }
  .facts dd {
    font-size: 1.15rem;
  }
  .gallery {
    margin-top: 80px;
  }
  .gallery-grid,
  .gallery-grid--three {
    column-count: 1;
  }
  .gallery-grid figure {
    margin-bottom: 16px;
  }
}

/* Tablet: three narrow columns become two. */
@media (min-width: 901px) and (max-width: 1279px) {
  .gallery-grid--three {
    column-count: 2;
  }
}


/* ============================================================
   BOOKING PAGE — /booking/, /en/booking/ (Jun, 2026-10-14)
   Our frame around Bnovo's module: the page head, the module at
   full content width, and reception's channels underneath. What is
   inside the module (colours, rooms, photos, rates) is set in
   Bnovo's extranet, not here. The channels reuse the old booking
   dialog's classes from shared.css.
   ============================================================ */
.bk {
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 52px 120px;
}

.bk-head {
  margin-bottom: 40px;
}

.bk-head .page-title {
  margin-bottom: 0;
  /* .page-title is the Latin brand serif (Fraunces, no Cyrillic) – right for «Shade
     Restaurant», wrong for «Бронирование», which fell back to Times (fonts.py). The page
     serif follows the language: Noto Serif Display in Russian, Fraunces in English. */
  font-family: var(--serif);
}

/* Bnovo's credit line comes with its own inline font stack (Proxima Nova / Helvetica);
   it is set in the site's sans so the page uses one typeface family. Text and link
   are Bnovo's and unchanged. */
#bn_iframe,
#bn_iframe a {
  font-family: var(--sans) !important;
}

/* Room for the module while it loads, so the channels below do not jump up and down. */
.bk-module {
  min-height: 640px;
}

.bk-module iframe {
  display: block;
  width: 100%;
  border: 0;
}

.bk-alt {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid rgba(168, 137, 87, 0.3);
  max-width: 560px;
}

@media (max-width: 900px) {
  .bk {
    padding: 44px 20px 84px;
  }
  .bk-head {
    margin-bottom: 28px;
  }
  .bk-alt {
    margin-top: 64px;
    padding-top: 40px;
  }
}