/**
 * Rating Summary — non-classic layouts (ring, badge, hero, histogram)
 *
 * Loaded on top of rating-summary.css only when the layout is not classic
 * (RatingSummaryService::is_custom_layout()). Every look reads the palette
 * declared on .yayrev-rating-summary in rating-summary.css:
 *   --yayrev-summary-bg (card/surface) / --yayrev-summary-text (type on it)
 *   / --yayrev-summary-accent (data fill: bars, ring, columns)
 * Element markup is shared with classic (score block, bars partial) and the
 * base rules already read the bg/text tokens, so each section only restyles
 * what differs.
 *
 * @package YayReviews
 */

/* =====================================================================
   Ring gauge — SVG ring filled to the average, score inside, bars right
   ===================================================================== */

.yayrev-rating-summary--ring .yayrev-rating-summary__ring {
    position: relative;
    width: 8rem;
    height: 8rem;
}

.yayrev-rating-summary__ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* start the fill at 12 o'clock */
}

.yayrev-rating-summary__ring-track,
.yayrev-rating-summary__ring-fill {
    fill: none;
    stroke-width: 8;
}

.yayrev-rating-summary__ring-track {
    stroke: color-mix(in srgb, var(--yayrev-summary-text) 12%, transparent);
}

.yayrev-rating-summary__ring-fill {
    stroke: var(--yayrev-summary-accent);
    stroke-linecap: round;
}

.yayrev-rating-summary--ring .yayrev-rating-summary__ring .yayrev-rating-summary__score {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
}

/* =====================================================================
   Trust badge — compact seal, no bars (widget only)
   ===================================================================== */

.yayrev-rating-summary--badge {
    display: inline-flex;
    max-width: none;
}

.yayrev-rating-summary__badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.25rem 1.75rem;
    border: 1px solid color-mix(in srgb, var(--yayrev-summary-accent) 50%, transparent);
    border-radius: 0.75rem;
    background-color: var(--yayrev-summary-bg);
    text-align: center;
}

.yayrev-rating-summary--badge .yayrev-rating-summary__score {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.yayrev-rating-summary__grade {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yayrev-summary-text);
}

/* =====================================================================
   Hero band — full-width block: bg token is the band, text token the type,
   accent the bar fill. Its own bg/text defaults give the dark look; the
   widget's inline tokens (higher precedence) still override them.
   ===================================================================== */

.yayrev-rating-summary--hero {
    --yayrev-summary-bg: #111827;
    --yayrev-summary-text: #ffffff;
    max-width: none;
    padding: 2rem;
    border-radius: 0.75rem;
    background-color: var(--yayrev-summary-bg);
    color: var(--yayrev-summary-text);
    align-items: center;
    gap: 2rem;
}

.yayrev-rating-summary__hero-copy {
    flex: 0 0 auto;
}

.yayrev-rating-summary--hero .yayrev-rating-summary__average {
    align-items: flex-start;
    padding: 0;
    background: none;
    text-align: left;
}

.yayrev-rating-summary--hero .yayrev-rating-summary__score-wrapper {
    align-items: flex-start;
}

.yayrev-rating-summary--hero .yayrev-rating-summary__score {
    font-size: 4.5rem;
}

.yayrev-rating-summary--hero .yayrev-rating-bar__number,
.yayrev-rating-summary--hero .yayrev-rating-bar__count,
.yayrev-rating-summary--hero .yayrev-rating-summary__recommend-text {
    color: color-mix(in srgb, var(--yayrev-summary-text) 75%, transparent);
}

.yayrev-rating-summary--hero .yayrev-rating-bar__track {
    background-color: color-mix(in srgb, var(--yayrev-summary-text) 20%, transparent);
}

.yayrev-rating-summary--hero .yayrev-rating-bar:hover:not(.yayrev-rating-bar--empty),
.yayrev-rating-summary--hero .yayrev-rating-bar:focus-visible:not(.yayrev-rating-bar--empty) {
    background-color: color-mix(in srgb, var(--yayrev-summary-text) 8%, transparent);
}

.yayrev-rating-summary--hero .yayrev-rating-bar--active,
.yayrev-rating-summary--hero .yayrev-rating-bar--active:hover {
    background-color: color-mix(in srgb, var(--yayrev-summary-text) 18%, transparent);
}

.yayrev-rating-summary--hero .yayrev-rating-bar:focus-visible {
    outline-color: var(--yayrev-summary-text);
}

.yayrev-rating-summary--hero .yayrev-rating-summary__recommend {
    border-top-color: color-mix(in srgb, var(--yayrev-summary-text) 20%, transparent);
}

.yayrev-rating-summary--hero .yayrev-rating-summary__recommend-pct {
    color: var(--yayrev-summary-text);
}

/* =====================================================================
   Histogram — score row above, one vertical column per level
   ===================================================================== */

.yayrev-rating-summary--histogram {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
}

.yayrev-rating-summary--histogram .yayrev-rating-summary__average {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.5rem;
}

.yayrev-rating-summary--histogram .yayrev-rating-summary__score-wrapper {
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
}

.yayrev-rating-summary--histogram .yayrev-rating-summary__score {
    font-size: 2.5rem;
}

.yayrev-rating-summary--histogram .yayrev-rating-summary__bars--histogram {
    flex: 0 0 auto;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 600px) {
    .yayrev-rating-summary--hero {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .yayrev-rating-summary--hero .yayrev-rating-summary__score {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .yayrev-rating-summary--ring,
    .yayrev-rating-summary--badge,
    .yayrev-rating-summary--histogram {
        padding: 0; /* rating-summary.css adds 1rem padding to every wrapper here; only the classic card (and hero, below) want it */
    }

    .yayrev-rating-summary--ring .yayrev-rating-summary__average {
        max-width: none;
        padding: 1rem;
    }

    .yayrev-rating-summary--hero {
        padding: 1.25rem;
    }

    .yayrev-rating-summary--hero .yayrev-rating-summary__average,
    .yayrev-rating-summary--histogram .yayrev-rating-summary__average {
        max-width: none;
    }

    .yayrev-rating-bars--vertical {
        height: 8rem;
    }
}