/* The new homepage: the hero and the live sections.
 *
 * Page-only rules, so they live here rather than in css/components/ and stay
 * outside the 15 KB component budget. Markup: templates/public/home.html.
 *
 * Every box here sets its own margins. On a previewed page Bootstrap sits in
 * the `legacy` layer and outranks the element reset in base.css, so anything
 * that leaned on that reset would drift apart the moment the old windows are
 * on the page (CONVENTIONS.md 6.4).
 */

/* The offer bar: one still line under the menu, in the offer colour; the
   close button is a full tap target at its end. Staff with no offer running
   see a quieter strip that holds the pencil. */
.ui-home__offer {
  background: var(--ui-color-offer);
  color: var(--ui-color-brand);
}

.ui-home__offer--empty {
  background: var(--ui-color-sunken);
  color: var(--ui-color-ink-muted);
}

.ui-home__offer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-3);
  padding-block: var(--ui-space-1);
}

.ui-home__offer-text {
  margin: 0;
  padding-block: var(--ui-space-2);
  font-size: var(--ui-text-sm);
  text-align: center;
}

.ui-home__offer-link {
  color: var(--ui-color-brand);
  font-weight: var(--ui-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.ui-home__offer-link:hover {
  color: var(--ui-color-brand-hover);
}

.ui-home__offer-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ui-touch);
  height: var(--ui-touch);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-color-ink-muted);
  cursor: pointer;
}

.ui-home__offer-close:hover {
  color: var(--ui-color-ink);
}

.ui-home__offer-close:focus-visible,
.ui-home__offer-link:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-home__offer-close-icon {
  display: block;
}

/* The hero. On a phone the photo sits on top and the text below it, on the
   dark band. From 900 px the photo fills the section and the text sits over
   its left side, on a scrim that is darkest under the text: the stop at 44rem
   is where the text column ends at any width, so the text never reaches the
   lighter part. TEXT_PAIRS checks the text against the scrim over white.
   The measure lives on .ui-home__hero-inner and not on .ui-container: that
   class centres itself, so a max-width on it would centre the whole hero. */

.ui-home__hero {
  position: relative;
  background: var(--ui-color-band);
  color: var(--ui-color-on-band);
}

.ui-home__hero-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
}

.ui-home__hero-content {
  padding-block: var(--ui-space-7) var(--ui-space-8);
}

.ui-home__hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-4);
  max-width: 40rem;
}

.ui-home__eyebrow {
  margin: 0;
  color: var(--ui-color-on-band-soft);
}

.ui-home__title {
  margin: 0;
  color: var(--ui-color-on-band);
}

.ui-home__lead {
  margin: 0;
  color: var(--ui-color-on-band-soft);
}

.ui-home__actions {
  margin: 0;
  margin-top: var(--ui-space-2);
}

.ui-home__rating {
  margin: 0;
  color: var(--ui-color-on-band-soft);
}

@media (min-width: 900px) {
  .ui-home__hero {
    display: grid;
    min-height: 35rem;
  }

  .ui-home__hero-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: center;
  }

  .ui-home__hero-content {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: var(--ui-space-10);
    background: linear-gradient(90deg, var(--ui-color-hero-scrim) 0, var(--ui-color-hero-scrim-mid) 44rem, var(--ui-color-hero-scrim-end) 100%);
  }

  .ui-home__hero-content > .ui-container {
    width: 100%;
  }

  .ui-home__hero-inner {
    gap: var(--ui-space-5);
  }
}

/* The live sections (templates/public/home/). The cards, the strip and the
   grids are the shared components; what follows is only what the homepage
   adds to them. */

/* "The whole timetable" beside a section heading. */
.ui-home__more,
.ui-home__inline-link {
  color: var(--ui-color-brand);
  font-weight: var(--ui-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ui-home__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-touch);
  margin: 0;
}

.ui-home__more:hover,
.ui-home__inline-link:hover {
  color: var(--ui-color-brand-hover);
}

