/**
 * Review Showcase — [homerunner-reviews] front-end styles.
 *
 * Theme neutral by constraint: fonts and text color inherit the active
 * theme, so the cards read as part of the page they sit on. The shortcode
 * sets its per-placement values (columns, line clamp, image ratio, star
 * color) as custom properties on the wrapper; everything below is static.
 *
 * Theming API — override any of these on .hrtk-rv with one rule:
 *
 *   --hrtk-rv-star      star color
 *   --hrtk-rv-gap       space between cards
 *   --hrtk-rv-pad       card inner padding
 *   --hrtk-rv-radius    card corner radius
 *   --hrtk-rv-line      borders, empty stars, quiet rules
 *   --hrtk-rv-soft      image placeholder + host-reply background
 *   --hrtk-rv-card-bg   card background (transparent unless card_style="shadow")
 *
 * Columns step on the BLOCK's own width where container queries exist, so
 * a showcase dropped into a narrow builder column still gets the right
 * card count; the viewport breakpoints below are the fallback.
 */

.hrtk-rv {
  --hrtk-rv-star: #e9a13b;
  --hrtk-rv-gap: 1.25rem;
  --hrtk-rv-pad: 1.35rem;
  --hrtk-rv-radius: 14px;
  --hrtk-rv-line: rgba(128, 128, 128, 0.26);
  --hrtk-rv-soft: rgba(128, 128, 128, 0.08);
  /* One column that may shrink to nothing: see the container note below. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
}

.hrtk-rv *,
.hrtk-rv *::before,
.hrtk-rv *::after {
  box-sizing: border-box;
}

.hrtk-rv [hidden] {
  display: none !important;
}

.hrtk-rv__heading {
  margin: 0 0 1.25rem;
}

.hrtk-rv--align-center .hrtk-rv__heading {
  text-align: center;
}

/* show_summary="1": the section's numbers, between the heading and the
   cards. The star row reuses the card's rules. */
.hrtk-rv__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.6em;
  margin: 0 0 1rem;
  font-weight: 600;
}

.hrtk-rv__heading + .hrtk-rv__summary {
  margin-top: -0.6rem;
}

/* Inside a card the star row owns its line (flex-basis: 100% below); here
   it sits beside the text, and both centre together when the section does. */
.hrtk-rv__summary .hrtk-rv-card__stars {
  flex-basis: auto;
}

.hrtk-rv--align-center .hrtk-rv__summary {
  justify-content: center;
}

/* topics="1": what guests mention, as text until the chips become searches. */
.hrtk-rv__topics {
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.hrtk-rv__topics-label {
  font-weight: 600;
}

.hrtk-rv__topic {
  white-space: nowrap;
}

.hrtk-rv__topic-count,
.hrtk-rv__topics-sep {
  opacity: 0.72;
}

.hrtk-rv--align-center .hrtk-rv__topics {
  text-align: center;
}

/* ---------------------------------------------------------------------
 * Track: grid, list, slider
 * ------------------------------------------------------------------- */

.hrtk-rv__track {
  --hrtk-rv-n: var(--hrtk-rv-cols-sm, 1);
  display: grid;
  grid-template-columns: repeat(var(--hrtk-rv-n), minmax(0, 1fr));
  gap: var(--hrtk-rv-gap);
  margin: 0;
  padding: 0;
}

@supports (container-type: inline-size) {
  /* The query container is the viewport, not the wrapper, because of what
     inline-size containment does under a SHRINK-TO-FIT ancestor (an
     inline-block wrapper, a centered flex column, an auto-width cell):
     a contained box contributes no width, so the ancestor collapses to
     nothing. An intrinsic size fixes that but is also the box's MINIMUM
     contribution, so on its own it overflows narrow screens instead.
     Sitting in the wrapper's minmax(0, 1fr) track gives both: the track's
     floor is zero, its preferred width is the viewport's intrinsic size. */
  .hrtk-rv__viewport {
    container: hrtk-rv / inline-size;
    contain-intrinsic-inline-size: 72rem;
  }

  @container hrtk-rv (min-width: 560px) {
    .hrtk-rv__track {
      --hrtk-rv-n: var(--hrtk-rv-cols-md, 2);
    }
  }

  @container hrtk-rv (min-width: 900px) {
    .hrtk-rv__track {
      --hrtk-rv-n: var(--hrtk-rv-cols, 3);
    }
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .hrtk-rv__track {
      --hrtk-rv-n: var(--hrtk-rv-cols-md, 2);
    }
  }

  @media (min-width: 1024px) {
    .hrtk-rv__track {
      --hrtk-rv-n: var(--hrtk-rv-cols, 3);
    }
  }
}

/* card_height="auto": each card takes its own height instead of its row's
   (the slider never gets this class; its pages need level cards). */
.hrtk-rv--auto .hrtk-rv__track {
  align-items: start;
}

.hrtk-rv--slider .hrtk-rv__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Snapping is switched on by the script once the page has loaded. WebKit
   re-snaps a mandatory container during its first layout passes and can land
   the track on a later page (3 of 5 loads measured on WebKit 26.5); Chromium
   and Firefox start at the first card either way. */
.hrtk-rv--slider.hrtk-rv--snap .hrtk-rv__track {
  scroll-snap-type: x mandatory;
}

.hrtk-rv--slider .hrtk-rv__track::-webkit-scrollbar {
  display: none;
}

.hrtk-rv--slider .hrtk-rv__track:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.hrtk-rv--slider .hrtk-rv-card {
  flex: 0 0 calc((100% - (var(--hrtk-rv-n) - 1) * var(--hrtk-rv-gap)) / var(--hrtk-rv-n));
  scroll-snap-align: start;
}

/* Room for the lifted shadow inside the scroll container's clip. */
.hrtk-rv--slider.hrtk-rv--card-shadow .hrtk-rv__track {
  margin: -6px -6px -24px;
  padding: 6px 6px 24px;
  scroll-padding-inline: 6px;
}

/* ---------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------- */

.hrtk-rv-card {
  display: flex;
  min-width: 0;
  margin: 0;
}

.hrtk-rv-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--hrtk-rv-radius);
  background: var(--hrtk-rv-card-bg, transparent);
}

