.ia-accordion {
    --_icon-close--accordion: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 11H13V3H11V11H3V13H11V21H13V13H21V11Z' fill='%23167DB7'/%3E%3C/svg%3E");
    --_icon-open--accordion: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 13H3V11H21V13Z' fill='%23167DB7'/%3E%3C/svg%3E");
    --_bgcolor: var(--ia-accordion--bg, transparent);
    --_width: var(--wp--custom--width--default, 800px);
    --_padding-inline: var(--wp--preset--spacing--70, 32px);
    --_padding-block: var(--wp--preset--spacing--80, 40px);
    --_transition-duration: 0.3s;

    width: 100%;
    padding: var(--_padding-block) var(--_padding-inline);
    background: var(--_bgcolor);
}

.ia-accordion--with-image{
    --ia-accordion--list-wrapper--template-columns: 1fr 1fr;
    --ia-accordion--list-wrapper--template-areas: "header header" "image accordions";
    --ia-accordion--list-wrapper--column-gap: var(--wp--preset--spacing--80);
    --ia-accordion--item-image-visible--max-width: 580px;
}

.ia-accordion--inside-title{
    --ia-accordion--list-wrapper--template-columns: fit-content 1fr;
    --ia-accordion--list-wrapper--template-areas: "image header" "image accordions";
    --ia-accordion--list-wrapper--column-gap: var(--wp--preset--spacing--90);
    --ia-accordion--header--text-align: left;
    --ia-accordion--header--padding-block: var(--wp--preset--spacing--60);
}

.ia-accordion--bg-inner {
	--ia-accordion--inner-max-width: var(--wp--custom--width--default);
	--ia-accordion--inner-bg: var(--ia-accordion--bg);
	--ia-accordion--inner--padding-inline: var(--wp--preset--spacing--80);
	--ia-accordion--inner--padding-block: var(--wp--preset--spacing--80);
    
	background: transparent;
}

.ia-accordion--border-radius {
	--ia-accordion--inner--border-radius: var(--wp--custom--border-radius--large);
}

.ia-accordion--gradient-light-blue {
	--ia-accordion--bg: var(--wp--preset--color--gradient-sobu-transparent);
}

.ia-accordion--gradient-blue {
	--ia-accordion--bg: var(--wp--preset--color--gradient-sobu);
	--_color: var(--wp--preset--color--neutral-light);
    --ia-accordion--header--color: var(--wp--preset--color--neutral-light);
    --ia-accordion--item-title-color: var(--wp--preset--color--neutral-light);
    --ia-accordion--item-color-active: var(--wp--preset--color--neutral-800);
    --ia-accordion--item-title-color-active: var(--wp--preset--color--primary-500);
    --ia-accordion--toogle-button--color: var(--wp--preset--color--neutral-light);
    --ia-accordion--toogle-button--color-active: var(--wp--preset--color--primary-500);
}

.ia-accordion--gradient-pink {
	--ia-accordion--bg: var(--wp--preset--color--gradient-moto-transparent);
	--_color: var(--wp--preset--color--neutral-700);
}

.ia-accordion--gradient-gris{
    --ia-accordion--bg: var(--wp--preset--color--neutral-100);
	--_color: var(--wp--preset--color--neutral-700);
}

.ia-accordion--max-width-medium{
    --_width: var(--wp--custom--width--medium, 600px);
}

.ia-accordion__inner {
    --ia-accordion--header--max-width: 900px;

	width        : 100%;
	max-width    : var(--_width);
	margin-inline: auto;
    padding-block: var(--ia-accordion--inner--padding-block, 0) ;
	padding-inline: var(--ia-accordion--inner--padding-inline, ) ;
	border-radius: var(--ia-accordion--inner--border-radius, 0);

    background: var(--ia-accordion--inner-bg, transparent);
}

@media (min-width: 900px){
    .ia-accordion--inside_title .ia-accordion__inner{
        --ia-accordion--inner--padding-inline: 57px;
    }   
}

.ia-accordion--inside_title .ia-accordion__header{
    margin-top: var(--wp--preset--spacing--90);
}

.ia-accordion--inside_title .ia-accordion__accordions{
    margin-bottom: var(--wp--preset--spacing--90);
}

.ia-accordion--inside_title .ia-accordion__item-content{
    --ia-text--padding-inline: var(--wp--preset--spacing--40);
}

.ia-accordion--inside_title .ia-accordion__item-content .ia-text__text{
    --_font-size: var(--wp--preset--font-size--medium);
}

.ia-accordion__list-wrapper{
    --_template-colums: var(--ia-accordion--list-wrapper--template-columns, 1fr);
    --_template-rows: var(--ia-accordion--list-wrapper--template-rows, max-content 1fr);
    --_template-areas: var(--ia-accordion--list-wrapper--template-areas, "header" "accordions");
    --_column-gap: var(--ia-accordion--list-wrapper--column-gap, 0);
    --ia-text--text--text-wrap: normal;

    display: grid;
    grid-template-areas: var(--_template-areas);
    grid-template-columns: var(--_template-colums);
    grid-template-rows: var(--_template-rows);
    column-gap: var(--_column-gap);
}

