/* ==========================================================================
   Journey layer — the catalogue and planner surfaces.

   Structure follows the Eventoria catalogue; all colour and artwork
   remain Eventoria-owned. Every selector here is unchanged from the previous
   version, and so is every structural property (display, grid, gap, aspect
   ratios, breakpoints) — this is a presentation pass only.

   Two things were wrong with the previous version.

   First, it was the loudest thing on every page. A customer-journey context bar, since removed at the owner's request, rendered a
   second brand wordmark, a letterspaced label and a
   solid filled step badge above the real page heading — so the first thing a
   customer saw was the scaffolding of the site rather than its content, and the
   site read as a wireframe. The same information is still here; it is now quiet
   enough to be context rather than a headline.

   Second, the values were literal, and the small type was too small: 9px, 10px
   and 11px labels, and a hardcoded cream so the surface did not follow the
   theme. Everything now comes from the tokens in style.css and nothing a
   customer must read sits below --fs-2xs (12px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   The home booking panel.

   The one card left in the hero, and the only element there that has to look pressable. The headline
   and the proof now stand directly on the photograph, so everything that reads as a surface you can
   act on is concentrated in these three fields and the button beside them.

   Translucent warm cream rather than the opaque `--card`, because the reference lets the table show
   faintly through and that is what makes the panel feel laid on the picture instead of pasted over it.
   The blur is a bonus where it is supported: at 0.9 alpha the copy clears contrast on its own, so the
   hero never depends on a filter to stay readable.

   Literal colours, not tokens. This hero is a dark surface in both themes, and `--card` turns deep
   green in dark mode — which would make the booking panel the darkest thing on the page.
   -------------------------------------------------------------------------- */

.prototype-home-search {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--sp-3) var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: rgba(255, 253, 247, .9);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(9, 27, 21, .3);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.prototype-home-search__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: baseline;
  margin-bottom: -4px;
  color: #1F5A4A;
  font-size: var(--fs-xs);
}

/* The calendar mark rides with the heading rather than beside the panel, so the sentence still starts
   at the panel's own left edge and the two right-hand words stay on the baseline they were on. */
.prototype-home-search__head b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.prototype-home-search__head b .hic { color: #6D7F67; }
.prototype-home-search__head span { color: rgba(71, 88, 82, .88); font-size: var(--fs-2xs); font-weight: 400; }

.prototype-home-search label { font-size: var(--fs-2xs); text-align: left; color: rgba(71, 88, 82, .95); }

/* Label and mark share a line, so all three controls begin at the same y whether their label is one
   word or two — which is the whole reason the reference's field row reads as a row. */
.hs-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  font-weight: 600;
  letter-spacing: .01em;
}

.hs-label .hic { color: #6D7F67; }

.prototype-home-search select,
.prototype-home-search input {
  min-height: 46px;
  padding: var(--sp-2) var(--sp-3);
  border-color: rgba(31, 90, 74, .2);
  background: #fff;
  color: #182A26;
  font-size: var(--fs-sm);
}

.prototype-home-search select:focus-visible,
.prototype-home-search input:focus-visible {
  outline: 3px solid rgba(31, 90, 74, .38);
  outline-offset: 1px;
}

.prototype-home-search .btn {
  min-height: 46px;
  align-self: end;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Catalogue.
   -------------------------------------------------------------------------- */

.catalogue-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.catalogue-intro h3 { margin-top: var(--sp-1); color: var(--ink); font-size: var(--fs-lg); }
.catalogue-intro__count { color: var(--pri); font-weight: 700; white-space: nowrap; }
.catalogue-filters { align-items: flex-end; }
.catalogue-search { flex: 3 1 260px !important; }
.catalogue-search input { margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   Product detail.
   -------------------------------------------------------------------------- */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: var(--sp-5);
  max-width: 980px;
  padding: var(--sp-5);
}
.product-detail__hero .im { aspect-ratio: 1.35; }
.product-detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.product-detail__thumbs .im { aspect-ratio: 1; }
.product-detail__copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.product-detail__crumb { margin: 0; color: var(--mut); font-size: var(--fs-2xs); }
.product-detail__copy h2 { font-size: clamp(26px, 4vw, 38px); color: var(--ink); }
.rating { color: var(--gold); font-size: var(--fs-sm); }
.rating span { color: var(--mut); font-size: var(--fs-2xs); }
.product-detail__qty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product-detail__qty span { margin-right: auto; color: var(--mut); font-size: var(--fs-xs); }
.product-detail__qty strong { font: 600 21px var(--serif); color: var(--ink); }

/* --------------------------------------------------------------------------
   Planner surfaces.
   -------------------------------------------------------------------------- */

.plan-board,
.itemlist-card,
.flow-main,
.flow-aside,
.quote-rail { border-radius: var(--radius-sm); }

/* The tab row ended on a hairline rule, which made it read as a form legend
   rather than navigation. The active chip now carries its own weight. */
.plan-tabs,
.tabs { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }
.plan-tabs .chip,
.tabs .chip { border-radius: var(--radius-sm); min-height: 40px; }
.plan-tabs .chip.on,
.tabs .chip.on {
  background: var(--card);
  color: var(--pri);
  border-color: var(--pri);
  box-shadow: var(--elev-1);
}

/* --------------------------------------------------------------------------
   Journey steps.
   -------------------------------------------------------------------------- */

.journey-steps { border-radius: var(--radius-sm); }
.journey-step { border-radius: var(--radius-sm); }
.journey-step.on { background: var(--pri); color: var(--on); }

/* --------------------------------------------------------------------------
   Responsive. Breakpoints unchanged at 900px and 560px.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .prototype-home-search { grid-template-columns: 1fr 1fr; }
  .prototype-home-search .btn { width: 100%; }
  /* Four columns need about 900px to stay legible; below that the three fields pair up and the action
     keeps the second cell of the last row, so the panel grows by one row rather than by four. */
  .product-detail { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
}

/*
 * Phone: still two columns, with the date and the action each taking the full width.
 *
 * The single-column stack this replaces cost about 110px of the first screen and bought nothing back:
 * the three fields are short, and a ~150px column holds a date picker or a select at 14px without
 * truncating either of them. Field, then field, then the date across the row, then the action across
 * the row — three rows of controls instead of four, which is most of why the action now lands inside
 * the first screen on a phone. The button spans because it is the one control in here that must never
 * be squeezed beside a field.
 */
@media (max-width: 560px) {
  .prototype-home-search {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 14px 12px;
    border-radius: 18px;
  }
  .prototype-home-search__head { display: grid; gap: 2px; margin-bottom: 0; }
  .prototype-home-search label:nth-of-type(3) { grid-column: 1 / -1; }
  .prototype-home-search select,
  .prototype-home-search input { min-height: 44px; }
  .prototype-home-search .btn { grid-column: 1 / -1; width: 100%; }
  .catalogue-intro { align-items: flex-start; flex-direction: column; gap: var(--sp-2); }
  .catalogue-intro h3 { font-size: var(--fs-md); }
  .product-detail { padding: var(--sp-4); gap: var(--sp-4); }
  .product-detail__copy .row { display: grid; grid-template-columns: 1fr 1fr; }
  .product-detail__copy .row .btn { width: 100%; }
}

/* Motion is defined here rather than inherited, because the strip and the
   catalogue panels animate their own state changes. Honour the preference. */
@media (prefers-reduced-motion: reduce) {
  .prototype-home-search,
  .catalogue-intro,
  .product-detail,
  .journey-step,
  .tabs .chip { transition: none !important; animation: none !important; }
}