/* A free place is one link, card-sized, so a thumb cannot miss it. */
.ui-home__card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.ui-home__card-link:hover {
  color: inherit;
  text-decoration: none;
  background: var(--ui-color-surface);
}

.ui-home__card-link:focus-visible,
.ui-home__more:focus-visible,
.ui-home__inline-link:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

/* It says it opens as the class cards' free-place box does (.ui-home__slot):
   the brand's arrow, and a brand border under the pointer, the studio's
   colour kept on the left edge (owner, 2026-10-06). The arrow ends the last
   line, so it takes no width from the name, and the arrows of a row line up. */
.ui-home__place:hover {
  border-top-color: var(--ui-color-brand);
  border-right-color: var(--ui-color-brand);
  border-bottom-color: var(--ui-color-brand);
}

.ui-home__place-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-top: auto;
}

.ui-home__card-link:hover .ui-home__slot-go {
  background: var(--ui-color-brand-hover);
}

.ui-home__seats {
  margin: 0;
  color: var(--ui-color-seats-many);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__seats--few {
  color: var(--ui-color-seats-few);
}

/* The class cards: one column on a phone, then 2, 3, and 4 on a large
   screen, where 3 full-width columns make each card (and its photo) too big.
   A wrapping row rather than a grid, so a last row that is not full sits
   centred instead of hanging left: 9 classes in 4 columns end with one card.
   The photo's sizes hint in _classes.html follows these columns. */
.ui-home__class-grid {
  display: grid;
  gap: var(--ui-space-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .ui-home__class-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ui-home__class-card {
    flex: 0 0 calc((100% - var(--ui-space-5)) / 2);
    min-width: 0;
  }
}

@media (min-width: 900px) {
  .ui-home__class-card {
    flex: 0 0 calc((100% - 2 * var(--ui-space-5)) / 3);
  }
}

@media (min-width: 1600px) {
  .ui-home__class-card {
    flex: 0 0 calc((100% - 3 * var(--ui-space-5)) / 4);
  }
}

/* A class card opens its window: the title's button stretches over the
   whole card, so a tap anywhere is a tap on the one real control. */
.ui-home__class-card {
  position: relative;
}

.ui-home__class-card:hover {
  border-color: var(--ui-color-line-button);
}

.ui-home__class-open {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ui-home__class-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ui-home__class-open:focus-visible {
  outline: none;
}

.ui-home__class-open:focus-visible::after {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: -2px;
}

/* Its window: level, name, subtitle, length and price, then the whole
   description; booking and closing at the end (the method's window ends the
   same way). */
.ui-home__class-level,
.ui-home__class-title,
.ui-home__class-subtitle {
  margin: 0 0 var(--ui-space-2);
}

.ui-home__class-subtitle,
.ui-home__class-meta {
  color: var(--ui-color-ink-soft);
}

.ui-home__class-meta {
  margin: 0;
  font-size: var(--ui-text-sm);
}

.ui-home__class-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  margin: var(--ui-space-6) 0 0;
}

.ui-home__class-close {
  margin: 0;
}

/* A window takes the focus itself when it opens (js/public/dialogs.js), so a
   screen reader starts at its top; it needs no ring of its own - the controls
   inside keep theirs. */
.ui-home__review-dialog:focus-visible {
  outline: none;
}

.ui-home__price {
  color: var(--ui-color-ink);
  font-weight: var(--ui-weight-semibold);
}

/* "· vai ar abonementu", as the class window says it: quieter than the price. */
.ui-home__price-note {
  color: var(--ui-color-ink-muted);
  font-weight: var(--ui-weight-regular);
}

/* A class card is plain white (owner, 2026-10-05): no band per level, so the
   head is not a box of its own. It runs straight into the description, at the
   same distance as the body's own parts (the card's 1.125rem + 1rem was the
   gap between two boxes). */
.ui-home__class-head {
  padding-bottom: 0;
}

.ui-home__class-body {
  padding-top: var(--ui-space-3);
}

/* The level above the name, grey like every other small label on the page. */
.ui-home__card-level {
  margin: 0;
  color: var(--ui-color-ink-muted);
}

/* Under a class card's title. A step above the description under it, a step
   below the title. */
.ui-home__subtitle {
  margin: 0;
  color: inherit;
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-medium);
  line-height: var(--ui-leading-snug);
}

/* The price line is long enough to need its own row in a narrow card. */
.ui-home__class-foot {
  flex-wrap: wrap;
  row-gap: var(--ui-space-1);
}

/* A card with no next free place shows the long description in the room the
   box takes in the cards beside it, and no more: the text takes no height of
   its own (it is laid over the block), so it never makes the row taller. The
   block grows into the row from at least six lines, what a phone, or a card
   alone in its row, shows. The text fades out at the foot, where "Vairāk →"
   stands. Being positioned, the block paints above the title's stretched
   button, so it lets taps through to it: without that, the text and "Vairāk
   →" opened nothing (owner, 2026-10-06). */
.ui-home__class-long {
  position: relative;
  flex: 1 1 0;
  min-height: calc(6 * 1.55 * var(--ui-text-md));
  pointer-events: none;
}

.ui-home__class-long-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--ui-color-ink) calc(100% - 4.25rem), transparent calc(100% - 1.75rem));
  mask-image: linear-gradient(to bottom, var(--ui-color-ink) calc(100% - 4.25rem), transparent calc(100% - 1.75rem));
}

