/* A salon's website (src/examples/ex-website-salon.js), beside the Business Website engine's own
   stylesheet: the block that sets a service's length of time next to the step that follows it, the
   two choices that put two services side by side, a short name's width, and the gallery's three
   columns. Every colour, the radius and the display face are the business's own (--x-* on
   main#main). Phone first; widths in em, as the kit's are. */

/* ---- how long, and what comes next ------------------------------------------------------ */
.xw-salon-step { display: grid; flex: 1 1 100%; min-width: 0; overflow: hidden; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xw-salon-name { padding: 16px 18px 14px; border-bottom: 1px solid var(--x-hair); font-size: 1.375rem; }
.xw-salon-time, .xw-salon-next { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; }
.xw-salon-time { gap: 2px; border-bottom: 1px solid var(--x-hair); }
.xw-salon-label { color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xw-salon-figure { font: var(--x-display-weight, 600) clamp(1.75rem, 1.5rem + 1vw, 2.25rem)/var(--x-lh-head) var(--x-display, var(--x-text)); white-space: nowrap; }
.xw-salon-figure:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xw-salon-title { font-size: 1.0625rem; font-weight: 700; }
.xw-salon-actions { margin-top: 6px; }
@media (min-width: 35em) {
  .xw-salon-step { grid-template-columns: minmax(9.5rem, 2fr) minmax(0, 5fr); }
  .xw-salon-name { grid-column: 1 / -1; }
  .xw-salon-time { border-bottom: 0; border-inline-end: 1px solid var(--x-hair); }
}

/* ---- two services, chosen to stand side by side ------------------------------------------- */
.xw-salon-pick { display: grid; align-items: end; gap: 10px 16px; max-width: 46rem; }
.xw-salon-with { color: var(--x-muted); font-weight: 600; }
@media (min-width: 35em) {
  .xw-salon-pick { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .xw-salon-with { padding-bottom: 12px; }
}

/* ---- a first name as the title of a card: never narrower than a finger ---------------------- */
.xw-salon-short { display: inline-block; min-width: 2.75rem; }

/* ---- the work gallery: nine pictures, three across from 900 px, so no picture is left alone on a row ---- */
@media (min-width: 56.25em) {
  .xw-salon-wall .xw-list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}