/* ==========================================================
   SCINTICA — REFRESHED QUICK RESOURCES
   Adaptive layout
   ========================================================== */

.scintica-qr-shell-a71c9d4e {
    --qr-divider: #E8E1EE;
    --qr-purple: #6A3378;
    --qr-dark: #24112C;
    --qr-text: #2F2F2F;

    box-sizing: border-box;

    display: grid;
    grid-template-columns:
        minmax(200px, 24%)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;

    padding: 20px 22px;

    background: #FFFFFF;

    border: 1px solid var(--qr-divider);
    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 14px 38px -26px
        rgba(22, 9, 28, 0.20);

    font-family: "Montserrat", sans-serif;
}


/* No intro = resources use full width */

.scintica-qr-shell-a71c9d4e.no-intro {
    grid-template-columns: 1fr;
}


/* Intro only */

.scintica-qr-shell-a71c9d4e.no-resources {
    grid-template-columns: 1fr;
}



/* ==========================================================
   INTRO
   ========================================================== */

.scintica-qr-intro-a71c9d4e {
    box-sizing: border-box;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    padding:
        4px
        26px
        4px
        6px;
}


.scintica-qr-intro-title-a71c9d4e {
    margin: 0 0 8px;

    color: var(--qr-dark);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}


.scintica-qr-intro-title-a71c9d4e:last-child {
    margin-bottom: 0;
}


.scintica-qr-intro-description-a71c9d4e {
    max-width: 185px;

    margin: 0;

    color: var(--qr-text);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}



/* ==========================================================
   RESOURCE GRID
   ========================================================== */

/*
 * Flex-wrap is intentional.
 *
 * It allows:
 * 1 item  = full width
 * 2 items = balanced
 * 3 items = balanced
 * 4 items = normal RSM layout
 * 5+      = wraps naturally
 *
 * The final row automatically expands instead of leaving
 * awkward empty grid columns.
 */

.scintica-qr-resources-grid-a71c9d4e {
    box-sizing: border-box;

    min-width: 0;

    display: flex;
    flex-wrap: wrap;

    align-items: stretch;

    gap: 1px;

    background:
        var(--qr-divider);

    border-left:
        1px solid
        var(--qr-divider);
}


.scintica-qr-shell-a71c9d4e.no-intro
.scintica-qr-resources-grid-a71c9d4e {
    border-left: 0;
}



/* ==========================================================
   RESOURCE
   ========================================================== */

.scintica-qr-resource-a71c9d4e {
    box-sizing: border-box;

    /*
     * 180px is the preferred minimum desktop card width.
     * Cards grow evenly to fill each row.
     */
    flex:
        1
        1
        180px;

    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    padding:
        4px
        22px
        4px
        26px;

    background: #FFFFFF;
}


/*
 * No CTA:
 * center the available content vertically instead of leaving
 * an empty CTA-sized region below it.
 */

.scintica-qr-resource-a71c9d4e.no-cta {
    justify-content: center;
}


/*
 * Icon/title only:
 * compact + centered presentation.
 */

.scintica-qr-resource-a71c9d4e.is-minimal {
    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        18px
        18px;
}


.scintica-qr-resource-a71c9d4e.is-minimal
.scintica-qr-resource-content-a71c9d4e {
    width: auto;
}



/* ==========================================================
   RESOURCE CONTENT
   ========================================================== */

.scintica-qr-resource-content-a71c9d4e {
    width: 100%;
    min-width: 0;
}



/* ==========================================================
   ICON
   ========================================================== */

.scintica-qr-icon-a71c9d4e {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin:
        0
        0
        17px;

    color: var(--qr-purple);

    font-size: 28px;
    line-height: 1;
}


.scintica-qr-icon-a71c9d4e i,
.scintica-qr-icon-a71c9d4e svg {
    display: block;

    width: 1em;
    height: 1em;

    color: inherit;

    fill: currentColor;
}


/* Icon only */

.scintica-qr-resource-a71c9d4e.no-title.no-description
.scintica-qr-icon-a71c9d4e {
    margin-bottom: 0;
}


/* Minimal icon + title */