/* "Vairāk →" says the card opens: the title's button covers the whole card.
   It is not a control of its own, so it takes no tap and no focus. It ends
   the description's last line, or the faded long one. */
.ui-home__class-more {
  margin: 0;
  color: var(--ui-color-brand);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.ui-home__class-more--end {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* The class's next free place: a tinted box that is the link to its booking
   window, with an arrow in the brand's colour to say so. It rises above the
   card's stretched button (.ui-home__class-open), or a tap on it would open
   the description instead. It follows the description directly, with no
   gap after "Vairāk →" (owner, 2026-10-05); the length and price keep to the
   bottom of the card, so the cards' feet line up across a row. */
.ui-home__slot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin: 0;
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-color-sunken);
  color: var(--ui-color-ink);
  text-decoration: none;
}

.ui-home__slot:hover {
  border-color: var(--ui-color-brand);
  color: var(--ui-color-ink);
  text-decoration: none;
}

.ui-home__slot:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-home__slot-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ui-space-1);
  min-width: 0;
}

.ui-home__slot-label {
  display: block;
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-xs);
}

.ui-home__slot-when {
  display: block;
  margin: 0;
  color: var(--ui-color-ink);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__slot-where {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
}

.ui-home__slot-go {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-brand);
  color: var(--ui-color-on-band);
}

.ui-home__slot:hover .ui-home__slot-go {
  background: var(--ui-color-brand-hover);
}

.ui-home__slot-icon {
  display: block;
}

/* The photos at the top of the class and studio cards ({% picture %}). The
   box keeps its shape before the file arrives, so nothing below it moves; the
   card's own radius and overflow round the top corners. */
.ui-home__photo,
.ui-home__studio-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: cover;
  background: var(--ui-color-sunken);
}

/* Both 3:2, the shape the studio's photos are taken in: a class photo shows
   whole, and the text under it starts higher on a phone. */
.ui-home__photo,
.ui-home__studio-photo {
  aspect-ratio: 3 / 2;
}

/* The design's studio photo is a wide strip over the card; the rendition is
   3:2, so the strip shows its middle. */
@media (min-width: 900px) {
  .ui-home__studio-photo {
    height: 14.5rem;
    aspect-ratio: auto;
  }
}

/* A studio card's photo opens its gallery (css/windows/gallery.css). The
   gallery pencil sits on the photo too, in the corner the text pencil takes
   elsewhere. */
.ui-home__studio-media {
  position: relative;
}

.ui-home__studio-media .ui-home__pencil--photo {
  right: var(--ui-space-3);
}

/* Slice 4: the sections of the owner's design, in page order. */

