/* Crest — crisp contemporary city-hotel look. Clean planes, tight radius,
   one disciplined accent. Neutral and businesslike on purpose. */

:root {
    --font-display: 'Space Grotesk';
    --font-body: 'DM Sans';
    --shadow: 0 1px 2px rgba(16,24,32,.05), 0 12px 28px -14px rgba(16,24,32,.18);
}

/* Tighter, quieter headings than the base scale. */
.hero h1 { font-weight: 600; letter-spacing: -0.03em; }
section.block h2 { font-weight: 600; letter-spacing: -0.02em; }

/* Facts panel reads as a spec sheet: hairlines, no softness. */
.about-facts { border-radius: var(--r-card); }
.about-facts div { padding: 12px 14px; }

/* Rooms as flat rows with a quiet hover rule, not lifted cards. */
@media (hover: hover) {
    .room:hover { transform: none; box-shadow: none; border-color: var(--accent); }
}

/* Reviews: structured, grid-aligned, no flourish. */
.quote { border-left-width: 3px; }

/* The hero photo is treated as architectural backdrop: cooled and calmed so
   the type stays the subject. */
.hero--wall .hero-wall { filter: grayscale(.28) contrast(1.04); }

/* ── Layout structure ──────────────────────────────────────────────────────
   A city hotel is shopped like a spec sheet: one establishing photograph,
   then facts in tight rows. Nothing here is decorative. */

/* Nav: name left, links right, set small and lettered like signage. */
.nav-links a { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }

/* Gallery: ONE wide establishing shot with the rest in a flat row beneath.
   The composer decides how many photographs there are and which layout that
   makes; this only says how Crest draws the layouts it is given. The row uses
   auto-fit rather than a fixed column count so it flows whatever it receives. */
.gallery-main { aspect-ratio: 21 / 9; }
.gallery-grid[data-layout="trio"],
.gallery-grid[data-layout="mosaic"] { grid-template-columns: 1fr; }
.gallery-grid[data-layout="trio"] .gallery-side,
.gallery-grid[data-layout="quad"] .gallery-side,
.gallery-grid[data-layout="mosaic"] .gallery-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: none;
    margin-top: 12px;
}
.gallery-side img { aspect-ratio: 3 / 2; height: auto; }
.gallery-strip img { flex: 1 1 0; min-width: 120px; }

/* Rooms as a specification table: hairlines, aligned columns, no lift. */
.room { padding: 18px 0; align-items: center; }
.room-thumb { border-radius: 4px; width: 92px; height: 68px; }
.price b { font-size: 1.25rem; }

/* Reviews: three compact columns, structured, no flourish. */
/* Three columns rather than two, and a shorter clamp: structured and
   grid-aligned. The grid itself is the shared `grid` variant. */
.quotes { --quote-cols: 3; --quote-gap: 22px; }
.quote p { font-size: .95rem; -webkit-line-clamp: 4; }

@media (max-width: 900px) {
    .gallery-main { aspect-ratio: 3 / 2; }
    .gallery-grid[data-layout] .gallery-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}