/*
 * Kaiso public surfaces: home wall, car wall, listings search and listing
 * detail. Reads kaiso.css tokens only.
 */

/* Home hero: the painted wall and a view of the coast road, joined by a
   breeze-block screen you look through. The search strip overlaps the join. */
.home-hero { --hero-h: clamp(23rem, calc(100svh - 25rem), 29rem); --wall-w: 46%; position: relative; display: grid; grid-template-columns: var(--wall-w) 1fr; min-block-size: var(--hero-h); background: var(--wall); color: var(--on-wall); isolation: isolate; --focus: var(--ink); }
.home-hero-view { grid-column: 1 / -1; grid-row: 1; margin: 0 0 0 calc(var(--wall-w) - var(--block) * 2); position: relative; z-index: 0; overflow: hidden; }
.home-hero-photo { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 96%; filter: saturate(0.78) contrast(0.94) brightness(1.02); }
/* Film grain and a faint wall-colour wash push the photo behind the headline and search. */
.home-hero-view::before, .home-hero-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.home-hero-view::before { z-index: 1; background: var(--wall); mix-blend-mode: soft-light; opacity: 0.35; }
.home-hero-view::after { z-index: 2; background: url("/assets/kaiso/grain-b6ca1a2c.svg") 0 0 / 180px 180px; mix-blend-mode: overlay; opacity: 0.55; }
.home-hero-wall { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; background: var(--wall); }
.home-hero-screen { position: absolute; inset-block: 0; left: 100%; inline-size: calc(var(--block) * 2); background: var(--wall); -webkit-mask: url("/assets/kaiso/breeze-block-30312e10.svg") 0 0 / var(--block) var(--block); mask: url("/assets/kaiso/breeze-block-30312e10.svg") 0 0 / var(--block) var(--block); }
.home-hero-copy { inline-size: 100%; padding: var(--space-5) var(--space-6) calc(var(--space-7) + var(--space-3)) max(var(--page-inline), calc((100vw - var(--page-max)) / 2 + var(--page-inline))); }
.home-hero .display-title { margin: 0 0 var(--space-3); color: var(--on-wall); font-size: var(--step-5-split); max-width: 11ch; }
.home-hero-lede { margin: 0; max-width: 32ch; font-size: var(--step-1); font-weight: 600; line-height: 1.4; }

.home-search { position: relative; z-index: 2; max-width: var(--page-max); margin: calc(-1 * var(--space-7)) auto 0; padding-inline: var(--page-inline); }
.home-opening { padding: var(--space-5) var(--space-6); background: var(--limewash); color: var(--ink); box-shadow: 0 0 0 0.5rem oklch(0.56 0.11 196); --focus: var(--wall-deep); }
.home-opening--strip { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); align-items: end; gap: var(--space-3) var(--space-6); }
.home-opening-title { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-2); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; align-self: center; }
.home-opening-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-4) var(--space-5); }
.home-opening-submit { min-inline-size: 10rem; }
.home-opening-note { grid-column: 2; margin: 0; color: var(--ink-quiet); font-size: var(--step--1); }
.page-trim { --band-color: var(--wall); }