/* A section with a pencil is its positioning box; the pencil sits in its top
   right corner, for staff only ({% pencil %}). */
.ui-home__section {
  position: relative;
}

.ui-home__pencil {
  position: absolute;
  top: var(--ui-space-3);
  right: var(--ui-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ui-color-line-button);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-surface);
  color: var(--ui-color-brand);
  box-shadow: var(--ui-shadow-raised);
  cursor: pointer;
}

.ui-home__pencil:hover {
  background: var(--ui-color-sunken);
}

.ui-home__pencil:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-home__pencil-icon {
  display: block;
}

/* A photo pencil sits just left of its section's text pencil. */
.ui-home__pencil--photo {
  right: calc(var(--ui-space-3) + 2.25rem + var(--ui-space-2));
}

/* Beside the phone in the top bar the pencil sits in the flow. */
.ui-home__pencil--inline {
  position: static;
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: none;
}

/* The pencil's window (js/public/pencil.js). The form inside is crispy's
   Bootstrap markup, styled by the legacy layer the page already carries. */
.ui-home__edit {
  width: min(44rem, calc(100% - 2 * var(--ui-space-4)));
  max-height: calc(100vh - 2 * var(--ui-space-7));
  margin: auto;
  padding: var(--ui-space-6);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
  color: var(--ui-color-ink);
  box-shadow: var(--ui-shadow-raised);
  overflow: hidden;
}

/* Open, the window is a column: the form scrolls, the buttons stay in view.
   Only when open - a display rule on a closed dialog would show it. */
.ui-home__edit[open] {
  display: flex;
  flex-direction: column;
}

.ui-home__edit-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ui-home__edit::backdrop {
  background: var(--ui-color-scrim);
}

.ui-home__edit-title {
  margin: 0 0 var(--ui-space-4);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__edit-notice,
.ui-home__edit-error {
  margin: var(--ui-space-1) 0 var(--ui-space-3);
  color: var(--ui-color-seats-few);
  font-size: var(--ui-text-sm);
}

.ui-home__edit-loading {
  margin: 0;
  color: var(--ui-color-ink-soft);
}

.ui-home__edit-form {
  margin: 0;
}

/* The gallery pencil's preview of each photo, above its position. */
.ui-home__edit-thumb {
  display: block;
  width: 7.5rem;
  height: auto;
  margin: 0 0 var(--ui-space-2);
  border-radius: var(--ui-radius-sm);
  vertical-align: top;
}

/* A position is a number or two; the legacy layer would stretch it. */
.ui-home__edit-position {
  width: 5rem;
}

/* A photo pencil's file picker (Content/forms.py). Crispy writes Bootstrap 4
   markup, and Bootstrap 5 no longer makes the picker a block, so its hint
   would run on beside the button; as a block, the hint starts below it. Its
   own width is wider than the window on a phone. */
.ui-home__edit-file {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--ui-space-2);
}

.ui-home__edit-actions {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  padding-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-color-line);
  margin-top: var(--ui-space-4);
}

/* Four facts under the hero: 2 x 2 on a phone, one row from 900 px. */
.ui-home__facts {
  position: relative;
  background: var(--ui-color-surface);
  border-bottom: 1px solid var(--ui-color-line);
}

.ui-home__facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-home__fact {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-4) var(--ui-gutter);
  border-right: 1px solid var(--ui-color-line);
  border-bottom: 1px solid var(--ui-color-line);
}

.ui-home__fact-title {
  margin: 0;
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__fact-text {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
}

/* "2 studijas Rīgā" leads to the studios section, six screens down on a
   phone: the whole cell is the link, the title in the brand colour with an
   arrow pointing down the page, the studio names underlined. */
.ui-home__fact-link {
  color: inherit;
  text-decoration: none;
}

.ui-home__fact-link:hover {
  background: var(--ui-color-sunken);
}

.ui-home__fact-link:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: -2px;
}

.ui-home__fact-title--link {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  color: var(--ui-color-brand);
}

.ui-home__fact-icon {
  flex: none;
}

