/* ==========================================================
   RANKLY FÖRTROENDESEKTION
   Fristående child-theme-modul.
   - Samma desktopbredd som Ranklys övriga huvudinnehåll.
   - Desktop och mobil har separata storleksinställningar.
   - Mobil kan valfritt använda kant-till-kant-bakgrund.
========================================================== */

.rankly-trust-section {
    width: 100%;
    margin-top: var(--rankly-trust-mt-d, 64px);
    margin-bottom: var(--rankly-trust-mb-d, 64px);
    box-sizing: border-box;
    color: var(--rankly-trust-text, #374151);
}

.rankly-trust-section,
.rankly-trust-section * {
    box-sizing: border-box;
}

/*
 * Viktigt: använd samma desktoplinje som kategorihero,
 * produktkategori-pills och övrigt Rankly-innehåll.
 * Ingen extra 16px-inset på desktop.
 */
.rankly-trust-section__inner {
    width: min(100%, var(--rankly-trust-max-width, 1500px));
    max-width: var(--rankly-trust-max-width, 1500px);
    min-height: var(--rankly-trust-min-h-d, 0px);
    margin-inline: auto;
    padding:
        var(--rankly-trust-py-d, 42px)
        var(--rankly-trust-px-d, 48px);
    background: var(--rankly-trust-bg, #fff);
    border: 1px solid var(--rankly-trust-border, #e5e7eb);
    border-radius: var(--rankly-trust-radius-d, 24px);
}

.rankly-trust-section__intro {
    max-width: 780px;
    margin: 0 0 clamp(30px, 3.3vw, 48px);
}

.rankly-trust-section__eyebrow {
    margin: 0 0 8px;
    color: var(--rankly-trust-accent, #0b8f48);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rankly-trust-section__heading {
    margin: 0;
    max-width: 760px;
    color: var(--rankly-trust-heading, #111827);
    font-size: var(--rankly-trust-heading-d, 32px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.rankly-trust-section__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
}

.rankly-trust-section__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rankly-trust-section__grid--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
}

.rankly-trust-item {
    min-width: 0;
    margin: 0;
}

.rankly-trust-item__icon {
    width: 44px;
    height: 44px;
    margin: 0 0 20px;
    color: var(--rankly-trust-icon, #111827);
}

.rankly-trust-item__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rankly-trust-item__title {
    margin: 0 0 8px;
    color: var(--rankly-trust-heading, #111827);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.012em;
}

.rankly-trust-item__title a,
.rankly-trust-item__title a:visited {
    color: inherit;
    text-decoration: none;
}

.rankly-trust-item__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rankly-trust-item__text {
    color: var(--rankly-trust-text, #374151);
    font-size: 15.5px;
    line-height: 1.58;
}

.rankly-trust-item__text p {
    margin: 0;
}

.rankly-trust-item__text p + p {
    margin-top: .65em;
}

.rankly-trust-item__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 800px) {
    .rankly-trust-section {
        margin-top: var(--rankly-trust-mt-m, 44px);
        margin-bottom: var(--rankly-trust-mb-m, 44px);
    }

    /*
     * Mobil har en egen sidmarginal. Standard är 16px per sida,
     * men värdet kan ändras i admin utan att påverka desktop.
     */
    .rankly-trust-section__inner {
        width: calc(100% - (2 * var(--rankly-trust-mobile-side-margin, 16px)));
        max-width: none;
        min-height: var(--rankly-trust-min-h-m, 0px);
        padding:
            var(--rankly-trust-py-m, 28px)
            var(--rankly-trust-px-m, 22px);
        border-radius: var(--rankly-trust-radius-m, 24px);
    }

    /*
     * Valbar kant-till-kant-bakgrund på mobil.
     * Bryter ut bakgrundsboxen ur temats eventuella innehållswrapper,
     * medan den invändiga paddingen fortfarande styr innehållets luft.
     */
    .rankly-trust-section--mobile-full .rankly-trust-section__inner {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    @supports (width: 100dvw) {
        .rankly-trust-section--mobile-full .rankly-trust-section__inner {
            width: 100dvw;
            margin-left: calc(50% - 50dvw);
            margin-right: calc(50% - 50dvw);
        }
    }

    .rankly-trust-section__intro {
        margin-bottom: 28px;
    }

    .rankly-trust-section__heading {
        font-size: var(--rankly-trust-heading-m, 27px);
        line-height: 1.15;
    }

    .rankly-trust-section__grid,
    .rankly-trust-section__grid--2,
    .rankly-trust-section__grid--1 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: none;
    }

    .rankly-trust-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding: 20px 0;
        border-top: 1px solid var(--rankly-trust-border, #e5e7eb);
    }

    .rankly-trust-item:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .rankly-trust-item:last-child {
        padding-bottom: 0;
    }

    .rankly-trust-item__icon {
        width: 38px;
        height: 38px;
        margin: 1px 0 0;
    }

    .rankly-trust-item__title {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .rankly-trust-item__text {
        font-size: 14.5px;
        line-height: 1.52;
    }
}


/*
 * När "Avstånd under" är 0 ska det verkligen betyda 0 hela vägen till
 * den riktiga footern. Blooming Blog Pro kan lägga egen margin-top på
 * #colophon; den neutraliseras bara när användaren uttryckligen valt 0 px.
 */
@media (min-width: 801px) {
    .rankly-trust-section--flush-footer-desktop {
        margin-bottom: 0 !important;
    }

    .rankly-trust-section--flush-footer-desktop + #colophon.site-footer,
    .rankly-trust-section--flush-footer-desktop + .site-footer {
        margin-top: 0 !important;
    }
}

@media (max-width: 800px) {
    .rankly-trust-section--flush-footer-mobile {
        margin-bottom: 0 !important;
    }

    .rankly-trust-section--flush-footer-mobile + #colophon.site-footer,
    .rankly-trust-section--flush-footer-mobile + .site-footer {
        margin-top: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rankly-trust-section *,
    .rankly-trust-section *::before,
    .rankly-trust-section *::after {
        scroll-behavior: auto !important;
    }
}