/* ==========================================================================
   AI Search Rankings, client reviews section
   --------------------------------------------------------------------------
   Styles sections/client-reviews.php: the star rating and three review cards.
   Three across on a desktop screen, stacked on a phone.

   Rules this file keeps
   ---------------------
   1. Every rule is scoped under .asr-reviews, so no other part of a page is
      touched. The section carries its own colours, because it also renders on
      the landing pages, which do not load the main stylesheet.
   2. Mobile first. The base rules describe a phone.
   3. No muted text. Every text colour is at least 7 to 1 on its surface. The
      star colour is a dark amber that clears 4.5 to 1 on white, where the
      usual bright gold fails. tests/test-client-reviews.php computes these
      ratios from this file.
   4. The palette is the brand teal with amber stars. Purple is never used.
   5. Motion is short, and it stops when the visitor asks for reduced motion.
   ========================================================================== */

.asr-reviews {
    --ar-ink: #111212;
    --ar-ink-2: #1f2a29;
    --ar-teal: #003737;
    --ar-teal-deep: #002424;
    --ar-surface: #ffffff;
    --ar-soft: #f5f9f9;
    --ar-wash: #e6f2f1;
    --ar-line: #c9d9d7;
    --ar-star: #b45309;
    --ar-star-off: #d5dedd;
    --ar-display: 'Space Grotesk', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    background: var(--ar-soft);
    border-block: 1px solid var(--ar-line);
    padding-block: clamp(3rem, 6vw, 5rem);
    color: var(--ar-ink);
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-align: left;
}
.asr-reviews *,
.asr-reviews *::before,
.asr-reviews *::after { box-sizing: border-box; }

/* The same container as the rest of the site: 1290px on a desktop screen, and
   20px from each edge on a phone. */
.asr-reviews__wrap { width: min(100% - 40px, 1290px); margin-inline: auto; }

.asr-reviews__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.asr-reviews a { color: var(--ar-teal); text-underline-offset: 0.18em; }
.asr-reviews :focus-visible { outline: 3px solid var(--ar-teal); outline-offset: 3px; box-shadow: 0 0 0 3px #ffffff; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Heading and rating
   -------------------------------------------------------------------------- */
.asr-reviews__head { display: flex; flex-direction: column; gap: 1.25rem; }
.asr-reviews__eyebrow {
    margin: 0 0 0.5rem; font-family: var(--ar-display); font-size: 0.8125rem;   font-weight: 600;0;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-teal);
}
.asr-reviews__title {
    margin: 0; max-width: 24ch; font-family: var(--ar-display);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);   font-weight: 600;0; line-height: 1.12; letter-spacing: -0.02em;
    color: var(--ar-ink); text-wrap: balance;
}
.asr-reviews__score {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem;
    margin: 0; padding: 0.85rem 1.1rem;
    border: 1px solid var(--ar-line); border-radius: 0.875rem; background: var(--ar-surface);
    align-self: flex-start;
}
.asr-reviews__scoretext { font-size: 1.0625rem; line-height: 1.3; color: var(--ar-ink-2); }
.asr-reviews__scoretext strong { font-family: var(--ar-display); font-size: 1.6rem;   font-weight: 600;0; color: var(--ar-ink); margin-right: 0.15rem; }

@media (min-width: 48rem) {
    .asr-reviews__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
    .asr-reviews__score { align-self: auto; flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Stars. One drawing, filled by a gradient that stops at the rating.
   -------------------------------------------------------------------------- */
.asr-stars { display: inline-flex; line-height: 0; }
.asr-stars svg { display: block; width: 6.25rem; height: 1.25rem; }
.asr-stars--lg svg { width: 7.5rem; height: 1.5rem; }
.asr-stars__on { stop-color: var(--ar-star); }
.asr-stars__off { stop-color: var(--ar-star-off); }

/* --------------------------------------------------------------------------
   Cards. A card is a list item, never an article element.
   -------------------------------------------------------------------------- */
.asr-reviews .asr-reviews__list {
    list-style: none; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 62rem) { .asr-reviews .asr-reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.asr-reviews .asr-review {
    display: flex; flex-direction: column;
    margin: 0; padding: 1.5rem;
    border: 1px solid var(--ar-line); border-top: 4px solid var(--ar-teal); border-radius: 1rem;
    background: var(--ar-surface);
    box-shadow: 0 1px 2px rgba(0, 40, 40, 0.06), 0 8px 24px rgba(0, 40, 40, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.asr-reviews .asr-review:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 40, 40, 0.08), 0 14px 32px rgba(0, 40, 40, 0.11); }

.asr-review__text { margin: 1rem 0 0; padding: 0; border: 0; font-size: 1.0125rem; line-height: 1.7; color: var(--ar-ink); quotes: none; }
.asr-review__text p { margin: 0 0 0.75rem; font-size: inherit; line-height: inherit; color: inherit; }
.asr-review__text p:last-child { margin-bottom: 0; }
/* The script adds this class. With no script, the whole review is shown. */
.asr-review__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; }

.asr-review__more {
    align-self: flex-start; margin: 0.75rem 0 0; padding: 0.35rem 0; min-height: 2.75rem;
    border: 0; background: none; color: var(--ar-teal);
    font: inherit; font-size: 0.9375rem;   font-weight: 600;0; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.asr-review__more[hidden] { display: none; }
.asr-review__more:hover { color: var(--ar-teal-deep); }

.asr-review__by { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; padding-top: 1.25rem; }
.asr-review__text + .asr-review__by,
.asr-review__more + .asr-review__by { border-top: 0; }
.asr-review__photo {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--ar-line); background: var(--ar-wash);
}
.asr-review__photo--initial { display: grid; place-items: center; font-family: var(--ar-display); font-size: 1.15rem;   font-weight: 600;0; color: var(--ar-teal); }
.asr-review__who { min-width: 0; }
.asr-review__name { margin: 0; font-family: var(--ar-display); font-size: 1.0625rem;   font-weight: 600;0; line-height: 1.3; color: var(--ar-ink); overflow-wrap: anywhere; }
.asr-review__name a { color: var(--ar-ink); text-decoration: none; }
.asr-review__name a:hover { color: var(--ar-teal); text-decoration: underline; }
.asr-review__meta { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--ar-ink-2); }

/* --------------------------------------------------------------------------
   Footer of the section
   -------------------------------------------------------------------------- */
.asr-reviews__foot { display: flex; flex-direction: column; gap: 0.85rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.asr-reviews a.asr-reviews__all {
    display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
    min-height: 3rem; padding: 0.7rem 1.25rem;
    border: 1px solid var(--ar-teal); border-radius: 0.6rem;
    background: var(--ar-teal); color: #ffffff;
      font-weight: 600;0; text-decoration: none;
    transition: background-color 150ms ease;
}
.asr-reviews a.asr-reviews__all:hover { background: var(--ar-teal-deep); border-color: var(--ar-teal-deep); color: #ffffff; }
.asr-reviews__source { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ar-ink-2); }

@media (min-width: 48rem) {
    .asr-reviews__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .asr-reviews .asr-review,
    .asr-reviews a.asr-reviews__all { transition: none; }
    .asr-reviews .asr-review:hover { transform: none; }
}

@media print {
    .asr-reviews { background: #ffffff; border: 0; }
    .asr-review__text.is-clamped { display: block; overflow: visible; }
    .asr-review__more, .asr-reviews a.asr-reviews__all { display: none; }
}