/* ad-hoc, not part of product: Amenities page (amenities.html), redesign variant 1.
   Page-scoped additions only. Built from the tokens and components in style.css
   (room-hero, intro, tiles + amen cards, band, eyebrow / caption / link / btn). */

/* 01 hero: a little wider measure so the title sets in two lines on desktop */
.amen-hero .room-hero__copy { max-width: 38rem; }

/* ==========================================================================
   02 Facilities: five full-bleed photo tiles on a 6-column seam grid.
   The pool and the lounges open as a wide 4:3 pair, then grounds, social spaces
   and cinema follow as three squares, so the second row stays shorter than the
   first and inside one viewport (Figma: 5 cards + photo cells).
   ========================================================================== */
.amen-tiles {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--space-8);
}
.amen-tiles > li { grid-column: span 2; }
.amen-tiles > .amen-tiles__wide { grid-column: span 3; }

.amen-tiles .amen { aspect-ratio: 1 / 1; }
.amen-tiles__wide .amen {
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
}
.amen-tiles__wide .amen__title { font-size: var(--fs-h3); }

/* ==========================================================================
   03 Little Rotti band: what the restaurant page covers, as a quiet caption row
   ========================================================================== */
/* the overhead food photo is brighter than the homepage one: the centred text
   scrim is doubled (same tokens) so the small lines stay readable on the naan */
.amen-rotti .band__scrim { background: var(--scrim-text), var(--scrim-text), var(--scrim-flat); }
.amen-rotti__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .5rem;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.amen-rotti__topics li:not(:last-child)::after {
  content: "/";
  margin-left: .5rem;
}

/* ==========================================================================
   04 Good to know: title, copy and a small photo (the homepage split__thumb
   treatment) on the left (cols 1-5);
   two numbered, ruled lists side by side on the right (cols 7-12)
   ========================================================================== */
.amen-know { padding-bottom: var(--section-large); }
.amen-know__grid { align-items: start; }

.amen-know__intro { grid-column: 1 / span 5; }
.amen-know__title { margin-bottom: var(--space-5); }
.amen-know__body { max-width: 26rem; }
.amen-know__figure {
  width: min(18rem, 70%);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--hairline-thin) solid var(--c-line);
}

.amen-know__lists {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
  /* line the first rule up with the title block, below the eyebrow */
  padding-top: calc(var(--fs-small) * 1.2 + var(--space-2));
}
.amen-know__key {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.amen-know__list { border-top: var(--hairline-thin) solid var(--c-line); }
.amen-know__list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.amen-know__num {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-text-3);
}
.amen-know__item {
  font-size: var(--fs-h4);
  line-height: 1.1;
}
.amen-know__line {
  grid-column: 2;
  margin-top: var(--space-1);
}
.amen-know__actions { grid-column: 1 / -1; }

/* ==========================================================================
   Responsive: tablet ≤ 991px, phone ≤ 767px, small phone ≤ 599px
   ========================================================================== */
@media (max-width: 991px) {
  /* tiles: 2-up portraits; the fifth closes the run as one wide tile */
  .amen-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amen-tiles > li,
  .amen-tiles > .amen-tiles__wide { grid-column: span 1; }
  .amen-tiles .amen,
  .amen-tiles__wide .amen {
    aspect-ratio: 4 / 5;
    padding: var(--space-3);
  }
  .amen-tiles__wide .amen__title { font-size: var(--fs-h4); }
  .amen-tiles > li:last-child { grid-column: 1 / -1; }
  .amen-tiles > li:last-child .amen { aspect-ratio: 3 / 2; }

  /* good to know: copy, then the lists, then the photo stays with the copy */
  .amen-know__intro,
  .amen-know__lists { grid-column: 1 / -1; }
  .amen-know__lists {
    margin-top: var(--space-7);
    padding-top: 0;
  }
  .amen-know__body { max-width: var(--text-measure); }
  .amen-know__figure { width: min(50%, 18rem); }
}

@media (max-width: 599px) {
  .amen-tiles { grid-template-columns: minmax(0, 1fr); }
  .amen-tiles .amen,
  .amen-tiles__wide .amen,
  .amen-tiles > li:last-child .amen { aspect-ratio: 1 / 1; }

  .amen-know__lists { grid-template-columns: minmax(0, 1fr); }
  .amen-know__figure { width: 70%; }
}