.home-cars { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.home-cars-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.home-cars-heading .section-heading { margin: 0; }
.home-cars-heading .text-link { display: inline-flex; align-items: center; min-height: 44px; }

.home-record .section-heading { max-width: 20ch; }
.louvre-list { list-style: none; margin: var(--space-6) 0 var(--space-5); padding: 0; border-top: 1.5px solid var(--ink); }
.louvre { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding-block: var(--space-5); border-bottom: 1.5px solid var(--ink); }
.louvre-term { margin: 0; font-family: var(--font-display); font-stretch: var(--wider); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.louvre-text { margin: 0; font-size: var(--step-1); line-height: 1.45; max-width: 54ch; }
.home-record-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.home-record-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1080px) {
  .home-hero { --wall-w: 52%; }
  .home-opening--strip { grid-template-columns: minmax(0, 1fr); }
  .home-opening-note { grid-column: 1; }
}
@media (max-width: 760px) {
  /* Phones: a wide, short view on top; the wall rises into it through a
     half-scale screen row; the search keeps its button on the first screen. */
  .home-hero { display: block; min-block-size: 0; }
  .home-hero-view { margin: 0; aspect-ratio: 12 / 5; }
  .home-hero-photo { object-position: 60% 100%; }
  .home-hero-screen { inset: auto 0 100% 0; inline-size: auto; block-size: calc(var(--block) / 2); -webkit-mask-size: calc(var(--block) / 2) calc(var(--block) / 2); mask-size: calc(var(--block) / 2) calc(var(--block) / 2); }
  .home-hero-copy { padding: var(--space-4) var(--page-inline) calc(var(--space-7) + var(--space-2)); }
  .home-hero .display-title { font-size: max(2rem, var(--step-4)); margin-bottom: var(--space-2); }
  .home-hero-lede { font-size: 0.9375rem; line-height: 1.4; max-width: none; }
  .home-search { margin-top: calc(-1 * var(--space-7)); }
  .home-opening { padding: var(--space-4); box-shadow: 0 0 0 0.375rem oklch(0.56 0.11 196); }
  .home-opening--strip { gap: var(--space-2); }
  /* The legends name the fields; the title stays for assistive tech only. */
  .home-opening-title { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-opening-form { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .home-opening .trip-date-time legend { margin-bottom: var(--space-1); font-size: 0.9375rem; }
  /* Placeholders show dd/mm/yyyy and "Choose time"; the labels stay for assistive tech. */
  .home-opening .trip-date-time-fields label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-opening-submit { inline-size: 100%; }
}
@media (max-width: 640px) {
  /* Phones: the trim band drops to the half-scale row the home hero uses. */
  .page-trim { block-size: calc(var(--block) / 2); -webkit-mask-size: calc(var(--block) / 2) calc(var(--block) / 2); mask-size: calc(var(--block) / 2) calc(var(--block) / 2); }
  .home-cars { padding-bottom: var(--space-5); }
  .louvre-list { margin-top: var(--space-5); }
  .louvre { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-4); }
  .louvre-text { font-size: var(--step-0); }
}

/* Browse by body type: louvre tiles as links into Explore. */
.home-shapes .section-heading { margin-bottom: var(--space-5); }
.shape-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.shape-list > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.shape-link { position: relative; isolation: isolate; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); align-content: start; padding: var(--space-4) var(--space-4) var(--space-5); border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--limewash); color: var(--ink); text-decoration: none; transition: border-color 160ms var(--ease-out); }
.shape-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, var(--sun) 0 0.375rem, var(--sun-edge) 0.375rem 0.4375rem, var(--sun-tint) 0.4375rem 0.625rem); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out); }
.shape-link:hover, .shape-link:focus-visible { border-color: var(--ink); text-decoration: none; }
.shape-link:hover::before, .shape-link:focus-visible::before { transform: scaleY(1); }
.shape-image { display: block; inline-size: 100%; height: auto; max-height: 6rem; margin-bottom: var(--space-3); object-fit: contain; }
.shape-label { align-self: start; justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--limewash); font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.shape-detail { align-self: start; justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--limewash); color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.home-shapes-note { margin: var(--space-4) 0 0; font-size: var(--step--1); }
@media (max-width: 900px) { .shape-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Narrow phones: one tile per row, laid flat (pictogram beside its label) so
   the four needs stack as short rows instead of four tall tiles. */
@media (max-width: 420px) {
  .shape-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .shape-list > li { display: block; grid-row: auto; }
  .shape-link { grid-row: auto; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  .shape-image { grid-row: 1 / span 2; align-self: center; max-height: 3rem; margin-bottom: 0; }
  .shape-label { grid-column: 2; align-self: end; font-size: var(--step-0); }
  .shape-detail { grid-column: 2; }
}

/* The car wall. Every card spans the same five subgrid rows, so photos,
   titles, vehicle lines, prices and notes line up across each row. */
.car-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--space-7) var(--gutter); }
.car-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.car-grid-item, .car-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.car-card { position: relative; }
.car-card-media { position: relative; aspect-ratio: var(--photo-aspect); overflow: hidden; margin-bottom: var(--space-4); border-radius: var(--radius); background: var(--render); }
.car-card-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 600ms var(--ease-out); }
.car-card:hover .car-card-image, .car-card:focus-within .car-card-image { scale: 1.035; }
.car-card-empty { display: grid; place-items: center; block-size: 100%; padding: var(--space-3); }
.listing-media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.listing-media-placeholder-image { display: block; inline-size: min(72%, 15rem); block-size: auto; max-block-size: 5.5rem; object-fit: contain; }
.listing-media-placeholder p { margin: 0; padding: var(--space-1) var(--space-3); background: var(--limewash); border-radius: var(--radius); color: var(--ink-quiet); font-size: var(--step--1); font-weight: 650; line-height: 1.35; text-align: center; }
.car-card-title { margin: 0 0 var(--space-1); font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.car-card-link { color: var(--ink); text-decoration: none; }
.car-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.car-card-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.car-card-link:focus-visible { outline: none; }
.car-card:has(.car-card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--radius); }
.car-card-vehicle { margin: 0 0 var(--space-3); color: var(--ink-quiet); }
.car-card-place::before { content: " · "; }
.car-card-price { align-self: start; }
.car-card-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; }
.car-card-figure { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; }
.car-card-unit { color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.car-card-breakdown { position: relative; z-index: 1; margin-top: var(--space-1); }
.car-card-breakdown > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--wall-deep); font-weight: 650; list-style: none; }
.car-card-breakdown > summary::-webkit-details-marker { display: none; }
.car-card-breakdown > summary::after { content: ""; inline-size: 0.625rem; block-size: 0.625rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.car-card-breakdown[open] > summary::after { rotate: 180deg; }
.car-card-breakdown .money-breakdown { margin-block: var(--space-2) var(--space-3); }
.car-card-breakdown .money-row { padding-block: var(--space-2); font-size: var(--step--1); }
.car-card-breakdown > p { font-size: var(--step--1); margin: 0 0 var(--space-3); }
.car-card-note { align-self: start; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); color: var(--ink-quiet); font-size: var(--step--1); line-height: 1.45; }

