/* ── Infineural Review Widget ──────────────────────────────────────────────────── */

/*
 * Every visual token below is a custom property, so a theme (or the site's
 * Additional CSS) can restyle the widget without touching this file:
 *
 *   .irm-review-widget { --irm-rw-radius: 4px; --irm-rw-star-on: #e11d48; }
 *
 * Sizes are expressed in `em` so the widget scales with whatever font-size the
 * surrounding theme applies to its content area.
 */

.irm-review-widget {
    /* Palette — light default */
    --irm-rw-bg-card:    #ffffff;
    --irm-rw-border:     #e5e7eb;
    --irm-rw-text:       inherit;
    --irm-rw-text-muted: #6b7280;
    --irm-rw-star-on:    #f59e0b;
    --irm-rw-star-off:   #d1d5db;
    --irm-rw-accent:     var(--irm-rw-star-on);
    --irm-rw-reply-bg:   #f9fafb;

    /* Layout */
    --irm-rw-cols:       3;      /* overridden inline by the `columns` attribute */
    --irm-rw-max:        1160px; /* cards stop growing past this — 3-up ≈ 370px */
    --irm-rw-gap:        1.25em;
    --irm-rw-radius:     14px;
    --irm-rw-pad:        1.5em;
    --irm-rw-shadow:     0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --irm-rw-shadow-lift:0 10px 24px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);

    /* Inherit the theme's typography rather than imposing our own */
    font-family: inherit;
    font-size:   inherit;
    line-height: inherit;
    color:       var(--irm-rw-text);
}

/*
 * The card area — not the outer widget — is the query container, so the
 * breakpoints below measure the width the cards actually get, after any
 * full-width padding has been taken off. Cards therefore respond to the space
 * they are dropped into rather than to the viewport, and behave the same in a
 * narrow sidebar as in a full-width row.
 */
.irm-rw-body {
    container-type: inline-size;
    container-name: irm-rw;
}

/* Cards stop growing past --irm-rw-max and centre themselves, so a wide screen
   gives you more whitespace rather than absurdly wide cards. */
.irm-rw-title,
.irm-rw-body {
    max-width: var(--irm-rw-max);
    margin-inline: auto;
}

/* The widget itself must be included: the full-width breakout sets an exact
   pixel width, and content-box sizing would add its padding on top of it. */
.irm-review-widget,
.irm-review-widget *,
.irm-review-widget *::before,
.irm-review-widget *::after {
    box-sizing: border-box;
}

/* ── Auto theme: derive every colour from the theme's own text colour ───── */
/* Works on light and dark themes alike — no assumptions about the palette. */

/* Baseline for browsers without color-mix(): stay transparent so the card sits
   on whatever section background the theme provides. */
.irm-review-widget.irm-rw-theme-auto {
    --irm-rw-bg-card:  transparent;
    --irm-rw-reply-bg: transparent;
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
    .irm-review-widget.irm-rw-theme-auto {
        --irm-rw-bg-card:    color-mix(in srgb, currentColor 3%, transparent);
        --irm-rw-border:     color-mix(in srgb, currentColor 15%, transparent);
        --irm-rw-text-muted: color-mix(in srgb, currentColor 62%, transparent);
        --irm-rw-star-off:   color-mix(in srgb, currentColor 22%, transparent);
        --irm-rw-reply-bg:   color-mix(in srgb, currentColor 5%, transparent);
        --irm-rw-shadow:     none;
    }

    .irm-review-widget.irm-rw-theme-auto .irm-rw-card:hover {
        box-shadow: none;
        background: color-mix(in srgb, currentColor 6%, transparent);
    }
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
.irm-review-widget.irm-rw-theme-dark {
    --irm-rw-bg-card:    #1f2937;
    --irm-rw-border:     #374151;
    --irm-rw-text:       #f9fafb;
    --irm-rw-text-muted: #9ca3af;
    --irm-rw-star-off:   #4b5563;
    --irm-rw-reply-bg:   rgba(255,255,255,.04);
    --irm-rw-shadow:     0 1px 3px rgba(0,0,0,.4);
    --irm-rw-shadow-lift:0 10px 24px rgba(0,0,0,.5);
}

/* ── Title ─────────────────────────────────────────────────────────────── */
.irm-rw-title {
    /* Inherits the theme's heading styles; only spacing is enforced.
       `auto` insets keep the heading aligned with the capped card area. */
    margin: 0 auto 1em;
    color: inherit;
}

/* ── Loading / empty ───────────────────────────────────────────────────── */
.irm-rw-loading {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: 2em 0;
    color: var(--irm-rw-text-muted);
    font-size: .9em;
}

.irm-rw-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--irm-rw-border);
    border-top-color: var(--irm-rw-star-on);
    border-radius: 50%;
    animation: irm-rw-spin .7s linear infinite;
}