.ia-accordion__accordions{
    --ia-text--margin-block: 0;
    --ia-text--padding-inline: 0;
    --ia-block-text--text-align: left;

    display: flex;
    grid-area: accordions;
    gap: var(--wp--preset--spacing--80);
}

.ia-accordion__accordion{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.ia-accordion__header{
    --ia-block-text--text-align: var(--ia-accordion--header--text-align, center);
    --_padding-block: 0 var(--ia-accordion--header--padding-block, 0);
    --ia-text--text--color: var(--ia-accordion--header--color, inherit);
    --ia-text--padding-inline: 0;
    --ia-text--margin-block: 0;

    grid-area: header;

    width: 100%;
    max-width: var(--ia-accordion--header--max-width, 900px);
    margin-inline: auto;
    padding-block: var(--_padding-block);
}

.ia-accordion__item-image-wrapper--visible{
    --_max-width: var(--ia-accordion--item-image-visible--max-width, auto);

    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--_max-width);
}

.ia-accordion__item-image-wrapper--visible img{
    overflow: hidden;

    width: auto;
    height: auto;
    border-radius: var(--wp--custom--border-radius--large);

    object-fit: cover;
    margin-inline: auto;
}

@media(max-width:900px){
    .ia-accordion__list-wrapper{
        --ia-accordion--list-wrapper--template-columns: 1fr;
    }
    .ia-accordion__item-image-wrapper--visible{
        display: none;
    }
}

.ia-accordion__item-image-wrapper {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

@media(max-width:900px){
    .ia-accordion__list-wrapper{
        column-gap: 0;
    }
    .ia-accordion__item-image-wrapper {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    .ia-accordion__item-image-wrapper img{
        width: 100%;
        height: auto;
    }
}

.ia-accordion__item-title{
    color: var(--ia-accordion--item-title-color, var(--wp--preset--color--primary-500));
}

.ia-accordion__item {
    --_border-color: var(--ia-accordion--item--border-bottom, var(--wp--preset--color--neutral-500, transparent));
    --_bgcolor: var(--ia-accordion--item--background-color, transparent);
    --_border-radius: var(--ia-accordion--item--border-radius, 0);

    overflow: hidden;

    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid var(--_border-color);
    border-radius: var(--_border-radius, 0);

    background-color: var(--_bgcolor);
}

@media (max-width: 900px) {
    .ia-accordion__item {
        padding-bottom: var(--wp--preset--spacing--60);
    }
    
}

.ia-accordion__item:not(.is-collapsed) {
    --ia-accordion--item--background-color: var(--wp--preset--color--neutral-light);
    --ia-accordion--item--border-radius: var(--wp--custom--border-radius--small);
    --_border-color: transparent;
    --ia-text--text--color: var(--ia-accordion--item-color-active, inherit);
    --ia-accordion--item-title-color: var(--ia-accordion--item-title-color-active, inherit);
    --ia-accordion--toogle-button--color: var(--ia-accordion--toogle-button--color-active, inherit);
}

.ia-accordion__item-header,
.ia-accordion__item-content{
    padding-inline: var(--wp--preset--spacing--50, 16px);
    
}

.ia-accordion__item-content .ia-text__text{
    --_font-size: var(--wp--preset--font-size--small);
}

.ia-accordion__item-content {
    --ia-text--text--margin-block: 0 var(--wp--preset--spacing--50, 16px);
}

.ia-accordion__item-content ul{
    padding-block: var(--wp--preset--spacing--40, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50, 16px);
}

.ia-accordion__item-content li{
    padding-block: var(--wp--preset--spacing--10);
    list-style: none;
    display: flex;
    padding-left: 32px;
    flex-direction: column;
    position: relative;

    strong{
        color: var(--ia-accordion--item-title-color, var(--wp--preset--color--primary-500));
        font-weight: 600;
    }
    
    &:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-block: 6px;
        margin-inline: 6px 14px;
        border-radius: 50%;
        border: solid 2px var(--wp--preset--color--primary-500);
    }

}

.ia-accordion__item-content p{
    margin-block: var(--wp--preset--spacing--40, 12px);
}

.ia-accordion__item-header button {
    display: flex;
    justify-content: space-between;
    
    width: 100%;
    padding-block: var(--wp--preset--spacing--50, 16px);
    border: none;
    align-items: center;
    text-align: left;
    outline: none;
    cursor: pointer;

    background-color: transparent;
}


.ia-accordion__toggle-button {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    
}

.ia-accordion__item .ia-accordion__toggle-button{
    color: var(--ia-accordion--toogle-button--color, var(--wp--preset--color--primary-500));
}

.ia-accordion__item .ia-accordion__toggle-button::after{
    content: "";

    width: 24px;
    height: 24px;
    display: block;
    margin-block: 2px;
    flex-shrink: 0;
    background-color: currentcolor;
    -webkit-mask: var(--_mask);
    mask: var(--_mask);
}

.ia-accordion__item.is-collapsed .ia-accordion__toggle-button {
    --_mask: var(--_icon-close--accordion) no-repeat center / contain;
}

.ia-accordion__item:not(.is-collapsed) .ia-accordion__toggle-button {
    --_mask: var(--_icon-open--accordion) no-repeat center / contain;
}

.ia-accordion__hidden{
    display: none;
}