/*
 * Reference implementation of the ranked "featured" rail contract recorded in
 * project_mobile/shared/home-featured-rank.json, which iOS and Android mirror.
 */
.home-featured-section {
    /* Share of the poster width taken by the numeral, by digit count. */
    --home-featured-rank-ratio: 0.471;
    --home-featured-rank-outline: rgba(255, 255, 255, 0.9);
    --home-featured-rank-outline-width: 2px;
    --home-featured-rank-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.home-featured-section .card-rail-heading .textupper {
    letter-spacing: -0.025em;
}

.home-featured-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/*
 * The ranked card is the standard rail card: the numeral is laid over the poster's bottom left
 * corner and takes no layout space, so the card and poster stay the size of every other rail.
 */
.home-featured-card__visual {
    position: relative;
    /* Size container for the numeral: 1cqw is 1% of the poster width at every viewport. */
    container-type: inline-size;
}

.home-featured-card__rank {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    z-index: 1;
    color: var(--ntf-color-08090b, #08090b);
    font-family: var(--ntf-font-family);
    font-size: calc(var(--home-featured-rank-ratio) * 100cqw);
    /* Proportional figures: a 1 takes less width than a 0. */
    font-variant-numeric: proportional-nums;
    font-weight: 900;
    line-height: 0.72;
    text-align: center;
    white-space: nowrap;
    /*
     * The outline is the union of eight offset copies, the same construction the apps use:
     * a glyph stroke would also draw the overlapping inner contours of Montserrat's digits.
     */
    text-shadow:
        calc(-1 * var(--home-featured-rank-outline-width)) 0 0 var(--home-featured-rank-outline),
        var(--home-featured-rank-outline-width) 0 0 var(--home-featured-rank-outline),
        0 calc(-1 * var(--home-featured-rank-outline-width)) 0 var(--home-featured-rank-outline),
        0 var(--home-featured-rank-outline-width) 0 var(--home-featured-rank-outline),
        calc(-1 * var(--home-featured-rank-outline-width)) calc(-1 * var(--home-featured-rank-outline-width)) 0 var(--home-featured-rank-outline),
        var(--home-featured-rank-outline-width) calc(-1 * var(--home-featured-rank-outline-width)) 0 var(--home-featured-rank-outline),
        calc(-1 * var(--home-featured-rank-outline-width)) var(--home-featured-rank-outline-width) 0 var(--home-featured-rank-outline),
        var(--home-featured-rank-outline-width) var(--home-featured-rank-outline-width) 0 var(--home-featured-rank-outline),
        var(--home-featured-rank-shadow);
    user-select: none;
}

/* One digit per line for two digit ranks (10 renders as 1 over 0); each line is a 0.72em box. */
.home-featured-card__rank-line {
    display: block;
}

.home-featured-card[data-home-featured-rank-digits="3"] {
    --home-featured-rank-ratio: 0.184;
}

.home-featured-card[data-home-featured-rank-digits="4"] {
    --home-featured-rank-ratio: 0.148;
}

.home-featured-card__link:focus-visible {
    border-radius: 12px;
    outline: 3px solid var(--ntf-color-fb1a3f, #fb1a3f);
    outline-offset: 4px;
}

body.light .home-featured-section {
    --home-featured-rank-outline: rgba(0, 0, 0, 0.82);
    --home-featured-rank-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

body.light .home-featured-card__rank {
    color: var(--ntf-color-f7f7f7, #f7f7f7);
}