@keyframes irm-rw-spin { to { transform: rotate(360deg); } }

.irm-rw-empty {
    color: var(--irm-rw-text-muted);
    font-size: .9em;
    padding: 1.5em 0;
    text-align: center;
}

/* ── Cards container ───────────────────────────────────────────────────── */
.irm-rw-cards {
    display: grid;
    gap: var(--irm-rw-gap);
    /* 1fr rows + stretch ⇒ every card is the same height, across all rows,
       not just within its own row. */
    grid-auto-rows: 1fr;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Grid layout — always at least 3 columns on anything wider than a phone. */
.irm-rw-layout-grid .irm-rw-cards {
    grid-template-columns: repeat(var(--irm-rw-cols), minmax(0, 1fr));
}

/*
 * Optional edge-to-edge breakout, for themes with a narrow content column.
 * Opt in with full_width="true" on the shortcode.
 *
 * --irm-rw-vw is set by the widget script to documentElement.clientWidth, i.e.
 * the viewport WITHOUT the scrollbar. Plain 100vw includes the scrollbar, which
 * pushes the page a few pixels wide and makes it scroll sideways on mobile.
 */
.irm-review-widget.irm-rw-full {
    width: var(--irm-rw-vw, 100%);
    max-width: var(--irm-rw-vw, 100%);
    margin-left: calc(50% - var(--irm-rw-vw, 100%) / 2);
    margin-right: calc(50% - var(--irm-rw-vw, 100%) / 2);
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
}

/* List layout */
.irm-rw-layout-list .irm-rw-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(100%, 46em);
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.irm-rw-card {
    background: var(--irm-rw-bg-card);
    border: 1px solid var(--irm-rw-border);
    border-radius: var(--irm-rw-radius);
    box-shadow: var(--irm-rw-shadow);
    padding: var(--irm-rw-pad);
    display: flex;
    flex-direction: column;
    gap: .75em;
    /* No explicit height — grid rows and the carousel's flex track both stretch
       cards to a shared height on their own. */
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.irm-rw-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--irm-rw-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
    .irm-rw-card { transition: none; }
    .irm-rw-card:hover { transform: none; }
}

/* Header row */
.irm-rw-card-header {
    display: flex;
    align-items: center;
    gap: .75em;
}

/* Avatar */
.irm-rw-avatar {
    width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin: 0;
}

.irm-rw-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    width: 3.6em;   /* .8em font-size ⇒ same rendered size as the <img> above */
    height: 3.6em;
}

/* Meta */
.irm-rw-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15em;
    min-width: 0;
}

