/* The Business Website engine (src/examples/ex-website.js): a multi-page presence.
   Every colour, radius and display face is the business's own (--x-* on main#main), so
   the same rules dress a restaurant, a salon, a hotel or a golf club. Phone first;
   wider screens add columns, never a different page. Widths are in em, as the kit's
   are, so a reader with larger text gets the narrower layout that has room for it. */

/* ---- header: what stays in view on a phone ----------------------------------------- */
.xw-quick { border-bottom: 1px solid var(--x-hair); background: var(--x-bg); }
/* The pages and the action share one line. Where they cannot (a reader's text doubled, a long label), the strip takes
   a second one and the action goes down onto it, still at the far edge and clear of the mark under the open page. */
.xw-quick ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; min-height: 48px; }
.xw-quick .x-link { color: var(--x-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.xw-quick .x-link[aria-current] { box-shadow: inset 0 -14px 0 -12px var(--x-accent); }
.xw-quick-cta { margin-inline-start: auto; }
@media (min-width: 30em) { .xw-quick-cta { display: none; } }
@media (min-width: 53.75em) { .xw-quick { display: none; } }
/* Just above the phone layout a long navigation and the action do not share a line. A business says which gives way:
   the action (its page is in the navigation), or the navigation (the phone header stays until there is room for both). */
@media (min-width: 53.75em) and (max-width: 67.4375em) {
  .xw-frame--tight-action .x-head .x-head-cta { display: none; }
  .xw-frame--tight-action .x-nav a { padding-inline: 10px; }
  .xw-frame--tight-nav .x-nav { display: none; }
  .xw-frame--tight-nav .x-menu-btn { display: inline-flex; }
  .xw-frame--tight-nav .xw-quick { display: block; }
}

/* ---- footer ------------------------------------------------------------------------- */
.xw-foot { display: grid; gap: 24px clamp(20px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.xw-foot-col { display: grid; align-content: start; gap: 4px; }
.xw-foot-h { color: var(--x-ink); font-weight: 700; }
.xw-foot-col:first-child .xw-foot-h { font: var(--x-display-weight, 600) 1.1875rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-foot-col ul { display: grid; margin-top: 4px; }
.xw-foot-col li { min-height: 36px; }

/* ---- a screen ------------------------------------------------------------------------ */
.xw-page { display: grid; align-content: start; gap: clamp(22px, 3.5vw, 36px); }
.xw-page > * { min-width: 0; }
.xw-pagehead { display: grid; gap: 10px; max-width: 46rem; }
.xw-kicker { 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-lede { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); }
.xw-prose { display: grid; gap: 14px; max-width: 42rem; }
.xw-block { display: grid; align-content: start; gap: 12px; min-width: 0; }
.xw-footnote { max-width: 46rem; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xw-cols { display: grid; gap: clamp(22px, 4vw, 56px); align-items: start; }
.xw-cols > * { min-width: 0; }
@media (min-width: 53.75em) { .xw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- landing page --------------------------------------------------------------------- */
.xw-hero { display: grid; align-items: center; gap: clamp(20px, 4vw, 56px); padding-block: clamp(24px, 5vw, 64px); }
.xw-hero-text { display: grid; align-content: center; gap: 14px; min-width: 0; }
.xw-hero h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3.375rem); }
.xw-hero-actions { margin-top: 6px; }
.xw-hero-media { min-width: 0; overflow: hidden; border-radius: calc(var(--x-radius, 8px) * 2); }
.xw-hero-media--own, .xw-detail-media--own { overflow: visible; border-radius: 0; }
.xw-hero--plain .xw-hero-text, .xw-hero--cover .xw-hero-text { max-width: 46rem; }
.xw-hero--cover .xw-hero-media { order: -1; }
@media (min-width: 53.75em) { .xw-hero:not(.xw-hero--plain, .xw-hero--cover) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.xw-open { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--x-muted); font-size: .9375rem; }
.xw-band { padding-block: clamp(28px, 5vw, 60px); border-top: 1px solid var(--x-hair); }
.xw-band--soft { border-top-color: transparent; background: var(--x-surface-2); }
.xw-band--soft + .xw-band { border-top-color: transparent; }
.xw-band-in { display: grid; gap: 18px; }
.xw-band-in > * { min-width: 0; }
.xw-band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.xw-band-lede { margin-top: -12px; color: var(--x-muted); }
.xw-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.xw-tiles { display: grid; gap: 22px clamp(20px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.xw-tile { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 2px solid var(--x-ink); }
.xw-teaser { display: grid; align-items: center; gap: 20px clamp(20px, 4vw, 56px); }
.xw-teaser-text { display: grid; gap: 12px; min-width: 0; }
.xw-teaser-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xw-teaser-media .x-img { border-radius: var(--x-radius, 8px); }
@media (min-width: 53.75em) { .xw-teaser { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---- a collection: tools, the group bar, the list ------------------------------------------- */
.xw-tools { display: grid; align-items: start; gap: 14px 40px; }
.xw-tools .x-search { position: relative; }
@media (min-width: 47.5em) { .xw-tools { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); } }
/* The group bar is the engine's one sticky element. On a phone it is a single row that scrolls sideways,
   with a soft edge where there is more; every choice stays reachable and the chosen one carries a tick. */
.xw-cats { margin-inline: calc(var(--x-gutter) * -1); padding: 4px var(--x-gutter); border-block: 1px solid var(--x-hair); background: var(--x-bg); }
.xw-cats .x-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xw-cats .x-chips { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: linear-gradient(90deg, var(--x-bg) 40%, transparent) 0 0 / 32px 100% no-repeat local, linear-gradient(270deg, var(--x-bg) 40%, transparent) 100% 0 / 32px 100% no-repeat local, linear-gradient(90deg, var(--x-hair), transparent) 0 0 / 14px 100% no-repeat scroll, linear-gradient(270deg, var(--x-hair), transparent) 100% 0 / 14px 100% no-repeat scroll; }
.xw-cats .x-chips::-webkit-scrollbar { display: none; }
.xw-cats .x-chip { flex: none; }
.xw-cats .x-chip-face { background: none; }
.xw-result { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 44px; }
.xw-result .x-count { color: var(--x-ink); font-weight: 600; }
.xw-active { color: var(--x-muted); font-size: .9375rem; }
.xw-result .x-btn { margin-inline-start: auto; }
.xw-group { display: grid; gap: 2px; }
.xw-group-head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 2px solid var(--x-ink); }
.xw-list { display: grid; gap: 0 clamp(20px, 4vw, 56px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.xw-list--cards { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.xw-list--large { gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* A row: the words lead and a small photograph sits beside them, so a list reads as a list with or without its pictures. */
.xw-row { flex-direction: row-reverse; align-items: flex-start; gap: 16px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--x-hair); border-radius: 0; background: none; }
.xw-row .x-card-media { flex: none; width: clamp(92px, 30%, 152px); border-radius: var(--x-radius, 8px); }
.xw-row .x-img--thumb { width: 100%; }
.xw-row .x-card-body { gap: 5px; padding: 0; }
.xw-row .x-card-title, .xw-card .x-card-title { font: var(--x-display-weight, 600) 1.1875rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-row .x-card-title:lang(th), .xw-card .x-card-title:lang(th), .xw-channel-big:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xw-row .x-card-meta { order: 3; font-size: .875rem; }
.xw-item-text { color: var(--x-ink); }
.xw-tags { display: grid; gap: 8px; }
/* On a phone a collection opens on its tools and its first items: the sentence under the heading waits for a wider
   screen, and the search field's hint is read out, not shown. A card takes the row's shape too: three tall
   photographs in a column would bury the words under them. */
@media (max-width: 37.4375em) {
  .xw-lede--wide { display: none; }
  .xw-tools .x-search .x-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xw-row .xw-item-text, .xw-card .xw-item-text { font-size: .9375rem; }
  .xw-list--cards { gap: 0; }
  .xw-card { flex-direction: row-reverse; align-items: flex-start; gap: 16px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--x-hair); border-radius: 0; background: none; }
  .xw-card .x-card-media { flex: none; width: clamp(92px, 30%, 152px); border-radius: var(--x-radius, 8px); }
  .xw-card .x-card-body { gap: 5px; padding: 0; }
  .xw-card .x-card-badge { position: static; margin-top: 6px; }
}
.xw-item-flag { display: flex; }

/* ---- one item on its own screen --------------------------------------------------------------- */
.xw-detail { display: grid; align-items: start; gap: clamp(18px, 4vw, 56px); }
@media (min-width: 53.75em) { .xw-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .xw-detail--plain { grid-template-columns: minmax(0, 46rem); } }
.xw-detail-media { min-width: 0; overflow: hidden; border-radius: calc(var(--x-radius, 8px) * 2); }
.xw-detail-text { display: grid; align-content: start; gap: 14px; min-width: 0; }
.xw-detail-actions { margin-top: 4px; }
.xw-points > div { display: grid; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--x-hair); }
.xw-points dt { font-weight: 600; }
@media (min-width: 45em) { .xw-points > div { grid-template-columns: minmax(9rem, 30%) 1fr; } }
.xw-sequence { display: grid; counter-reset: xw-step; }
.xw-sequence li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--x-hair); counter-increment: xw-step; }
.xw-sequence li::before { content: counter(xw-step); grid-row: span 2; color: var(--x-muted); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.xw-sequence strong, .xw-sequence span { grid-column: 2; }

/* ---- photographs with captions ------------------------------------------------------------------- */
.xw-gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.xw-shot { display: grid; align-content: start; gap: 8px; min-width: 0; }
.xw-shot-btn { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--x-radius, 8px); background: none; }
.xw-shot figcaption { color: var(--x-muted); font-size: .9375rem; }
/* One photograph leads and the others follow in a row under it. */
.xw-gallery--feature { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xw-gallery--feature .xw-shot:first-child { grid-column: 1 / -1; }
.xw-gallery--feature .xw-shot:not(:first-child) figcaption { font-size: .8125rem; }

/* ---- opening hours and the way there ----------------------------------------------------------- */
.xw-hours { display: grid; gap: 14px; max-width: 34rem; }
.xw-changes { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--x-radius, 8px); background: var(--x-surface-2); }
.xw-changes-h { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.xw-changes li + li { margin-top: 6px; }
.xw-address { display: grid; gap: 2px; }
.xw-address li:first-child { color: var(--x-muted); font-size: .875rem; }
.xw-directions .x-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ---- an enquiry ---------------------------------------------------------------------------------- */
.xw-split { display: grid; align-items: start; gap: clamp(24px, 5vw, 64px); }
@media (min-width: 56.25em) { .xw-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .xw-split--one { grid-template-columns: minmax(0, 40rem); } }
.xw-split-main, .xw-split-side { display: grid; align-content: start; gap: 18px; min-width: 0; }
.xw-fields { display: grid; gap: 18px 20px; }
.xw-field { display: grid; align-content: start; gap: 10px; min-width: 0; }
@media (min-width: 35em) { .xw-fields { grid-template-columns: 1fr 1fr; } .xw-field { grid-column: 1 / -1; } .xw-field--half { grid-column: auto; } }
.xw-summary { max-width: 40rem; padding: 4px 18px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xw-summary .x-fact:first-child { border-top: 0; }
.xw-summary dd { overflow-wrap: anywhere; }
.xw-side { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xw-side h2 { font-size: 1.1875rem; }
.xw-channels li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xw-channel-text { display: grid; min-width: 0; }
.xw-channels .x-btn { flex: none; white-space: nowrap; }
.xw-channel-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.xw-channel-big { font: var(--x-display-weight, 600) 1.375rem/var(--x-lh-head) var(--x-display, var(--x-text)); overflow-wrap: anywhere; }
/* A pointer to another example of the same business: drawn apart from the business's own content. */
.xw-aside { display: grid; gap: 8px; padding: 16px 18px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); }

@media (hover: hover) and (pointer: fine) {
  .xw-row.x-card--link:hover { transform: none; border-color: var(--x-hair); }
  .xw-row.x-card--link:hover .x-card-title a, .xw-more:hover, .xw-quick .x-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .xw-shot-btn:hover .x-img { opacity: .92; }
}