/* ==========================================================================
   Layout — containers, header, mobile menu, sections, page grids, footer.
   Mobile first; breakpoints 48rem (768), 64rem (1024), 90rem (1440).
   ========================================================================== */

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.page { padding-block: var(--space-6) var(--section-y); }
.page--home, .page--error { padding-block: 0; }
.section { padding-block: var(--section-y); }
.band { background: var(--paper-deep); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); }
.page-head__meta { color: var(--text-muted); font-size: var(--fs-small); }
.page-head--intro { display: block; max-width: var(--measure); margin-bottom: var(--space-10); }
.page-head--intro .lead { margin-top: var(--space-4); }

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  color: var(--text-on-dark); background: var(--ink-950);
  border-bottom: var(--hairline) solid var(--on-dark-hairline);
}
.site-header--over-hero { position: fixed; inset-inline: 0; background: transparent; border-bottom-color: transparent; }
.site-header--over-hero.is-scrolled, .no-js .site-header--over-hero { background: var(--ink-950); border-bottom-color: var(--on-dark-hairline); }
.js .site-header--over-hero { transition: background-color var(--duration-state) var(--ease), border-color var(--duration-state) var(--ease); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: 100%; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.brand__logo { width: var(--logo); height: var(--logo); border-radius: var(--radius); }
.brand__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--fs-card-title); letter-spacing: var(--tracking-display); white-space: nowrap; }
.brand:hover { text-decoration: none; }

.site-header .site-nav { display: none; margin-left: auto; }
.site-nav__list { display: flex; gap: var(--space-6); }
.site-nav__link { position: relative; display: block; padding-block: var(--space-2); font-size: var(--fs-small); font-weight: var(--weight-medium); text-decoration: none; color: var(--muted-on-dark); }
.site-nav__link:hover, .site-nav__link[aria-current='page'] { color: var(--text-on-dark); }
.site-nav__link[aria-current='page']::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: currentColor; }
.site-header .site-header__whatsapp { display: none; }
.site-header .menu-button { margin-left: auto; }

@media (min-width: 64rem) {
  .site-header .site-nav, .site-header .site-header__whatsapp { display: inline-flex; }
  .site-header .menu-button { display: none; }
}

/* Without JavaScript the menu button cannot open the menu: phones get the links as a scrollable second row. */
@media (max-width: 63.99rem) {
  .no-js .site-header, .no-js .site-header--over-hero { position: relative; height: auto; }
  .no-js .site-header__inner { flex-wrap: wrap; row-gap: 0; min-height: var(--header-h); }
  .no-js .site-header .menu-button { display: none; }
  .no-js .site-header .site-nav { display: block; flex: 1 1 100%; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; }
  .no-js .site-nav__link { white-space: nowrap; padding-block: var(--space-3); }
}

/* --- Mobile menu ------------------------------------------------------- */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); }
.mobile-menu__panel {
  position: absolute; inset-block: 0; right: 0; width: min(var(--menu-w), 100%);
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-4) var(--gutter) var(--space-8);
  color: var(--text-on-dark); background-color: var(--ink-950); background-image: var(--grain);
  overflow-y: auto;
}
.mobile-menu__close { align-self: flex-end; }
.mobile-menu__link {
  display: block; padding-block: var(--space-3);
  border-bottom: var(--hairline) solid var(--on-dark-hairline);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-semibold); text-decoration: none;
}
.mobile-menu__link[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- Split (image + text) and about ---------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.split__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.split__body .section-title { margin-bottom: var(--space-8); }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
  .split--single { grid-template-columns: minmax(0, 1fr); }
  .split__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.about__text .section-title { margin-bottom: var(--space-6); }
@media (min-width: 64rem) {
  .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
}

/* --- Search ------------------------------------------------------------ */
.search-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 64rem) {
  .search-layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}

/* --- Car page ---------------------------------------------------------- */
.car-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.car-layout > * { min-width: 0; }
@media (max-width: 63.99rem) {
  .page--sold .car-related { order: 2; }
  .page--sold .car-details { order: 3; }
}
@media (min-width: 64rem) {
  .car-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-10); row-gap: var(--space-10); align-items: start; }
  .car-gallery { grid-column: 1; grid-row: 1; }
  .car-details { grid-column: 1; grid-row: 2; }
  .car-aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .car-aside > * { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .car-related { grid-column: 1 / -1; }
}

/* --- Footer ------------------------------------------------------------ */
.site-footer { padding-block: var(--section-y) var(--space-8); }
/* Error pages end on a dark block: a hairline keeps it apart from the dark footer. */
.page--error + .site-footer { border-top: var(--hairline) solid var(--on-dark-hairline); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.site-footer__tagline { max-width: var(--measure-short); margin-block: var(--space-4) var(--space-6); color: var(--muted-on-dark); }
.site-footer__title { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: var(--weight-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--muted-on-dark); }
.footer-links { display: grid; gap: var(--space-2); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer__map { grid-column: 1 / -1; }
.site-footer__map iframe { width: 100%; height: var(--map-h); border: 0; border-radius: var(--radius); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--on-dark-hairline);
  font-size: var(--fs-label); color: var(--muted-on-dark);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
/* Developer credit: under the copyright on phones, pushed to the right on wider screens. */
.site-footer__credit { flex-basis: 100%; }
.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: var(--text-on-dark); text-decoration: underline; }
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__credit { flex-basis: auto; margin-inline-start: auto; }
}
@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-16); }
  .site-footer__brand { grid-column: auto; }
}