.irm-rw-name {
    font-weight: 600;
    font-size: .98em;
    line-height: 1.3;
    /* Wrap rather than ellipsis — in a 3-up grid inside a narrow theme
       container, truncating a full name to "Sarah Mit…" reads badly. */
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.irm-rw-date {
    font-size: .8em;
    color: var(--irm-rw-text-muted);
}

/* Platform badge */
.irm-rw-platform-badge {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.irm-rw-platform-badge svg {
    width: 100%;
    height: 100%;
}

.irm-rw-platform-dot {
    display: block;
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: var(--irm-rw-platform-color, #999);
}

/* Stars */
.irm-rw-stars {
    display: flex;
    gap: .1em;
    line-height: 1;
}

.irm-rw-star {
    font-size: 1.15em;
    color: var(--irm-rw-star-off);
}

.irm-rw-star--on {
    color: var(--irm-rw-star-on);
}

/* Review text */
.irm-rw-text {
    font-size: 1em;
    line-height: 1.6;
    color: inherit;
    margin: 0;
    /* Must not grow: a stretched -webkit-box renders one line past the clamp.
       The reply/footer below carry `margin-top:auto` to take up the slack. */
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reply block — sits at the bottom of the card, above the footer */
.irm-rw-reply {
    margin-top: auto;
    background: var(--irm-rw-reply-bg);
    border-left: 3px solid var(--irm-rw-accent);
    border-radius: 0 8px 8px 0;
    padding: .75em .9em;
    font-size: .875em;
}

.irm-rw-reply-label {
    display: block;
    font-weight: 600;
    color: var(--irm-rw-text-muted);
    margin-bottom: .35em;
}

.irm-rw-reply p {
    margin: 0;
    color: inherit;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer — one line, so a narrow column trims the tail instead of both halves */
.irm-rw-card-footer {
    padding-top: .75em;
    border-top: 1px solid var(--irm-rw-border);
    font-size: .78em;
    color: var(--irm-rw-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Only the first bottom block absorbs the slack — otherwise a card with a reply
   would split the free space between the reply and the footer. */
.irm-rw-text + .irm-rw-card-footer {
    margin-top: auto;
}

.irm-rw-card-footer .irm-rw-sep {
    opacity: .55;
    margin: 0 .4em;
}

/* ── Carousel layout ───────────────────────────────────────────────────── */
.irm-review-widget.irm-rw-layout-carousel .irm-rw-body {
    overflow: hidden;
}

.irm-rw-carousel {
    display: flex;
    align-items: center;
    gap: .5em;
}

.irm-rw-carousel-track-wrap {
    flex: 1;
    overflow: hidden;
    padding: 4px;            /* room for the hover lift + shadow */
    margin: -4px;
}

.irm-rw-carousel-track {
    display: flex;
    gap: var(--irm-rw-gap);
    align-items: stretch;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.irm-rw-carousel-track .irm-rw-card {
    /* One card per column, sharing the same gap maths as the grid. */
    flex: 0 0 calc((100% - (var(--irm-rw-cols) - 1) * var(--irm-rw-gap)) / var(--irm-rw-cols));
}

.irm-rw-carousel-btn {
    background: var(--irm-rw-bg-card);
    border: 1px solid var(--irm-rw-border);
    border-radius: 50%;
    width: 2.2em;
    height: 2.2em;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 1.15em;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, opacity .15s;
}

.irm-rw-carousel-btn:hover:not(:disabled) {
    background: var(--irm-rw-border);
}

.irm-rw-carousel-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* ── Responsive — driven by the card area's width, not the viewport ─────── */
/* Rules here must target descendants of .irm-rw-body (the query container). */
@container irm-rw (max-width: 760px) {
    .irm-rw-layout-grid .irm-rw-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .irm-rw-carousel-track .irm-rw-card {
        flex-basis: calc((100% - var(--irm-rw-gap)) / 2);
    }
    .irm-rw-card {
        padding: 1.25em;
    }
}

@container irm-rw (max-width: 480px) {
    .irm-rw-layout-grid .irm-rw-cards,
    .irm-rw-layout-list .irm-rw-cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .irm-rw-carousel-track .irm-rw-card {
        flex-basis: 100%;
    }
    .irm-rw-card {
        padding: 1.15em;
    }
    .irm-rw-cards {
        --irm-rw-gap: 1em;
    }

    /* On a phone the arrows would eat a quarter of the width and touch users
       expect to swipe anyway — drop them and hand over to native scroll-snap.
       The next card peeks in so the strip reads as scrollable. */
    .irm-rw-carousel-btn {
        display: none;
    }
    .irm-rw-carousel-track-wrap {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .irm-rw-carousel-track-wrap::-webkit-scrollbar {
        display: none;
    }
    .irm-rw-carousel-track {
        transform: none !important;   /* overrides the JS-driven translate */
    }
    .irm-rw-carousel-track .irm-rw-card {
        flex-basis: 88%;
        scroll-snap-align: start;
    }
}

/* Viewport-based fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .irm-rw-layout-grid .irm-rw-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .irm-rw-carousel-track .irm-rw-card {
            flex-basis: calc((100% - var(--irm-rw-gap)) / 2);
        }
    }
    @media (max-width: 600px) {
        .irm-rw-layout-grid .irm-rw-cards,
        .irm-rw-layout-list .irm-rw-cards {
            grid-template-columns: minmax(0, 1fr);
        }
        .irm-rw-carousel-track .irm-rw-card {
            flex-basis: 100%;
        }
        .irm-rw-card {
            padding: 1.15em;
        }
    }
}