/* ==========================================================================
   Parents' reviews page (/reviews). Loads AFTER frontend/v3/home.css and reuses
   its tokens, section heading, pager and scroll reveal. Approved mockup:
   claude.ai/artifact/R9qwTASZv8GmYJUkNu5GHx (2026-09-23).

   Desktop: ONE centred column, each review a row with the parent on a tinted
   side panel and the full quote beside it (the owner rejected a 3-across card
   grid as "newspaper"-like). Phone: the row folds into a card, quote first,
   parent pinned underneath.
   ========================================================================== */

/* ---- hero: title, subtitle, rating ------------------------------------- */
.mm-rvhero {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.4vw, 54px) 0 clamp(26px, 3vw, 44px);
    background: linear-gradient(180deg, #FFFCF8 0%, #FEF6EF 55%, #FAF3EC 100%);
}
.mm-dots-rvhero-a {
    inset-inline-start: clamp(8px, 3vw, 70px); top: 40px;
    width: 173px; height: 121px;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}
.mm-dots-rvhero-b {
    inset-inline-end: clamp(8px, 3vw, 70px); bottom: 18px;
    width: 150px; height: 100px; opacity: 0.3;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
}
.mm-rvhero-head { position: relative; z-index: 2; text-align: center; }

/* rating: one quiet line on the page ground (no box), caption underneath */
.mm-rv-rating {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: clamp(20px, 2.2vw, 30px);
}
.mm-rv-rating-line { display: flex; align-items: center; gap: 12px; direction: ltr; }
.mm-rv-rating-num {
    font-size: clamp(30px, 2.8vw, 40px); font-weight: 900; line-height: 1;
    color: var(--mm-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.mm-rv-rstars { position: relative; display: inline-flex; gap: 4px; color: #F1E3D8; line-height: 0; }
.mm-rv-rstars svg { width: 22px; height: 22px; flex: none; }
.mm-rv-rstars-fill {
    position: absolute; inset: 0 auto 0 0;
    display: inline-flex; gap: 4px; overflow: hidden; white-space: nowrap;
    color: #FFB23E;
}
.mm-rv-rating-cap { font-size: clamp(13px, 1vw, 14.5px); font-weight: 700; color: var(--mm-muted); }

/* ---- the list ------------------------------------------------------------ */
.mm-rvlist { position: relative; padding: clamp(14px, 2vw, 30px) 0 clamp(40px, 5vw, 80px); scroll-margin-top: calc(var(--mm-nav-h) + 16px); }
.mm-rv-stack { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); max-width: 880px; margin-inline: auto; }

.mm-rv-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--mm-card-shadow);
}
.mm-rv-side {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
    padding: 26px 18px;
    background: #FFF8F3;
    border-inline-end: 1px solid var(--mm-line);
}
.mm-rv-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    background: var(--mm-soft); color: var(--mm-orange);
    display: inline-flex; align-items: center; justify-content: center;
}
.mm-rv-who { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mm-rv-name { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.5; color: var(--mm-ink); overflow-wrap: anywhere; }
.mm-rv-stars { display: flex; gap: 2px; color: #FFB23E; direction: ltr; }
.mm-rv-stars svg { width: 13px; height: 13px; }
.mm-rv-country { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--mm-muted); }
.mm-rv-country svg { color: var(--mm-teal); flex: none; }

.mm-rv-body {
    position: relative; display: flex; align-items: center;
    padding: 28px 30px; padding-inline-end: 72px;
}
.mm-rv-mark { position: absolute; top: 22px; inset-inline-end: 24px; color: #FBE3D6; line-height: 0; }
.mm-rv-mark svg { width: 30px; height: auto; }
/* line-height stays >= 1.5 so Arabic dots are never clipped (arabic-line-clamp) */
.mm-rv-text { margin: 0; color: #6B645C; font-weight: 500; font-size: 15.5px; line-height: 1.95; overflow-wrap: anywhere; }

.mm-rv-empty {
    max-width: 420px; margin: 20px auto 0; padding: 22px;
    text-align: center; color: var(--mm-muted); font-weight: 600;
    background: #fff; border-radius: 18px;
}

/* ---- scroll reveal: slower than the shared .mm-reveal ----------------------
   The shared rule (.5s expo-out) read as too fast and 1.5s read as too slow
   (owner, 2026-09-23); .9s ease-out-cubic with a 1.5x stagger sits between. */
.mm-rvlist .mm-rv-row.mm-reveal,
.mm-rvhero .mm-rv-rating.mm-reveal {
    transform: none;
    translate: 0 30px;
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                translate .9s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--mm-rd, 0ms) * 1.5);
}
.mm-rvhero .mm-rv-rating.mm-reveal { translate: 0 16px; }
.mm-rvlist .mm-rv-row.mm-reveal.mm-in,
.mm-rvhero .mm-rv-rating.mm-reveal.mm-in { translate: none; }

/* ---- page-to-page swap (reviews.js): old list dims, new rows rise in ----- */
.mm-rvlist .mm-container-md { transition: opacity .18s ease; }
.mm-rvlist .mm-container-md.mm-rv-leaving { opacity: .35; pointer-events: none; }
.mm-rv-row.mm-rv-entering { animation: mm-rv-enter .6s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--rv-i, 0) * 60ms); }
@keyframes mm-rv-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

