/* ==========================================================
   DISTRIBUTORS PAGE
   Loaded only by Views/Home/Distributors.cshtml via ~/bundles/distributors-css.
   Site-wide components stay in style.css / mobile_style.css.
   ========================================================== */

.dist-title {
    font-size: 40px;
}

/* In the page CSS rather than cb-mt-*: .site-title (style.css) resets the margin after the utilities load. */
.dist-title--countries {
    margin-top: 72px;
}

/* ---- Brand buttons (left) + map (right) ---- */
.dist-locator {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 48px;
    align-items: start;
}

.dist-brands__title {
    margin-bottom: 24px;
    font-size: 26px;
}

.dist-brands__list {
    display: grid;
    gap: 8px;
}

/* Each button stacks the designer's three looks; CSS shows the right one (images keep their own shadow). */
.dist-brand {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.dist-brand__img {
    display: block;
    width: 100%;
    height: auto;
}

.dist-brand__img--hover,
.dist-brand__img--selected {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.dist-brand.is-active .dist-brand__img--selected {
    opacity: 1;
}

@media (hover: hover) {
    .dist-brand:not(.is-active):hover .dist-brand__img--hover {
        opacity: 1;
    }
}

.dist-brand:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 2px;
}

/* Map image (tools/render_world_map.py) with the selected brand's pins on top; the pin's tip marks the place. */
.dist-map {
    position: relative;
}

.dist-map__img {
    display: block;
    width: 100%;
    height: auto;
}

.dist-map__pins {
    position: absolute;
    inset: 0;
}

.dist-map__pin {
    position: absolute;
    width: 15px;
    height: 21px;
    background: var(--pin) center / contain no-repeat;
    transform: translate(-50%, -100%);
}

/* ---- Country lists ---- */
.dist-note {
    margin: 16px 0 40px;
    color: #333;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

.dist-countries__row {
    display: grid;
    grid-template-columns: 30% 1fr;
    align-items: center;
    border-top: 1px solid #9d9d9d;
}

.dist-countries__row:last-child {
    border-bottom: 1px solid #9d9d9d;
}

.dist-countries__product {
    margin: 0;
    padding: 20px 16px 20px 0;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.dist-countries__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

.dist-countries__list li {
    padding: 12px 12px 12px 0;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
}

/* Only the selected brand's pins and countries are shown. */
.dist-map__pins:not(.is-active),
.dist-countries:not(.is-active) {
    display: none;
}

/* ==========================================================
   Distributors page: responsive
   ========================================================== */
@media (max-width: 1199.98px) {
    .dist-countries__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    /* Map first, then the brands two across. */
    .dist-locator {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dist-map {
        order: -1;
    }

    .dist-brands__title {
        text-align: center;
    }

    .dist-brands__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dist-countries__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dist-title {
        font-size: 24px;
    }

    .dist-title--countries {
        margin-top: 48px;
    }

    .dist-brands__title {
        margin-bottom: 16px;
        font-size: 18px;
    }

    .dist-map__pin {
        width: 10px;
        height: 14px;
    }

    .dist-note {
        margin-bottom: 24px;
        font-size: 14px;
    }

    /* Product name above its countries. */
    .dist-countries__row {
        grid-template-columns: 1fr;
    }

    .dist-countries__product {
        padding: 16px 0 0;
        font-size: 18px;
    }

    .dist-countries__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 0 12px;
    }

    .dist-countries__list li {
        padding: 6px 8px 6px 0;
        font-size: 13px;
    }
}