/* ad-hoc, not part of product: Bajala About page (about.html), redesign variant 1.
   Structure and copy from the Figma frame "О нас" (411:1997); every value comes from the tokens in
   style.css. Page-scoped classes are prefixed .ab- so they never meet the homepage .about block. */

/* ==========================================================================
   01 Hero: reuses .room-hero (copy left, photo bleeding right)
   ========================================================================== */
.ab-hero .room-hero__title .line { white-space: nowrap; }

/* ==========================================================================
   02 On this page: one ruled row of three numbered anchors
   ========================================================================== */
.ab-index { border-block: var(--hairline-thin) solid var(--c-line); }
.ab-index__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.ab-index__link {
  display: flex;
  align-items: baseline;
  padding: var(--space-4) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
}
.ab-index__num {
  flex: none;
  margin-right: .75rem;
  font-weight: var(--fw-light);
  color: var(--c-text-3);
  transition: color var(--dur-fade) var(--ease-std);
}
.ab-index__link:hover .ab-index__num,
.ab-index__link:focus-visible .ab-index__num { color: var(--c-ink); }

/* ==========================================================================
   03 Arrival and departure: two statement times side by side, split by a hairline
   ========================================================================== */
.ab-times { padding-bottom: var(--section-large); }
.ab-times__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-8);
  border-block: var(--hairline-thin) solid var(--c-line);
}
.ab-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.ab-time + .ab-time { border-left: var(--hairline-thin) solid var(--c-line); }
.ab-time__label { margin-bottom: var(--space-5); }
.ab-time__value {
  font-size: calc(var(--fs-hero) * 1.5);
  line-height: 1;
  white-space: nowrap;
}
.ab-time__pre {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-h4);
  color: var(--c-text-3);
}
.ab-time__note {
  max-width: 22rem;
  margin-top: var(--space-5);
  text-wrap: balance;
}

/* ==========================================================================
   Numbered rule list (booking terms and house rules): index | title over line
   ========================================================================== */
.ab-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline-thin) solid var(--c-line);
}
.ab-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: .375rem;
  padding: var(--space-5) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.ab-item__num {
  grid-row: 1 / span 2;
  padding-top: .45em;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-text-3);
}
.ab-item__title {
  grid-column: 2;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.ab-item__body {
  grid-column: 2;
  max-width: 30rem;
}

/* two columns of rule items (arrival details, children and dorms); the list's top rule spans both */
.ab-list--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.ab-list--cols .ab-item__body { max-width: none; }
.ab-times__list { margin-top: var(--space-7); }
.ab-times__grid + .ab-times__list { border-top: 0; }

/* ==========================================================================
   04 Booking terms: alt band; title and a small portrait on the left, the list on the right
   ========================================================================== */
.ab-terms {
  padding: var(--section-main) 0;
  background: var(--c-bg-2);
}
.ab-terms__grid { align-items: start; }
.ab-terms__head { grid-column: 1 / span 5; }
.ab-terms__title { margin-bottom: 0; }
.ab-terms__body {
  max-width: 26rem;
  margin-top: var(--space-5);
}
.ab-terms__body + .ab-terms__body { margin-top: var(--space-3); }
.ab-terms__thumb {
  width: min(20rem, 70%);
  margin-top: var(--space-7);
}
.ab-terms__list {
  grid-column: 7 / -1;
  margin-top: var(--space-1);
}

/* fixed charges: name left, amount right, one ruled row each */
.ab-fees {
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline-thin) solid var(--c-line);
}
.ab-fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-2);
}
.ab-fee__price {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* ==========================================================================
   05 House and dorm rules: reuses the mirrored .split; the text column runs to the margin
   ========================================================================== */
.ab-house .split__text { grid-column: 8 / -1; }
.ab-house .split__title { margin-bottom: var(--space-6); }
.ab-house__actions { margin-top: var(--space-6); }

/* ==========================================================================
   07 Children, dorms and access: last block before the footer
   ========================================================================== */
.ab-guests { padding-bottom: var(--section-large); }
.ab-guests__actions { margin-top: var(--space-7); }

/* ==========================================================================
   Responsive: tablet ≤ 991px, phone ≤ 767px, small phone ≤ 599px
   ========================================================================== */
@media (max-width: 1199px) {
  .ab-hero .room-hero__title .line { white-space: normal; }
}

@media (max-width: 991px) {
  /* index wraps into a stacked list */
  .ab-index__list { grid-template-columns: minmax(0, 1fr); }
  .ab-index__list li + li .ab-index__link { border-top: var(--hairline-thin) solid var(--c-line); }
  .ab-index__link { padding: var(--space-3) 0; }

  /* booking: title and list stacked, the portrait moves under the list */
  .ab-terms__head { display: contents; }
  .ab-terms__head > [data-reveal] { grid-column: 1 / -1; }
  .ab-terms__list {
    grid-column: 1 / -1;
    margin-top: var(--space-7);
  }
  .ab-terms__thumb {
    grid-column: 1 / span 6;
    grid-row: 3;
    width: auto;
  }

  /* house rules: the split stacks (photo, then copy) */
  .ab-house .split__text { padding-bottom: var(--section-main); }

  .ab-list--cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ab-times__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-time { padding: var(--space-6) 0; }
  .ab-time + .ab-time {
    border-left: 0;
    border-top: var(--hairline-thin) solid var(--c-line);
  }
  .ab-terms__thumb { grid-column: 1 / span 9; }
}

@media (max-width: 599px) {
  .ab-time__value { font-size: var(--fs-hero); }
  .ab-item { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ab-item__title { font-size: var(--fs-h4); }
}