/*
 * ITEP Editor Tools: styles for the blocks the editor tools generate.
 * Loaded on the frontend and inside the editor.
 * Requires the theme palette variables (--color-primary, --color-accent, etc.).
 */

/* Quote: suppress theme/Bootstrap pseudo-element quote marks */
.itep-quote::before,
.itep-quote::after
{
    content: none !important;
}

/* Tooltip trigger text */
.has-tooltip
{
    border-bottom: 1px dotted var(--color-secondary);
}

.has-tooltip:hover
{
    background-color: var(--color-accent);
    color: #000 !important;
}

/* Endnotes block */
.footnotes
{
    max-width: 100%;
    overflow: auto;
}

/* Full-width colored band (Cards block "Color Block" option) */
.full-bleed
{
    width: 100vw;
    margin-left: 50%;
    margin-top: 3rem;
    margin-bottom: 3rem;
    transform: translateX(-50%);
}

/* Cards block */
.itep-card
{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none;
    border-top: 4px solid var(--color-link-primary);
    border-radius: .375rem;
    transition: transform .15s ease, border-top .15s ease, box-shadow .15s ease;
}

.itep-card:hover
{
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

.itep-card .card-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.1rem;
}

.itep-card:hover .card-icon
{
    background: var(--color-link-primary);
    transition: background .15s ease;
}

/* Scroll-snap carousel (items per view: 1 mobile, 2 tablet, 3 desktop) */
.itep-carousel
{
    --itep-gap: 1rem;
    --itep-item-width: 85%;
}

@media (min-width: 768px)
{
    .itep-carousel
    {
        --itep-item-width: calc((100% - var(--itep-gap)) / 2);
    }
}

@media (min-width: 992px)
{
    .itep-carousel
    {
        --itep-item-width: calc((100% - 2 * var(--itep-gap)) / 3);
    }
}

/* Side padding leaves room for the hover shadow; the negative margin cancels it out */
.itep-carousel__track
{
    display: flex;
    gap: var(--itep-gap);
    margin-inline: -0.5rem;
    padding: 1rem 0.5rem 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 0.5rem;
    scroll-snap-type: x mandatory;
}

.itep-carousel__track::-webkit-scrollbar
{
    display: none;
}

.itep-carousel__item
{
    display: flex;
    flex: 0 0 var(--itep-item-width);
    scroll-snap-align: start;
}

/* Keep long titles inside the short image */
.itep-carousel .card-img-overlay h3
{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.itep-carousel .card-img-overlay
{
    transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.itep-carousel .hover-card:hover .card-img-overlay,
.itep-carousel .hover-card:focus-within .card-img-overlay
{
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce)
{
    .itep-carousel .card-img-overlay
    {
        transition: none;
    }
}