.hrtk-rv--card-bordered .hrtk-rv-card__inner {
  border: 1px solid var(--hrtk-rv-line);
}

.hrtk-rv--card-shadow .hrtk-rv-card__inner {
  background: var(--hrtk-rv-card-bg, #fff);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 12px 28px -16px rgba(0, 0, 0, 0.3);
}

.hrtk-rv--card-plain .hrtk-rv-card__inner {
  overflow: visible;
  border-radius: 0;
}

.hrtk-rv-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: var(--hrtk-rv-pad);
}

.hrtk-rv--card-plain .hrtk-rv-card__content {
  padding: 0;
}

.hrtk-rv--card-plain.hrtk-rv--img-top .hrtk-rv-card__media + .hrtk-rv-card__content {
  padding-top: 0.9rem;
}

.hrtk-rv-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.65rem;
}

.hrtk-rv-card__stars {
  flex-basis: 100%;
  font-size: 1.05em;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.hrtk-rv-star {
  color: var(--hrtk-rv-line);
}

.hrtk-rv-star--full {
  color: var(--hrtk-rv-star);
}

/* show_avatar="1": the guest's initial in a tinted disc. The tint is the
   text color at low alpha, so it follows the theme; the rgba() line is the
   fallback where color-mix() is unsupported. */
.hrtk-rv-card__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.16);
  background: color-mix(in srgb, currentColor 13%, transparent);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1;
}

.hrtk-rv-card__author {
  font-weight: 600;
}

.hrtk-rv-card__date,
.hrtk-rv-card__channel {
  font-size: 0.85em;
  opacity: 0.72;
}

.hrtk-rv-card__title {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.hrtk-rv-card__body {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.hrtk-rv-card__body p {
  margin: 0 0 0.7em;
}

.hrtk-rv-card__body p:last-child {
  margin-bottom: 0;
}

.hrtk-rv--clamp .hrtk-rv-card:not(.is-expanded) .hrtk-rv-card__body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hrtk-rv-lines, 6);
  line-clamp: var(--hrtk-rv-lines, 6);
}

.hrtk-rv .hrtk-rv-card__more {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 0.2em;
  cursor: pointer;
  appearance: none;
}

.hrtk-rv .hrtk-rv-card__more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.hrtk-rv-card__reply {
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--hrtk-rv-line);
  border-radius: 0 8px 8px 0;
  background: var(--hrtk-rv-soft);
  font-size: 0.92em;
  line-height: 1.5;
}

.hrtk-rv-card__reply p {
  margin: 0 0 0.6em;
}

.hrtk-rv-card__reply p:last-child {
  margin-bottom: 0;
}

.hrtk-rv-card__reply-label {
  display: block;
  margin-bottom: 0.25em;
  font-weight: 600;
}

.hrtk-rv-card__property {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
}

.hrtk-rv-card__property a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hrtk-rv-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.hrtk-rv-card__property a:hover,
.hrtk-rv-card__property a:focus-visible {
  text-decoration-color: currentColor;
}