.ui-home__fact-text--link {
  text-decoration: underline;
  text-decoration-color: var(--ui-color-line-strong);
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .ui-home__facts-grid {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }

  .ui-home__fact {
    padding: var(--ui-space-5) var(--ui-space-7);
    border-bottom: 0;
  }

  /* The first fact lines up with the headings below it. */
  .ui-home__fact:first-child {
    padding-left: var(--ui-gutter);
  }
}

/* Headings the sections share. A section's one-line explainer sits under its
   heading, never floating at the far right of it. */
.ui-home__head-stack {
  margin: 0 0 var(--ui-space-6);
}

.ui-home__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.ui-home__eyebrow-muted {
  margin: 0;
  color: var(--ui-color-ink-muted);
}

/* "Kāpēc PiYo Studio Rīgā?": the question on the left, the reasons stacked on
   the right, each under a brand rule with its number beside it. On a phone
   the question simply heads the list. */
.ui-home__why {
  display: grid;
  gap: var(--ui-space-6);
}

.ui-home__why-title {
  margin: 0;
}

.ui-home__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-6);
}

.ui-home__reason {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--ui-space-4);
  padding-top: var(--ui-space-4);
  border-top: 2px solid var(--ui-color-brand);
}

.ui-home__reason-body {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

@media (min-width: 900px) {
  .ui-home__why {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--ui-space-9);
    align-items: start;
  }

  /* The question as a title card: centred both ways in its column, facing
     the list, in hero-sized type broken evenly over two lines. */
  .ui-home__why-title {
    align-self: center;
    justify-self: center;
    max-width: 12ch;
    font-size: var(--ui-text-h1);
    line-height: var(--ui-leading-tight);
    text-align: center;
  }
}

.ui-home__number,
.ui-home__step-number {
  margin: 0;
  color: var(--ui-color-brand);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__number {
  padding-top: 0.3rem;
  font-size: var(--ui-text-xs);
  letter-spacing: var(--ui-tracking-eyebrow);
}

.ui-home__reason-title,
.ui-home__step-title {
  margin: 0;
}

.ui-home__reason-text,
.ui-home__step-text {
  margin: 0;
  color: var(--ui-color-ink-soft);
  line-height: var(--ui-leading-relaxed);
}

/* "Kas ir PiYo metode?": the photo on top on a phone; from 900 px the text
   and the photo share the width, the photo from edge to edge. */
.ui-home__method {
  display: flex;
  flex-direction: column-reverse;
  background: var(--ui-color-sunken);
}

.ui-home__method-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-4);
  padding: var(--ui-section-pad) var(--ui-gutter);
}

.ui-home__method-lead,
.ui-home__method-more {
  margin: 0;
  max-width: 58ch;
  line-height: var(--ui-leading-relaxed);
}

.ui-home__method-more {
  color: var(--ui-color-ink-soft);
}

.ui-home__method-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 900px) {
  .ui-home__method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* The text is a 34rem block centred in its half, its lines still left-
     aligned: centred paragraphs make the eye hunt for each line's start. */
  .ui-home__method-text {
    justify-content: center;
    padding-inline: max(var(--ui-gutter), (100% - 34rem) / 2);
  }

  .ui-home__method-photo {
    height: 100%;
    min-height: 27.5rem;
    aspect-ratio: auto;
  }
}

/* "Kas vada studiju". */
.ui-home__founder {
  display: grid;
  gap: var(--ui-space-7);
  align-items: start;
}

.ui-home__founder-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--ui-radius-lg);
}

.ui-home__founder-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-4);
}

.ui-home__founder-name {
  margin: 0;
  font-size: var(--ui-text-h3);
}

.ui-home__founder-bio {
  margin: 0;
  max-width: 60ch;
  font-size: var(--ui-text-lg);
  line-height: var(--ui-leading-relaxed);
}

.ui-home__chips {
  margin: 0;
  gap: var(--ui-space-2);
}

@media (min-width: 900px) {
  .ui-home__founder {
    grid-template-columns: 23.75rem minmax(0, 1fr);
    gap: var(--ui-space-9);
  }
}

