/* RTP Comparison block */
.rtp-comparison {
    container-type: inline-size;
    margin-block: 2.25rem;
    color: var(--color-dark-blue, #01265B);
}

.rtp-comparison__title {
    margin-bottom: 2.5rem;
}

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

.rtp-comparison__chart {
    --rtp-row-height: 3.25rem;
    --rtp-line: 1.75rem;
    --rtp-gap: 0.875rem;
    --rtp-bar-height: 3rem;
    --rtp-tick-height: 1.75rem;
    --rtp-range-gradient: linear-gradient(90deg, #E8CF4F 0%, #A9DD8A 45%, #6CE9B5 100%);

    line-height: 1.35;
}

/* Site markers above the bar */
.rtp-comparison__markers {
    position: relative;
    height: calc(var(--rows, 1) * var(--rtp-row-height) + var(--rtp-line));
    margin: 0 0 var(--rtp-gap);
    padding: 0;
    list-style: none;
}

.rtp-comparison__marker {
    --rtp-marker-line: calc(var(--rtp-line) + (var(--row, 1) - 1) * var(--rtp-row-height));

    position: absolute;
    left: var(--pos);
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0 0 calc(var(--rtp-marker-line) + 0.5rem);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rtp-comparison__marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: var(--rtp-marker-line);
    background-color: currentColor;
}

/* Bar with the highlighted range in the middle third */
.rtp-comparison__bar {
    position: relative;
    height: var(--rtp-bar-height);
    border-radius: 6px;
    background-color: var(--color-dark-blue, #01265B);
    overflow: hidden;
}

.rtp-comparison__bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.333%;
    width: 33.334%;
    background: var(--rtp-range-gradient);
}

/* No range (lowest and highest are equal): plain bar */
.rtp-comparison--single .rtp-comparison__bar::before {
    content: none;
}

/* Scale below the bar */
.rtp-comparison__scale {
    position: relative;
    height: calc(var(--rtp-tick-height) + 3rem);
    margin-top: var(--rtp-gap);
}

.rtp-comparison__tick {
    position: absolute;
    top: 0;
    left: var(--pos);
    padding-top: calc(var(--rtp-tick-height) + 0.75rem);
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rtp-comparison__tick::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: var(--rtp-tick-height);
    background-color: currentColor;
}

.rtp-comparison__range-label {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    width: calc(33.333% - 5rem);
    text-align: center;
    transform: translateX(-50%);
}

/* Narrow containers: smaller sizes, range label moves under the scale */
@container (max-width: 600px) {
    .rtp-comparison__chart {
        --rtp-row-height: 2.75rem;
        --rtp-line: 1.25rem;
        --rtp-bar-height: 2rem;
        --rtp-tick-height: 1.25rem;

        font-size: 0.8125rem;
    }

    .rtp-comparison__scale {
        height: auto;
    }

    .rtp-comparison__range-label {
        position: static;
        display: block;
        width: auto;
        padding-top: calc(var(--rtp-tick-height) + 2.25rem);
        transform: none;
    }
}