/* What an academy adds to the Lead-to-Booking engine (src/examples/ex-booking-academy.js): cards to choose a
   lesson or a coach from, a line of small facts, and the timetable of group sessions with what is left in each.
   Layout only, in the engine's own xb- prefix; every colour, radius and display face is the business's
   (--x-* on main#main). Phone first: a wider screen gives a card's picture more room and lines the timetable up in columns. */

/* ---- a line of small facts ---- */
.xb-ac-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.xb-ac-tags li { padding: 1px 9px; border: 1px solid var(--x-hair); border-radius: 999px; background: var(--x-surface-2); font-size: .8125rem; line-height: var(--x-lh-label); }

/* ---- cards to choose one from: a kind of lesson, a coach ---- */
.xb-ac-choices { display: grid; gap: 12px; min-width: 0; padding: 0; border: 0; }
.xb-ac-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.xb-ac-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.xb-ac-face { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; height: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); transition: background-color var(--x-fast) ease, border-color var(--x-fast) ease; }
.xb-ac-choice--plain .xb-ac-face { grid-template-columns: minmax(0, 1fr); padding-inline-start: 16px; }
.xb-ac-media { align-self: start; overflow: hidden; border-radius: calc(var(--x-radius, 8px) - 3px); }
.xb-ac-media .x-img { width: 100%; }
.xb-ac-body { display: grid; align-content: start; gap: 5px; min-width: 0; padding-inline-end: 24px; }
.xb-ac-title { font: 600 1.0625rem/var(--x-lh-label) var(--x-text); }
.xb-ac-kicker, .xb-ac-text { color: var(--x-muted); font-size: .9375rem; line-height: var(--x-lh); }
.xb-ac-kicker { font-size: .875rem; }
.xb-ac-why { font-size: .9375rem; font-weight: 600; line-height: var(--x-lh); }
.xb-ac-choice input:checked + .xb-ac-face { border-color: var(--x-accent); background: color-mix(in srgb, var(--x-accent) 10%, var(--x-surface)); box-shadow: inset 0 0 0 1px var(--x-accent); }
.xb-ac-choice input:checked + .xb-ac-face::after { content: ""; position: absolute; top: 14px; right: 16px; width: 7px; height: 13px; border: solid var(--x-accent-ink); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.xb-ac-choice input:focus-visible + .xb-ac-face { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.xb-ac-choice--off { cursor: default; }
.xb-ac-choice--off .xb-ac-face { border-style: dashed; background: var(--x-surface-2); }
.xb-ac-choice--off .xb-ac-title { color: var(--x-muted); }
.xb-ac-choice--off .xb-ac-tags li { background: none; }
@media (min-width: 37.5em) {
  .xb-ac-face { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; }
}

/* Where to come on the day, under a booking: a small picture with its line beside it, no wider than the record above. */
.xb-ac-figure { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 44rem; padding: 12px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xb-ac-figure .x-img { width: 100%; border-radius: calc(var(--x-radius, 8px) - 3px); }
.xb-ac-figure figcaption { display: grid; gap: 2px; }

/* A second tag beside a booking's status (its class called off, the academy closed on its date), on the record and
   in the list of bookings: the two keep a gap between them and go to a second line together on a narrow phone. */
.xb-record-head p:has(> .xb-ac-flag), .xb-ac-flags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Other places to go from the first step: each link has a line to itself, tall enough that no two share a touch. */
.xb-ac-more { display: grid; justify-items: start; }
.xb-ac-more li { display: flex; align-items: center; min-height: 44px; }

/* A lesson booking has five parts, too many for the one-line strip a phone keeps in view: it names the lesson,
   then the last two things chosen. The whole of it is in the panel on a wide screen, and on the review. */
@media (max-width: 56.24em) {
  .xb-sum-row:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
  /* A long lesson name in Thai can still take the strip to a third line on the narrowest phones: what is focused stops below that. */
  html:has(.xb-side) { scroll-padding-top: calc(var(--ex-top) + 112px); }
}
/* Where the text is very large for the screen (the narrowest phone, or a reader's text doubled), the strip gives
   its room back and scrolls away with the page. */
@media (max-width: 20em) {
  .xb-side.x-stick { position: static; }
}
/* A field half below the screen is not brought up when Tab reaches it: with room kept at the foot, it counts as
   out of view and is, so the last field of a form (a tall one, for a note) is never typed into half hidden. */
html:has(.xb-flow) { scroll-padding-bottom: 7.5rem; }
.xb-ac-cannot { display: grid; gap: 2px; }

/* ---- the timetable: day by day, a row for each session ---- */
.xb-ac-tt { display: grid; gap: 26px; }
.xb-ac-day { display: grid; gap: 10px; min-width: 0; }
.xb-ac-day-h { padding-bottom: 8px; border-bottom: 1px solid var(--x-hair); font-size: 1.125rem; }
.xb-ac-day-h .x-hint { font: 400 .875rem/var(--x-lh-label) var(--x-text); }
.xb-ac-rows { display: grid; gap: 10px; }
.xb-ac-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time act" "what what" "left left"; gap: 8px 16px; align-items: center; min-width: 0; padding: 12px 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xb-ac-time { grid-area: time; font: var(--x-display-weight, 600) 1.0625rem/var(--x-lh-head) var(--x-display, var(--x-text)); font-variant-numeric: tabular-nums; }
.xb-ac-time:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xb-ac-what { grid-area: what; display: grid; gap: 4px; min-width: 0; }
.xb-ac-left { grid-area: left; min-width: 0; }
.xb-ac-act { grid-area: act; justify-self: end; }
.xb-ac-act .x-btn { min-width: 44px; }
.xb-ac-row .x-pill { white-space: normal; }
@media (min-width: 53.75em) {
  .xb-ac-row { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(11rem, 14rem) 5.5rem; grid-template-areas: "time what left act"; gap: 16px 20px; padding: 14px 18px; }
}

@media (hover: hover) and (pointer: fine) {
  .xb-ac-choice:not(.xb-ac-choice--off):hover .xb-ac-face { border-color: var(--x-ink); }
}
@media (forced-colors: active) {
  .xb-ac-choice input:checked + .xb-ac-face { outline: 2px solid Highlight; outline-offset: -2px; }
}