.scintica-qr-resource-a71c9d4e.is-minimal.has-title
.scintica-qr-icon-a71c9d4e {
    margin-bottom: 11px;
}



/* ==========================================================
   TITLE
   ========================================================== */

.scintica-qr-resource-title-a71c9d4e {
    margin:
        0
        0
        10px;

    color: var(--qr-dark);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


/*
 * No description means we don't need the old title margin.
 */

.scintica-qr-resource-a71c9d4e.no-description
.scintica-qr-resource-title-a71c9d4e {
    margin-bottom: 0;
}



/* ==========================================================
   DESCRIPTION
   ========================================================== */

.scintica-qr-resource-description-a71c9d4e {
    margin: 0;

    color: var(--qr-text);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    overflow-wrap: anywhere;
}



/* ==========================================================
   CTA
   ========================================================== */

.scintica-qr-cta-a71c9d4e {
    margin-top: auto;

    padding-top: 14px;

    display: inline-flex;

    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    color: var(--qr-purple);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;

    text-decoration: none !important;

    transition:
        color 0.18s ease;
}


/*
 * If there is no description, keep CTA close to the title/icon
 * rather than pushing it artificially to the bottom.
 */

.scintica-qr-resource-a71c9d4e.no-description.has-cta
.scintica-qr-cta-a71c9d4e {
    margin-top: 12px;

    padding-top: 0;
}


.scintica-qr-resource-a71c9d4e.no-description.has-cta {
    justify-content: center;
}


.scintica-qr-cta-a71c9d4e:hover {
    color: var(--qr-dark);
}


.scintica-qr-cta-a71c9d4e:focus-visible {
    color: var(--qr-dark);

    outline:
        2px solid
        rgba(106, 51, 120, 0.28);

    outline-offset: 4px;

    border-radius: 3px;
}


.scintica-qr-cta-icon-a71c9d4e {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 0.9em;
    line-height: 1;

    transition:
        transform 0.18s ease;
}


.scintica-qr-cta-icon-a71c9d4e i,
.scintica-qr-cta-icon-a71c9d4e svg {
    display: block;

    width: 1em;
    height: 1em;

    fill: currentColor;
}


.scintica-qr-cta-a71c9d4e:hover
.scintica-qr-cta-icon-a71c9d4e {
    transform: translateX(2px);
}



/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .scintica-qr-shell-a71c9d4e {
        grid-template-columns: 1fr;

        padding: 22px;
    }


    .scintica-qr-intro-a71c9d4e {
        padding:
            0
            0
            20px;
    }


    .scintica-qr-intro-description-a71c9d4e {
        max-width: 520px;
    }


    .scintica-qr-resources-grid-a71c9d4e {
        border-left: 0;
    }


    .scintica-qr-shell-a71c9d4e.has-intro
    .scintica-qr-resources-grid-a71c9d4e {
        border-top:
            1px solid
            var(--qr-divider);
    }


    /*
     * Two-column preferred layout.
     * If there is an odd final item it expands to full width.
     */

    .scintica-qr-resource-a71c9d4e {
        flex-basis:
            calc(
                50% - 0.5px
            );

        padding: 22px;
    }


    .scintica-qr-resource-a71c9d4e.is-minimal {
        padding:
            22px
            18px;
    }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .scintica-qr-shell-a71c9d4e {
        padding:
            22px
            20px;
    }


    .scintica-qr-intro-a71c9d4e {
        padding:
            0
            0
            20px;
    }


    .scintica-qr-intro-title-a71c9d4e {
        font-size: 19px;
    }


    .scintica-qr-intro-description-a71c9d4e {
        max-width: none;
    }


    .scintica-qr-resource-a71c9d4e {
        flex-basis: 100%;

        padding:
            20px
            0;
    }


    .scintica-qr-resource-a71c9d4e.is-minimal {
        padding:
            20px
            8px;
    }


    .scintica-qr-icon-a71c9d4e {
        margin-bottom: 12px;
    }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .scintica-qr-cta-a71c9d4e,
    .scintica-qr-cta-icon-a71c9d4e {
        transition: none;
    }


    .scintica-qr-cta-a71c9d4e:hover
    .scintica-qr-cta-icon-a71c9d4e {
        transform: none;
    }

}