/* DOM class inventory for drkn_usps
 - .drkn--usps
 - .drkn--usps__list
 - .drkn--usps__item
 - .drkn--usps__icon-wrap
 - .drkn--usps__icon
 - .drkn--usps__text
*/

.drkn--usps {
    display: block;
}

.drkn--usps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.drkn--usps__list--tile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

.drkn--usps__list--tile.drkn--usps__list--has-content {
    /* No longer strictly needed for flex, but keeping class for potential overrides */
}

.drkn--usps__list--tile .drkn--usps__item--tile {
    flex: 0 1 calc(33.333% - 1rem);
    min-width: 280px;
}

/* Deterministic columns based on item count (template adds cols-* classes) */
.drkn--usps__list--tile.cols-1 .drkn--usps__item--tile {
    flex: 0 1 50%;
}

.drkn--usps__list--tile.cols-2 .drkn--usps__item--tile {
    flex: 0 1 calc(50% - 1rem);
}

.drkn--usps__list--tile.cols-3 .drkn--usps__item--tile,
.drkn--usps__list--tile.cols-5plus .drkn--usps__item--tile {
    flex: 0 1 calc(33.333% - 1rem);
}

.drkn--usps__list--tile.cols-4 .drkn--usps__item--tile {
    flex: 0 1 calc(25% - 1rem);
}

/* Mobile stacking for usability */
@media (max-width: 640px) {
    .drkn--usps__list--tile .drkn--usps__item--tile,
    .drkn--usps__list--tile.cols-1 .drkn--usps__item--tile,
    .drkn--usps__list--tile.cols-2 .drkn--usps__item--tile,
    .drkn--usps__list--tile.cols-3 .drkn--usps__item--tile,
    .drkn--usps__list--tile.cols-4 .drkn--usps__item--tile,
    .drkn--usps__list--tile.cols-5plus .drkn--usps__item--tile {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.drkn--usps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drkn--usps__item--tile {
    flex-direction: column;
    border-radius: 1rem;
    background-color: var(--color-content-bg);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    border: var(--border-shadow-alt);
    margin: 0;
}

.drkn--usps__icon-wrap {
    flex: 0 0 auto;
    width: 1.5rem; /* 20px */
    height: 1.5rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drkn--usps__item--tile .drkn--usps__icon-wrap {
    width: 5rem;
    height: 5rem;
}

.drkn--usps__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.drkn--usps__icon-svg svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--color-content-primary);
}

.drkn--usps__text {
    font-weight: var(--bold-font-weight, bold);
}

/* Button layout tweaks */
.drkn--usps__btn {
    margin-top: 0.5rem;
}

/* In list mode, keep items in a row and give a small left gap */
.drkn--usps__item:not(.drkn--usps__item--tile) .drkn--usps__btn {
    margin-left: 0.5rem;
}

.drkn--usps__content.drkn--usps__content--tile {
    margin-bottom: 1rem;
}

.drkn--usps__content.drkn--usps__content--tile:last-child {
    margin-bottom: 0;
}

/* In tile mode, place button after content with a larger top gap */
.drkn--usps__item--tile .drkn--usps__btn {
    margin-top: auto;
}