/*
 * Desktop "band" layout for the reviews carousel -- an edge-to-edge trust
 * strip (own full-bleed dark panel, not a floating card -- no
 * border-radius) with light-on-dark text. It carries its own translucent
 * dark panel rather than trusting a parent background alone: dropped over
 * a photo, an uneven patch (sky, siding, a bright spot) showing through
 * can drop text contrast below WCAG even when the band "looks" fine on a
 * solid demo backdrop. The panel is opaque enough to guarantee contrast
 * against a worst-case (near-white) patch underneath -- verified against
 * the "see all reviews" link, the lowest-contrast text on the band
 * (measured ~1.3:1 with no panel behind a light patch; >=0.9 alpha clears
 * 4.5:1 even then). The panel color is the existing
 * --lib-color-surface-card-dark token (not a one-off hardcoded hex) --
 * a project's brand bridge can map it to that brand's own dark tone
 * (e.g. a warm charcoal instead of the token's default cold navy) so the
 * band reads as part of that brand, not a generic component color that
 * happens to not match anything else on the page.
 * .lib-reviews-band is the full-bleed outer layer: it breaks out to the
 * viewport edges on its own (margin-inline: calc(50% - 50vw)) no matter
 * how deeply it's nested in a boxed page layout, and carries the
 * background. .lib-reviews-band__inner holds the actual 90rem-capped,
 * centered content. Earlier versions put both jobs on one element and
 * relied on each consuming project to wrap it in its own full-width
 * section -- easy to forget, and exactly the kind of per-project
 * reconstruction this split removes: drop the component anywhere and
 * it's edge-to-edge on its own, the same in the library demo and in any
 * real page.
 * A full width header (title + description, one row on desktop) sits on
 * top; below it, one single row holds the Google score column (left) and
 * the 3-cards-visible carousel (9 total, center-out ordered, right). The
 * "see all reviews" link lives inside that same score column, under the
 * review count -- same row-height as the cards, no separate row
 * underneath. It was tried as a third flex sibling of that row first,
 * but a real page's content width is rarely as wide as this component's
 * own demo backdrop (a common ~1140px theme content width has just
 * enough room for the score column + 3 full-size cards, none left over
 * for a third item without squeezing the cards). Living inside the fixed-
 * width score column costs the row zero extra width, so it can't run
 * into that at any container width.
 * Below 1024px this collapses to the default full-size stacked layout --
 * a side-by-side band has no room to work on narrow screens, so every
 * compact-card override below lives inside the >=1024px query only.
 */
.lib-reviews-band {
  position: relative;
  /* Breaks out to the viewport edges regardless of how boxed/padded the
     parent it's dropped into is -- no wrapper div, no per-project
     "full width section" setting required. Uses left:50% + negative
     vw margins (not margin-inline:calc(50% - 50vw) alone) because that
     version depends on percentage-width resolving against the parent,
     which collapses to 0 when the parent is itself a shrink-to-fit flex
     item (e.g. Elementor's widget wrapper, which has no flex-grow) --
     width/margin in plain vw units don't need that resolution pass. */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--lib-color-surface-card-dark, rgba(17, 24, 39, 0.92));
}

.lib-reviews-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--lib-space-3);
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--lib-space-8);
  padding-block: var(--lib-space-3);
  color: var(--lib-color-inverse);
}

.lib-reviews-band__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lib-reviews-band__description {
  /* !important on every margin:0 below (description, label, score,
     count): all four are <p> tags, and a real host page's own
     ".entry-content p { margin: ... }" typography default (present on
     most WordPress themes, e.g. Kadence) is class+tag -- genuinely
     higher specificity than a single-class selector, so it wins without
     !important. Confirmed live on Joe's Roofing: label/score/count each
     picked up 32px of unwanted bottom margin this way, stacking into a
     visibly taller band that the isolated library preview can't catch
     (nothing there provides an ".entry-content" ancestor to collide
     with). */
  margin: 0 !important;
  max-width: 40rem;
  font-size: var(--lib-font-size-small);
  color: color-mix(in srgb, var(--lib-color-inverse) 78%, transparent);
}

.lib-reviews-band__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lib-space-5);
  width: 100%;
}

.lib-reviews-band__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lib-space-2);
  text-align: center;
}

.lib-reviews-band__carousel {
  width: 100%;
  min-width: 0;
}

.lib-reviews-band__google-wordmark {
  width: 5.5rem;
  height: auto;
}

.lib-reviews-band__label {
  margin: 0 !important;
  font-family: var(--lib-font-heading);
  font-weight: 700;
  font-size: var(--lib-font-size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lib-color-inverse);
}