/* Listings search and results */
.listings-heading { margin-bottom: var(--space-6); }
.listings-heading .page-title { margin-bottom: var(--space-2); }
.listings-heading p { margin: 0; }
.listings-layout { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); align-items: start; gap: var(--space-7); }
.public-listing-search { padding: var(--space-5); background: var(--render); border-radius: var(--radius); }
.public-listing-search .trip-date-time-fields { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.listings-search-heading { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-1); font-weight: 750; letter-spacing: -0.015em; }
.listings-results { min-width: 0; }
.listings-empty { padding: var(--space-6); border: 1.5px dashed var(--edge); border-radius: var(--radius); }
.listings-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.listings-next p { margin: 0; font-size: var(--step--1); }

.search-form { gap: var(--space-4); margin-top: var(--space-4); }
.search-trip-fields, .search-preference-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.search-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-height: 44px; margin-top: var(--space-3); padding-right: var(--space-5); position: relative; cursor: pointer; list-style: none; }
.search-disclosure > summary::-webkit-details-marker { display: none; }
.search-disclosure > summary::after { content: ""; position: absolute; right: 0; inline-size: 0.75rem; block-size: 0.75rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.search-disclosure[open] > summary::after { rotate: 180deg; }
.search-disclosure-action { font-weight: 700; }
.search-disclosure-criteria { color: var(--ink-quiet); font-size: var(--step--1); }
.search-disclosure.is-pinned-open > summary { display: none; }
.search-preferences { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.search-preferences > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 700; list-style: none; }
.search-preferences > summary::-webkit-details-marker { display: none; }
.search-preferences > summary::after { content: ""; inline-size: 0.75rem; block-size: 0.75rem; background: currentColor; -webkit-mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; mask: url("/assets/kaiso/chevron-4a463c0c.svg") center / contain no-repeat; transition: rotate 200ms var(--ease-out); }
.search-preferences[open] > summary::after { rotate: 180deg; }
.search-preferences[open] .search-preference-fields { margin-top: var(--space-4); }
.search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.search-actions .button { flex: 1 1 100%; }
.search-footnote { margin: 0; font-size: var(--step--1); }

/* Jalousie louvres: the body-type choices. Selecting one closes a set of
   sun-yellow slats down over it. */
.body-type-picker { min-inline-size: 0; margin: 0; padding: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--rule); }
.body-type-picker legend { font-size: 0.9375rem; font-weight: 650; }
.body-type-picker-help { margin: var(--space-1) 0 var(--space-3); color: var(--ink-quiet); font-size: var(--step--1); }
.body-type-options { display: flex; gap: var(--space-2); max-width: 100%; padding: 0.125rem 0.125rem var(--space-3); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; }
.body-type-option { flex: 0 0 9.5rem; min-width: 0; position: relative; isolation: isolate; display: grid; grid-template-rows: 3.5rem auto auto; gap: var(--space-1); padding: var(--space-3); border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--limewash); color: var(--ink); cursor: pointer; scroll-snap-align: start; transition: border-color 160ms var(--ease-out); }
.body-type-option::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, var(--sun) 0 0.375rem, var(--sun-edge) 0.375rem 0.4375rem, var(--sun-tint) 0.4375rem 0.625rem); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out); }
.body-type-option input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.body-type-option-visual { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; }
.body-type-option img { display: block; inline-size: 100%; height: auto; max-height: 3.25rem; object-fit: contain; mix-blend-mode: multiply; }
.body-type-option strong { font-family: var(--font-display); font-stretch: var(--wide); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; }
.body-type-option small { color: var(--ink-quiet); font-size: var(--step--1); line-height: 1.3; }
.body-type-option:hover { border-color: var(--ink); }
.body-type-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.body-type-option:has(input:checked)::before { transform: scaleY(1); }
.body-type-option:has(input:checked) small { color: var(--ink); }
.body-type-option:has(input:checked) strong { justify-self: start; padding-inline: var(--space-1); margin-inline: calc(-1 * var(--space-1)); background: var(--sun); }
.body-type-option:has(input:checked) .body-type-option-visual { background: var(--sun); border-radius: var(--radius); }
.body-type-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* In the listings rail the louvres stack as a two-column screen. */
.public-listing-search .body-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0.125rem; }
.public-listing-search .body-type-option { grid-template-rows: 3rem auto; padding: var(--space-2); }
.public-listing-search .body-type-option small { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.public-listing-search .body-type-picker-help { display: none; }

@media (max-width: 1080px) {
  .listings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .search-trip-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-preference-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-actions .button { flex: 0 1 auto; }
  .public-listing-search .body-type-options { display: flex; overflow-x: auto; padding: 0.125rem 0.125rem var(--space-3); }
  .public-listing-search .body-type-option { flex: 0 0 8.5rem; }
}
@media (max-width: 760px) {
  .search-trip-fields, .search-preference-fields { grid-template-columns: minmax(0, 1fr); }
  .listings-heading { margin-bottom: var(--space-5); }
  .public-listing-search { margin-inline: calc(-1 * var(--page-inline)); padding: var(--space-4) var(--page-inline) var(--space-5); border-radius: 0; }
  .search-actions .button { flex: 1 1 100%; }
}

/* Listing detail */
.listing-crumbs { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-bottom: var(--space-4); font-size: var(--step--1); }
.listing-crumbs .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.listing-detail { display: flex; flex-direction: column; gap: var(--space-6); }
.listing-detail > * { min-width: 0; }
.listing-title { margin-bottom: var(--space-4); max-width: 22ch; }
.listing-specs { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.listing-specs li { margin: 0 -1.5px -1.5px 0; padding: var(--space-1) var(--space-3); border: 1.5px solid var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.listing-specs .listing-specs-place { background: var(--ink); color: var(--limewash); }
.listing-gallery-list, .listing-review-list { list-style: none; margin: 0; padding: 0; }
.listing-gallery-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.listing-gallery-item { min-width: 0; }
.listing-gallery-item--primary { grid-column: 1 / -1; }
.listing-gallery-item figure { margin: 0; }
.listing-gallery-media { aspect-ratio: var(--photo-aspect); overflow: hidden; border-radius: var(--radius); background: var(--render); }
.listing-gallery-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.listing-gallery-item figcaption { margin-top: var(--space-2); color: var(--ink-quiet); font-size: var(--step--1); overflow-wrap: anywhere; }
.listing-gallery-empty { display: grid; place-items: center; padding: var(--space-4); aspect-ratio: 16 / 9; border-radius: var(--radius); }
.listing-gallery-empty .listing-media-placeholder { min-block-size: 100%; }
.listing-gallery-empty .listing-media-placeholder-image { inline-size: min(48%, 18rem); max-block-size: 8rem; }
.listing-gallery-empty .listing-media-placeholder p { padding: var(--space-2) var(--space-4); font-size: var(--step-0); }
.listing-description { margin: 0 0 var(--space-5); font-size: var(--step-1); line-height: 1.55; }
.listing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.listing-fact { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.listing-fact dt { color: var(--ink-quiet); font-size: var(--step--1); font-weight: 600; }
.listing-fact dd { margin: var(--space-1) 0 0; font-weight: 600; }
.listing-detail-conditions .section-heading, .listing-reviews .section-heading { margin: 0 0 var(--space-3); padding-top: var(--space-5); border-top: 1.5px solid var(--ink); font-size: var(--step-2); }
.listing-detail-conditions p { margin: 0; }

.listing-detail-trip { padding: var(--space-5); background: var(--limewash); border: 1.5px solid var(--ink); border-radius: var(--radius); }
.trip-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.trip-rate-figure { font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.trip-rate-unit { color: var(--ink-quiet); font-weight: 600; }
.trip-heading { margin: 0 0 var(--space-1); font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; }
.trip-note { margin: var(--space-2) 0; font-size: var(--step--1); }
.trip-form { gap: var(--space-4); margin-top: var(--space-4); }
.trip-form > .button, .trip-form > button { align-self: stretch; }
.trip-hours { font-size: var(--step--1); }
.trip-hours > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--wall-deep); }
.trip-hours dl.data-list { margin-block: var(--space-2); }
.listing-detail-estimate { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1.5px solid var(--ink); }
.listing-detail-estimate .money-breakdown { margin-block: var(--space-3); }
.listing-detail-estimate .money-breakdown + p { margin: 0 0 var(--space-2); font-size: var(--step--1); }
.listing-detail-estimate form .button, .listing-detail-estimate > .button { inline-size: 100%; margin-block: var(--space-2); }


.listing-reviews { overflow-wrap: anywhere; }
.listing-reviews.section-divider { margin-top: var(--space-7); padding-top: 0; border-top: 0; }
.listing-review-item { padding-block: var(--space-5); border-bottom: 1px solid var(--rule); }
.listing-reviews-more { margin-block: var(--space-5); }
.listing-review a, .listing-reviews-more a { display: inline-flex; align-items: center; min-height: 44px; }
.public-listing-detail-page > a.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); font-size: var(--step--1); }

@media (min-width: 1050px) {
  .listing-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); grid-template-areas: "identity trip" "media trip" "details trip" "conditions trip"; grid-template-rows: auto auto auto 1fr; column-gap: var(--space-7); row-gap: var(--space-6); align-items: start; }
  .listing-detail-identity { grid-area: identity; }
  .listing-detail-media { grid-area: media; }
  .listing-detail-details { grid-area: details; }
  .listing-detail-conditions { grid-area: conditions; }
  .listing-detail-trip { grid-area: trip; position: sticky; top: var(--space-4); }
  .public-listing-detail-page > .listing-reviews, .public-listing-detail-page > a.text-link { max-width: calc(100% - 25rem - var(--space-7)); }
}
/* Phones only: the price sits right under the photos and jumps to the trip panel. */
.listing-price-strip { display: none; }
@media (max-width: 1049px) {
  .listing-price-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); padding: var(--space-4) 0 0; border-top: 1.5px solid var(--ink); }
  .listing-price-strip-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; }
  .listing-price-strip-figure { font-family: var(--font-display); font-stretch: var(--wide); font-size: var(--step-3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
  .listing-price-strip-unit { color: var(--ink-quiet); font-weight: 600; }
  .listing-detail-trip .trip-rate { display: none; }
}
@media (max-width: 420px) { .listing-price-strip-action { inline-size: 100%; } }
@media (max-width: 600px) {
  .listing-gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-detail-trip { margin-inline: calc(-1 * var(--page-inline)); border-inline: 0; border-radius: 0; }
}
/* Phones: the car wall and the listing description step down with the page. */
@media (max-width: 640px) {
  .car-grid { row-gap: var(--space-6); }
  .listing-description { font-size: var(--step-0); }
}