/**
 * Topplista — frontend rank styling
 *
 * Decorates the product loop on /topplista/ with editorial chart numbers.
 * Brand-coral, oversized, sitting in the white space to the left of the
 * product image so the rank reads as the card's hero, not a sticker.
 *
 * @package Dinmatta
 */

/* ==========================================================================
   ARCHIVE-LEVEL TUNING
   The topplista archive uses fewer columns so each rank gets room to breathe.
   ========================================================================== */

body.dinmatta-topplista--ranked .woocommerce-products-header__title,
body.dinmatta-topplista .woocommerce-products-header__title {
    /* keep the existing category hero — no override */
}

/* When ranking is active (default unfiltered view), hide WC's "showing X of Y"
   counter and the sort dropdown; ranks aren't compatible with sorting. */
body.dinmatta-topplista--ranked .woocommerce-result-count,
body.dinmatta-topplista--ranked .woocommerce-ordering {
    display: none;
}

/* Rebuild grid to 2 columns desktop / 1 column mobile so the rank dominates. */
/* The shop.css base uses repeat(4, 1fr) !important so we must match the
   specificity to override only on the topplista archive. */
body.dinmatta-topplista--ranked.woocommerce ul.products,
body.dinmatta-topplista--ranked.woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px) !important;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 24px;
}

@media (max-width: 768px) {
    body.dinmatta-topplista--ranked.woocommerce ul.products,
    body.dinmatta-topplista--ranked.woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
        gap: 56px !important;
    }
}

/* ==========================================================================
   RANK NUMERAL OVERLAY
   ========================================================================== */

.product-card--ranked {
    position: relative;
    /* Make room for the numeral on the left at desktop */
    padding-left: clamp(0px, 5vw, 80px);
}

@media (max-width: 768px) {
    .product-card--ranked {
        padding-left: 0;
    }
}

.product-card__rank {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--color-primary, #FF85A3);
    letter-spacing: -0.04em;
    text-shadow: 0 2px 24px rgba(255, 133, 163, 0.18);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.3s ease;
}

.product-card__rank-num {
    display: block;
    font-size: clamp(72px, 10vw, 120px);
    line-height: 0.85;
    /* Slight optical balancing for the leading 0 */
    font-variant-numeric: lining-nums;
}

/* Top 3 — slightly larger and a touch more weighted */
.product-card--ranked-podium .product-card__rank-num {
    font-size: clamp(88px, 12vw, 144px);
    color: var(--color-primary, #FF85A3);
}

/* On hover: the whole card lifts a bit and the numeral nudges left, like
   it's reacting to interest. */
.product-card--ranked:hover .product-card__rank {
    transform: translate(-6px, -2px);
}

/* Mobile: rank moves above the image, slightly inset, still oversized but
   no longer overlapping the card geometry awkwardly. */
@media (max-width: 768px) {
    .product-card__rank {
        position: static;
        display: block;
        margin: 0 0 -8px;
        padding-left: 4px;
    }
    .product-card__rank-num {
        font-size: clamp(56px, 16vw, 72px);
    }
    .product-card--ranked-podium .product-card__rank-num {
        font-size: clamp(64px, 18vw, 84px);
    }
}

/* ==========================================================================
   RANK ROW SPACING — even rhythm between cards
   ========================================================================== */

body.dinmatta-topplista--ranked .product-card__media {
    /* Slightly larger media area on this archive so the visual story is
       all about the products, not the chrome. */
    border-radius: 8px 8px 56px 8px;
}

body.dinmatta-topplista--ranked .product-card__title {
    font-size: 1.0625rem;
    font-weight: 500;
    margin-top: 8px;
}

body.dinmatta-topplista--ranked .product-card__price {
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    body.dinmatta-topplista--ranked .product-card__title {
        font-size: 0.9375rem;
    }
}