.lib-reviews-band__score {
  margin: 0 !important;
  font-family: var(--lib-font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--lib-color-inverse);
}

.lib-reviews-band__rating .lib-rating-stars {
  justify-content: center;
}

.lib-reviews-band__count {
  margin: 0 !important;
  font-size: var(--lib-font-size-small);
  color: color-mix(in srgb, var(--lib-color-inverse) 78%, transparent);
}

.lib-reviews-band__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lib-space-2);
  align-self: center;
  min-height: 44px;
  margin-block-start: var(--lib-space-1);
  padding-inline: var(--lib-space-2);
  font-family: var(--lib-font-heading);
  font-weight: 700;
  font-size: var(--lib-font-size-small);
  /* Raw --lib-color-primary fails contrast at this size on the band's
     dark backdrop (measured ~3.1:1) -- lightened toward white keeps the
     brand hue recognizable while clearing 4.5:1. */
  color: color-mix(in srgb, var(--lib-color-primary) 55%, white 45%);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 1024px) {
  .lib-reviews-band__header {
    margin-block-end: var(--lib-space-2);
  }

  /* The 40rem cap below exists only to keep mobile/tablet paragraph
     wrapping readable -- it has no justification once the band is wide
     enough (>=1024px) to fit the whole sentence on one line, so it's
     lifted here instead of forcing a wrap with room to spare. */
  .lib-reviews-band__description {
    max-width: none;
  }

  .lib-reviews-band__content {
    flex-direction: row;
    align-items: center;
    gap: var(--lib-space-8);
  }

  .lib-reviews-band__intro {
    flex: 0 0 14rem;
    align-items: flex-start;
    /* Pulls the Google score off the raw container edge -- padding-inline
       alone read as cramped in the corner. */
    margin-inline-start: var(--lib-space-4);
    text-align: left;
  }

  .lib-reviews-band__cta {
    align-self: flex-start;
  }

  .lib-reviews-band__rating .lib-rating-stars {
    justify-content: flex-start;
  }

  .lib-reviews-band__carousel {
    flex: 1 1 auto;
  }

  /* Compact card -- smaller than the default 18rem card. Frame width is
     capped so exactly 3 cards show at once, cycling through all 9 via
     the nav arrows / swipe. Desktop-only: mobile keeps the untouched
     default testimonial-card size. */
  .lib-reviews-band__carousel .lib-reviews-carousel__shell {
    max-width: calc(3 * 15rem + 2 * var(--lib-space-5) + 6rem);
    margin-inline: auto;
    padding-inline: var(--lib-space-8);
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__frame {
    max-width: calc(3 * 15rem + 2 * var(--lib-space-5));
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__track {
    padding-inline: calc(50% - 7.5rem);
    gap: var(--lib-space-5);
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__item {
    flex-basis: 15rem;
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__item .lib-testimonial-card {
    width: 15rem;
    min-width: 15rem;
    max-width: 15rem;
  }

  .lib-reviews-band__carousel .lib-testimonial-card__body {
    padding: var(--lib-space-4) var(--lib-space-4) var(--lib-space-1);
  }

  .lib-reviews-band__carousel .lib-testimonial-card__avatar {
    width: 2.25rem;
    height: 2.25rem;
  }

  .lib-reviews-band__carousel .lib-testimonial-card__name {
    font-size: var(--lib-font-size-small);
  }

  .lib-reviews-band__carousel .lib-testimonial-card__when {
    font-size: var(--lib-font-size-micro);
  }

  .lib-reviews-band__carousel .lib-rating-stars__item {
    width: 0.7rem;
    height: 0.7rem;
  }

  .lib-reviews-band__carousel .lib-testimonial-card__quote {
    font-size: var(--lib-font-size-small);
  }

  .lib-reviews-band__carousel .lib-testimonial-card__google-mark {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* Outline nav (matches the reference's ringed circle, not a filled
     white pill) -- transparent fill reads correctly against the dark
     backdrop this band is designed for. */
  .lib-reviews-band__carousel .lib-reviews-carousel__nav {
    /* !important: same host-theme button-reset risk as the base rule in
       testimonials-section--carousel.css -- this compact override needs
       to win too, not just the base one. */
    width: 2.5rem !important;
    height: 2.5rem !important;
    background: transparent;
    border-color: color-mix(in srgb, var(--lib-color-inverse) 45%, transparent);
    color: var(--lib-color-inverse);
    box-shadow: none;
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__nav:hover {
    background: color-mix(in srgb, var(--lib-color-inverse) 12%, transparent);
    box-shadow: none;
  }

  .lib-reviews-band__carousel .lib-reviews-carousel__nav svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}