/* ---- pager fits one row on a phone (9 items: arrows + 7) ----------------- */
.mm-rvlist .mm-pager { margin-top: clamp(30px, 3.4vw, 48px); }

/* ---- phone: the row folds into a card, quote first, parent underneath ---- */
/* ---- desktop scale ---------------------------------------------------------
   From 701px up the whole review card is 15% larger than its base size: stack
   width, the name column, avatar, paddings and both type sizes scale together,
   so the card grows in width, height and text in one step. The phone layout
   below keeps the base sizes. */
@media (min-width: 701px) {
    .mm-rv-stack { max-width: 1012px; gap: clamp(18px, 1.84vw, 25px); }
    .mm-rv-row { grid-template-columns: 230px minmax(0, 1fr); border-radius: 25px; }
    .mm-rv-side { padding: 30px 21px; gap: 12px; }
    .mm-rv-avatar { width: 64px; height: 64px; }
    .mm-rv-name { font-size: 17.8px; }
    .mm-rv-stars svg { width: 15px; height: 15px; }
    .mm-rv-country { font-size: 14.4px; }
    .mm-rv-body { padding: 32px 34px; padding-inline-end: 83px; }
    .mm-rv-mark { top: 25px; inset-inline-end: 28px; }
    .mm-rv-mark svg { width: 34px; }
    .mm-rv-text { font-size: 17.8px; }
}

@media (max-width: 700px) {
    .mm-rv-row { display: flex; flex-direction: column; padding: 20px; }
    .mm-rv-body { order: 1; padding: 0; }
    .mm-rv-mark { display: none; }
    .mm-rv-text { font-size: 15px; line-height: 1.9; }
    .mm-rv-side {
        order: 2;
        flex-direction: row; justify-content: flex-start; text-align: start;
        background: none; border-inline-end: 0;
        border-top: 1px solid var(--mm-line);
        margin-top: 16px; padding: 14px 0 0;
    }
    .mm-rv-avatar { width: 42px; height: 42px; }
    .mm-rv-who { align-items: flex-start; gap: 3px; }
    .mm-rv-stars { direction: inherit; }

    .mm-rvlist .mm-pager { gap: 4px; }
    .mm-rvlist .mm-page-chip, .mm-rvlist .mm-pager-arrow { width: 36px; height: 36px; font-size: 14px; }
    .mm-rvlist .mm-page-gap { width: 18px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-rvlist .mm-rv-row.mm-reveal, .mm-rvhero .mm-rv-rating.mm-reveal { translate: none; transition: none; }
    .mm-rv-row.mm-rv-entering { animation: none; }
    .mm-rvlist .mm-container-md { transition: none; }
}