/**
 * 2025 CyliumDev
 *
 * Front styles of the `list` field type (bullet points).
 * The slider is a CSS scroll-snap track — no library — with optional arrows
 * driven by views/js/front/list.js.
 *
 * @author    CyliumDev <contact@cyliumdev.fr>
 * @copyright 2025 CyliumDev
 * @license   Proprietary - Non-commercial use only
 */

.cpf-list {
    --cpf-list-gap: 0.5rem;
    --cpf-list-marker: currentColor;
    /* Items per view, resolved per breakpoint. --cpf-list-pv / -pv-t / -pv-m are
       the source values: the Smarty widget writes the three inline, a Creative
       Elements widget only writes --cpf-list-pv but does it inside its own
       device media queries, so both end up on the right value. */
    --cpf-list-per-view: var(--cpf-list-pv, 3);
    position: relative;
}

/* Tablet — Elementor / PrestaShop breakpoint */
@media (max-width: 1024px) {
    .cpf-list {
        --cpf-list-per-view: var(--cpf-list-pv-t, var(--cpf-list-pv, 2));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .cpf-list {
        --cpf-list-per-view: var(--cpf-list-pv-m, var(--cpf-list-pv-t, var(--cpf-list-pv, 1)));
    }
}

.cpf-list .cpf-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpf-list .cpf-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cpf-list .cpf-list__icon {
    flex: 0 0 auto;
    line-height: 1;
    color: var(--cpf-list-icon-color, var(--cpf-list-marker));
}

.cpf-list .cpf-list__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ---------- Bulleted list ---------- */

.cpf-list--ul .cpf-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--cpf-list-gap);
}

.cpf-list--ul .cpf-list__item::before {
    content: "";
    flex: 0 0 auto;
    width: 0.4em;
    height: 0.4em;
    margin-top: 0.45em;
    border-radius: 50%;
    background: var(--cpf-list-marker);
}

/* An icon replaces the round marker */
.cpf-list--ul .cpf-list__item:has(.cpf-list__icon)::before {
    display: none;
}

/* ---------- Numbered list ---------- */

.cpf-list--ol .cpf-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--cpf-list-gap);
    counter-reset: cpf-list;
}

.cpf-list--ol .cpf-list__item {
    counter-increment: cpf-list;
}

.cpf-list--ol .cpf-list__item::before {
    content: counter(cpf-list) ".";
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--cpf-list-marker);
}

/* ---------- Inline chips ---------- */

.cpf-list--inline .cpf-list__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpf-list-gap);
}

.cpf-list--inline .cpf-list__item {
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: var(--cpf-list-chip-bg, rgba(0, 0, 0, 0.03));
}

/* ---------- Columns ---------- */

.cpf-list--grid .cpf-list__items {
    display: grid;
    grid-template-columns: repeat(var(--cpf-list-per-view), minmax(0, 1fr));
    gap: var(--cpf-list-gap);
}

/* ---------- Slider: CSS scroll-snap track ---------- */

.cpf-list--slider {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cpf-list--slider .cpf-list__items {
    display: flex;
    flex: 1 1 auto;
    gap: var(--cpf-list-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cpf-list--slider .cpf-list__items::-webkit-scrollbar {
    display: none;
}

.cpf-list--slider .cpf-list__item {
    flex: 0 0 calc((100% - (var(--cpf-list-per-view) - 1) * var(--cpf-list-gap)) / var(--cpf-list-per-view));
    scroll-snap-align: start;
}

.cpf-list-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cpf-list-arrow-size, 32px);
    height: var(--cpf-list-arrow-size, 32px);
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: var(--cpf-list-arrow-bg, #fff);
    color: var(--cpf-list-arrow-color, inherit);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.cpf-list-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}