/* The method's window opens with the section's own question. */
.ui-home__method-window-title {
  margin: 0;
}

/* The last line of Linna's window: a private class is a phone call. */
.ui-home__founder-call {
  margin: var(--ui-space-5) 0 0;
  font-weight: var(--ui-weight-semibold);
}

/* The studio cards. */
.ui-home__studio-body {
  position: relative;
  gap: var(--ui-space-4);
}

.ui-home__studio-name {
  margin: 0;
  padding-right: var(--ui-space-8);
}

.ui-home__studio-name--1 {
  color: var(--ui-color-brand);
}

.ui-home__studio-name--2 {
  color: var(--ui-color-brand-2);
}

.ui-home__details {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin: 0;
  font-size: var(--ui-text-sm);
}

.ui-home__detail {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--ui-space-3);
}

.ui-home__detail-key {
  margin: 0;
  color: var(--ui-color-ink-muted);
  font-weight: var(--ui-weight-regular);
}

.ui-home__detail-value {
  margin: 0;
  color: var(--ui-color-ink);
}

.ui-home__studio-foot {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-3);
}

.ui-home__studio-actions {
  width: 100%;
  justify-content: space-between;
}

.ui-home__studio-button {
  color: var(--ui-color-on-band);
}

.ui-home__studio-button--1 {
  background: var(--ui-color-brand);
}

.ui-home__studio-button--2 {
  background: var(--ui-color-brand-2);
}

.ui-home__studio-button:hover {
  color: var(--ui-color-on-band);
  background: var(--ui-color-brand-hover);
}

/* "Pirmā reize? Trīs soļi.": one line through three numbered stops, down the
   left on a phone and across from 900 px. Each number sits on the line, its
   background the section's, so the line seems to pass behind it. */
.ui-home__steps {
  position: relative;
  display: grid;
  gap: var(--ui-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-home__steps::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  border-left: 2px solid var(--ui-color-line-button);
}

.ui-home__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin: 0;
  padding-left: 3.75rem;
}

.ui-home__step-number {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--ui-color-brand);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-sunken);
  font-size: var(--ui-text-md);
}

.ui-home__step-title {
  padding-top: 0.4rem;
}

/* Where the steps lead: booking, centred under the line, with the price. */
.ui-home__steps-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-7);
  text-align: center;
}

.ui-home__steps-button {
  width: 100%;
}

.ui-home__steps-note {
  margin: 0;
  color: var(--ui-color-ink-soft);
}

@media (min-width: 600px) {
  .ui-home__steps-button {
    width: auto;
  }
}

@media (min-width: 900px) {
  .ui-home__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-7);
  }

  /* From the first number to the last: the last column's width, less half a
     number, short of the right edge. */
  .ui-home__steps::before {
    top: 1.25rem;
    right: calc((100% - 2 * var(--ui-space-7)) / 3 - 1.25rem);
    bottom: auto;
    left: 1.25rem;
    border-top: 2px solid var(--ui-color-line-button);
    border-left: 0;
  }

  .ui-home__step {
    padding-top: 3.75rem;
    padding-left: 0;
  }

  .ui-home__step-title {
    padding-top: 0;
  }
}

/* The reviews: equal cards in one row that scrolls sideways at every width.
   From 900 px three cards show with the edge of a fourth, which says there is
   more; on a phone, one card and the edge of the next. Every card is as tall
   as the tallest, and the text stops at six lines. */
.ui-home__reviews {
  display: flex;
  gap: var(--ui-space-5);
  margin-inline: calc(-1 * var(--ui-gutter));
  padding: var(--ui-space-1) var(--ui-gutter) var(--ui-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ui-gutter);
}

.ui-home__reviews:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: -2px;
}

.ui-home__review {
  display: flex;
  flex: 0 0 min(19rem, 85%);
  flex-direction: column;
  gap: var(--ui-space-4);
  margin: 0;
  padding: var(--ui-space-6);
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-card);
  scroll-snap-align: start;
}

