/**
 * ICON BOXES Component
 *
 * All color and style values driven by CSS variables
 * stamped on :root via ACF options in icon-sets.php.
 *
 * @package Blueprint
 */

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


/* ICON BOXES -- Icon Box Wrapper */
.icon-box-wrapper {
    width: 100%;
    border-left: 1px solid var(--icon-box-left-border-color);
    padding: 50px 0 50px 30px;
}

.icon-box-grid {
    display: flex;
    flex-direction: column;
    gap: var(--icon-box-gap);
}

/* ICON BOXES -- Individual Icon Box Item */
.icon-box-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    transition: all 0.3s ease;
    border-radius: var(--icon-box-border-radius);
    overflow: hidden;
}

.icon-box-item:not(.has-full-link) {
    padding: var(--icon-box-padding);
}

/* ICON BOXES -- Icon Circle */
.icon-box-icon {
    flex-shrink: 0;
    width: var(--icon-box-icon-size);
    height: var(--icon-box-icon-size);
    border-radius: var(--icon-box-icon-shape);
    border: var(--icon-box-border-width) solid var(--icon-box-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-box-icon-font-size);
    color: var(--icon-box-icon-border-color);
    transition: all 0.3s ease;
}

/* ICON BOXES -- Content Area */
.icon-box-content {
    flex: 1;
    padding-top: 8px;
}

/* ICON BOXES -- Title */
.icon-box-title {
    margin: 0 0 12px 0;
    color: var(--icon-box-title-color);
}

/* ICON BOXES -- Content Text */
.icon-box-snippet {
    margin: 0;
    color: var(--icon-box-content-color);
}

.icon-box-snippet p {
    margin: 0;
    color: var(--icon-box-content-color);
}

/* ICON BOXES -- Full Box Link */
.icon-box-full-link {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    padding: var(--icon-box-padding);
    transition: background-color 0.3s ease;
}

.icon-box-item {
    background-color: var( --icon-box-bg-color);
}

/* ICON BOXES -- Hover States */
.icon-box-item.has-full-link:hover .icon-box-full-link {
    background: var(--icon-box-hover-bg);
    text-decoration: none;
}

.icon-box-item.has-full-link:hover .icon-box-icon {
    background-color: var(--icon-box-hover-icon-bg);
    color: var(--icon-box-hover-icon-color);
    border-color: var(--icon-box-hover-icon-border-color);
    text-decoration: none;
}

.icon-box-item.has-full-link:hover .icon-box-title {
    color: var(--icon-box-hover-title-color);
}

.icon-box-item.has-full-link:hover .icon-box-snippet {
    color: var(--icon-box-hover-content-color);
    text-decoration: none;
}

/* ICON BOXES -- Title-Only Link Styles */
.icon-box-title-link {
    color: var(--icon-box-title-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.icon-box-title-link:hover {
    color: var(--icon-box-hover-title-link-color);
}

.icon-box-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 30px;
}

.icon-box-title-link:hover .icon-box-arrow {
    color: var(--icon-box-hover-title-link-color);
}

/*.icon-box-arrow-mobile {*/
/*    display: none;*/
/*}*/

/* ICON BOXES -- Responsive */
@media (max-width: 992px) {
    .icon-box-wrapper {
        padding: 20px 0;
        border: none;
    }

}

@media (max-width: 768px) {
    .icon-box-grid {
        gap: 20px;
    }

    .icon-box-item {
        gap: 16px;
    }

    .icon-box-full-link {
        padding: 16px;
    }

    .icon-box-item:not(.has-full-link) {
        padding: 16px;
    }

    .icon-box-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }


    .icon-box-arrow{
        font-size: 20px;
    }

    .icon-box-arrow-mobile {
        display: inline-block;
    }
}