/* show_location="1": the place after the property name, quieter than it. */
.hrtk-rv-card__place {
  font-weight: 400;
  opacity: 0.72;
}

.hrtk-rv--align-center .hrtk-rv-card__content {
  align-items: center;
  text-align: center;
}

.hrtk-rv--align-center .hrtk-rv-card__meta {
  justify-content: center;
}

.hrtk-rv--align-center .hrtk-rv-card__more {
  align-self: center;
}

/* The clamp's ellipsis hangs past the end of a centered line and would be
   cut by the body's own clip; a little inline room keeps it whole. */
.hrtk-rv--align-center.hrtk-rv--clamp .hrtk-rv-card__body {
  padding-inline: 0.6em;
}

/* ---------------------------------------------------------------------
 * Property cover image
 * ------------------------------------------------------------------- */

.hrtk-rv-card__media {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: var(--hrtk-rv-ratio, 3 / 2);
  background: var(--hrtk-rv-soft);
}

.hrtk-rv--card-plain .hrtk-rv-card__media {
  border-radius: var(--hrtk-rv-radius);
}

.hrtk-rv .hrtk-rv-card__image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.hrtk-rv--img-left .hrtk-rv-card__inner {
  flex-direction: row;
}

.hrtk-rv--img-right .hrtk-rv-card__inner {
  flex-direction: row-reverse;
}

/* A side image keeps its own shape, top-aligned. Stretching it to the
   card's height turns it into a tall sliver beside a long review. */
.hrtk-rv--img-left .hrtk-rv-card__media,
.hrtk-rv--img-right .hrtk-rv-card__media {
  flex: 0 0 38%;
  align-self: flex-start;
}

.hrtk-rv--card-plain.hrtk-rv--img-left .hrtk-rv-card__media + .hrtk-rv-card__content {
  padding-left: 1.1rem;
}

.hrtk-rv--card-plain.hrtk-rv--img-right .hrtk-rv-card__media + .hrtk-rv-card__content {
  padding-right: 1.1rem;
}

/* A side image needs room: below 440px of CARD width it stacks on top.
   The same three rules appear twice — once per query type CSS can express. */
@supports (container-type: inline-size) {
  .hrtk-rv-card {
    container: hrtk-rv-card / inline-size;
  }

  @container hrtk-rv-card (max-width: 439px) {
    .hrtk-rv--img-left .hrtk-rv-card__inner,
    .hrtk-rv--img-right .hrtk-rv-card__inner {
      flex-direction: column;
    }

    .hrtk-rv--img-left .hrtk-rv-card__media,
    .hrtk-rv--img-right .hrtk-rv-card__media {
      flex: 0 0 auto;
      align-self: stretch;
    }

    .hrtk-rv--card-plain.hrtk-rv--img-left .hrtk-rv-card__media + .hrtk-rv-card__content,
    .hrtk-rv--card-plain.hrtk-rv--img-right .hrtk-rv-card__media + .hrtk-rv-card__content {
      padding: 0.9rem 0 0;
    }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .hrtk-rv--img-left .hrtk-rv-card__inner,
    .hrtk-rv--img-right .hrtk-rv-card__inner {
      flex-direction: column;
    }

    .hrtk-rv--img-left .hrtk-rv-card__media,
    .hrtk-rv--img-right .hrtk-rv-card__media {
      flex: 0 0 auto;
      align-self: stretch;
    }

    .hrtk-rv--card-plain.hrtk-rv--img-left .hrtk-rv-card__media + .hrtk-rv-card__content,
    .hrtk-rv--card-plain.hrtk-rv--img-right .hrtk-rv-card__media + .hrtk-rv-card__content {
      padding: 0.9rem 0 0;
    }
  }
}

/* ---------------------------------------------------------------------
 * link="card": one link over the whole card
 * ------------------------------------------------------------------- */

.hrtk-rv-card__cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.hrtk-rv-card__cover:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hrtk-rv .hrtk-rv-card__image {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  a.hrtk-rv-card__media:hover .hrtk-rv-card__image,
  .hrtk-rv-card--linked:hover .hrtk-rv-card__image {
    transform: scale(1.04);
  }

  .hrtk-rv-card--linked .hrtk-rv-card__inner {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }

  .hrtk-rv-card--linked:hover .hrtk-rv-card__inner {
    transform: translateY(-2px);
  }

  .hrtk-rv--card-bordered .hrtk-rv-card--linked:hover .hrtk-rv-card__inner {
    border-color: currentColor;
  }
}

