/**
 * Trust Icons - library styles.
 *
 * Variables a site can override:
 *   --trust-card-bg, --trust-card-border, --trust-card-radius,
 *   --trust-icon-color, --trust-value-size, --trust-card-height-mobile,
 *   --trust-expand-max-height.
 */

.trust-section { padding: 60px 24px; }
.trust-section .section-header { text-align: center; margin-bottom: 32px; }
.trust-section .section-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    opacity: .6;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.trust-card {
    position: relative;
    background: var(--trust-card-bg, var(--glass-bg, rgba(255,255,255,0.05)));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--trust-card-border, var(--glass-border, rgba(255,255,255,0.1)));
    border-radius: var(--trust-card-radius, 16px);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
    cursor: default;
}

.trust-icon {
    font-size: 1.75rem;
    color: var(--trust-icon-color, var(--accent, #b08d6e));
    margin-bottom: 12px;
}

.trust-value {
    font-size: var(--trust-value-size, 1.6rem);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 4px;
    display: block;
}
.trust-value-link { text-decoration: none; color: inherit; }
.trust-value-link:hover { color: var(--accent, #b08d6e); }

.trust-label-prefix {
    font-size: .7rem;
    opacity: .55;
    margin-bottom: 2px;
}
.trust-label {
    font-size: .85rem;
    opacity: .75;
    line-height: 1.3;
}

.trust-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    margin-top: 0;
    transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .3s, margin-top .3s;
}

/* Desktop: hover expands detail */
@media (hover: hover) and (min-width: 901px) {
    .trust-card { cursor: pointer; }
    .trust-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    }
    .trust-card:hover .trust-detail,
    .trust-card:focus-within .trust-detail {
        max-height: var(--trust-expand-max-height, 400px);
        opacity: 1;
        margin-top: 16px;
    }
}

/* Mobile: library JS rearranges to 2×2 absolute grid with one card expanded.
   Styles below are applied by .trust-grid-mobile container once JS activates. */
.trust-grid-mobile {
    display: block;
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}
.trust-grid-mobile .trust-card {
    position: absolute;
    box-sizing: border-box;
    padding: 16px;
    transition: left .45s cubic-bezier(.2,.8,.2,1),
                top  .45s cubic-bezier(.2,.8,.2,1),
                width .45s cubic-bezier(.2,.8,.2,1),
                height .45s cubic-bezier(.2,.8,.2,1);
}
.trust-grid-mobile .trust-card .trust-detail {
    max-height: 0;
    opacity: 0;
}
.trust-grid-mobile .trust-card.is-expanded {
    z-index: 2;
}
.trust-grid-mobile .trust-card.is-expanded .trust-detail {
    max-height: var(--trust-expand-max-height, 400px);
    opacity: 1;
    margin-top: 12px;
}
.trust-grid-mobile .trust-card:not(.is-expanded) .trust-icon { margin-bottom: 6px; }
.trust-grid-mobile .trust-card:not(.is-expanded) .trust-value { font-size: 1.1rem; }
.trust-grid-mobile .trust-card:not(.is-expanded) .trust-label-prefix,
.trust-grid-mobile .trust-card:not(.is-expanded) .trust-label {
    font-size: .7rem;
}

/* Static mobile layout - used when bundle_js is not loaded.
   Clean 2-column grid instead of JS-driven carousel. */
@media (max-width: 640px) {
    .trust-grid:not(.trust-grid-mobile) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 100%;
    }
    .trust-grid:not(.trust-grid-mobile) .trust-card {
        padding: 20px 12px;
        min-height: 150px;
    }
    .trust-grid:not(.trust-grid-mobile) .trust-value {
        font-size: 1.3rem;
    }
    .trust-grid:not(.trust-grid-mobile) .trust-icon {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
}

/* A11Y: darker contrast for label-prefix (fixes WCAG 4.5:1) */
.trust-label-prefix {
    opacity: 1;
    color: var(--text-muted, #5c554f);
}

/* Override legacy site CSS that hides 4th trust-card
   (LPG site styles.css has `.trust-grid .trust-card:nth-child(4) { display:none }`
   meant for trust-bar layouts - does not apply to trust-icons). */
.trust-grid [data-trust-card]:nth-child(4) {
    display: flex !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Mobile: hide 3rd trust-card (Dermapen) since it's featured elsewhere on
   microneedling page, keeping the mobile grid to a clean 2x2 of 4 cards. */
@media (max-width: 640px) {
    .trust-grid:not(.trust-grid-mobile) [data-trust-card]:nth-child(3) {
        display: none !important;
    }
}