.ui-home__review-by {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  margin: 0;
}

.ui-home__review-photo {
  display: block;
  flex: none;
  width: 5rem;
  height: 5rem;
  margin: 0;
  border-radius: var(--ui-radius-pill);
  object-fit: cover;
}

.ui-home__review-who {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.ui-home__review-name {
  color: var(--ui-color-ink-strong);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
}

.ui-home__review-role {
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-snug);
}

.ui-home__review-text {
  display: -webkit-box;
  margin: 0;
  padding-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-color-line);
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading-relaxed);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.ui-home__review-more {
  align-self: flex-start;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-color-brand);
  font: inherit;
  font-weight: var(--ui-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ui-home__review-more:hover {
  color: var(--ui-color-brand-hover);
}

.ui-home__review-more:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

/* The whole review, in a window of its own. */
.ui-home__review-dialog {
  width: min(40rem, calc(100% - 2 * var(--ui-space-4)));
  max-height: calc(100vh - 2 * var(--ui-space-7));
  margin: auto;
  padding: var(--ui-space-7);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
  color: var(--ui-color-ink);
  box-shadow: var(--ui-shadow-raised);
  overflow-y: auto;
}

.ui-home__review-dialog::backdrop {
  background: var(--ui-color-scrim);
}

.ui-home__review-full {
  margin: var(--ui-space-5) 0 0;
  padding-top: var(--ui-space-5);
  border-top: 1px solid var(--ui-color-line);
  line-height: var(--ui-leading-relaxed);
}

.ui-home__review-close {
  display: flex;
  justify-content: flex-end;
  margin: var(--ui-space-6) 0 0;
}

@media (min-width: 900px) {
  .ui-home__review {
    flex-basis: calc((100% - 2 * var(--ui-space-5)) / 3 - 2rem);
  }
}

/* Partners: the heading, each logo and its name, all centred. Every logo
   sits in the same 4rem-tall box, so logos of different shapes share one
   baseline and their names line up beneath. */
.ui-home__partners-title {
  margin: 0 0 var(--ui-space-6);
  text-align: center;
}

/* A centred row rather than a grid, so two or three partners sit in the
   middle too: two to a row on a phone, up to four from 900 px. */
.ui-home__partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-6) var(--ui-space-5);
}

.ui-home__partner {
  flex: 0 1 calc(50% - var(--ui-space-5));
  /* A wide logo must shrink to the column, not push its item to a new row. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-3);
  color: var(--ui-color-ink-nav);
  font-weight: var(--ui-weight-semibold);
  text-align: center;
  text-decoration: none;
}

.ui-home__partner:hover {
  color: var(--ui-color-brand);
}

/* One box height for every logo, the logo centred in it, so the names line
   up whatever each logo's shape. The logo's own width and height attributes
   carry its area-balanced size (the logo tag); on a narrow phone column it
   shrinks with its proportions kept. The trimmed file's white background is
   already transparent (core/images.py trim), so no white box shows. */
.ui-home__partner-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
}

.ui-home__partner-logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

@media (min-width: 900px) {
  .ui-home__partner {
    flex-basis: calc(25% - var(--ui-space-5));
  }
}

/* The closing band. */
.ui-home__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-5);
}

.ui-home__cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.ui-home__cta-title,
.ui-home__cta-next {
  margin: 0;
}

.ui-home__cta-next {
  color: var(--ui-color-ink-soft);
}

.ui-home__cta-actions {
  margin-left: auto;
}

/* A free place's studio, as the class window names it: its short name in the
   brand colour, with the studio's dot - a marker, not a paint. The class
   cards' free-place box uses the same dot. */
.ui-home__where {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-color-brand);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-2xs);
  font-weight: var(--ui-weight-medium);
  letter-spacing: var(--ui-tracking-eyebrow);
  text-transform: uppercase;
}

.ui-home__dot {
  display: block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-dot-1);
}

.ui-home__dot--2 {
  background: var(--ui-color-dot-2);
}