/* ---------------------------------------------------------------------
 * Slider controls
 * ------------------------------------------------------------------- */

.hrtk-rv__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.1rem;
}

.hrtk-rv .hrtk-rv__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 0;
  height: 2.5rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hrtk-rv-line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

.hrtk-rv--rtl .hrtk-rv__arrow svg {
  transform: scaleX(-1);
}

.hrtk-rv .hrtk-rv__arrow:hover {
  border-color: currentColor;
  background: var(--hrtk-rv-soft);
}

.hrtk-rv .hrtk-rv__arrow:focus-visible,
.hrtk-rv .hrtk-rv__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.hrtk-rv .hrtk-rv__arrow:disabled {
  border-color: var(--hrtk-rv-line);
  background: transparent;
  opacity: 0.35;
  cursor: default;
}

.hrtk-rv__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

/* A 22px hit target around an 8px dot. */
.hrtk-rv .hrtk-rv__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  min-width: 0;
  height: 1.4rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.hrtk-rv__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.28;
}

.hrtk-rv__dot[aria-current="true"]::before {
  width: 1.1rem;
  opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  .hrtk-rv__dot::before {
    transition:
      width 0.25s ease,
      opacity 0.25s ease;
  }
}

/* ---------------------------------------------------------------------
 * See-all link
 * ------------------------------------------------------------------- */

.hrtk-rv__see-all {
  margin: 1.5rem 0 0;
  text-align: center;
}

.hrtk-rv__see-all a {
  display: inline-block;
  padding: 0.65em 1.4em;
  border: 1px solid var(--hrtk-rv-line);
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.hrtk-rv__see-all a:hover,
.hrtk-rv__see-all a:focus-visible {
  border-color: currentColor;
  background: var(--hrtk-rv-soft);
}

@media (prefers-reduced-motion: reduce) {
  .hrtk-rv--slider .hrtk-rv__track {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------
 * Search (search="1"): the box, the status line, result cards with
 * highlighted matches, the chips as buttons, Show more.
 * ------------------------------------------------------------------- */

.hrtk-rv__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.hrtk-rv--align-center .hrtk-rv__search,
.hrtk-rv--align-center .hrtk-rv__search-more {
  justify-content: center;
  text-align: center;
}

.hrtk-rv__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hrtk-rv .hrtk-rv__search-input {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 440px;
  min-height: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  box-shadow: none;
  appearance: none;
}

.hrtk-rv .hrtk-rv__search-input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.hrtk-rv .hrtk-rv__search-input::-webkit-search-decoration,
.hrtk-rv .hrtk-rv__search-input::-webkit-search-cancel-button {
  appearance: none;
}

/* Text buttons: the clear control, Show more, and the chips. The same
   reset as Read more, so themes' button styles do not leak in. */
.hrtk-rv .hrtk-rv__search-clear,
.hrtk-rv .hrtk-rv__search-more-btn,
.hrtk-rv .hrtk-rv__topic--button {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

.hrtk-rv .hrtk-rv__search-clear,
.hrtk-rv .hrtk-rv__search-more-btn {
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hrtk-rv .hrtk-rv__search-clear:focus-visible,
.hrtk-rv .hrtk-rv__search-more-btn:focus-visible,
.hrtk-rv .hrtk-rv__topic--button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.hrtk-rv .hrtk-rv__search-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.hrtk-rv .hrtk-rv__topic--button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hrtk-rv .hrtk-rv__topic--button[aria-pressed="true"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hrtk-rv__search-status {
  margin: 0 0 12px;
  font-size: 0.95em;
  opacity: 0.85;
}

.hrtk-rv__search-status:empty {
  display: none;
}

.hrtk-rv__search-more {
  margin: 14px 0 0;
}

.hrtk-rv-mark {
  padding: 0 0.08em;
  border-radius: 2px;
  background: rgba(255, 214, 10, 0.45);
  color: inherit;
}

.hrtk-rv-card__snippet {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* A snippet card shows its snippet, or (expanded) the full text. These
   out-specify the line clamp rule above, so an expanded result is never
   clamped and a collapsed one shows nothing but its snippet. */
.hrtk-rv .hrtk-rv-card--snippet:not(.is-expanded) .hrtk-rv-card__body {
  display: none;
}

.hrtk-rv .hrtk-rv-card--snippet.is-expanded .hrtk-rv-card__snippet {
  display: none;
}

/* While a search shows its results the slider is paused: no control bar,
   and the track scrolls freely. */
.hrtk-rv--searching .hrtk-rv__controls {
  display: none;
}