/**
 * Accordion item contents
 */

.at-accordion + .at-accordion,
.at-accordion:has(+ .at-accordion) {
    margin-block: 0;
}

.at-accordion__contentWrapper {
    grid-template-columns: 1fr;
    overflow: hidden;
}

.at-accordion__detailsWrapper {
    position: relative;
}

.at-accordion__index {
    display: block;
    top: var(--marginSmallMedium);
    margin-inline: var(--marginSmallMedium);
    font-size: 24px;
    font-weight: 700;
    color: var(--dynamoOrange);
    position: absolute;
    z-index: 100;
}

.at-accordion__imageContainer {
    display: none;
}

.at-accordion__textWrapper,
.at-accordion__imageContainer {
    margin-block: var(--marginSmall);
}

.at-accordion__image {
    border-radius: var(--borderRadiusSmall);
}

.at-accordion__pretitle {
    margin-block-end: var(--marginSmall);
    font-size: var(--introSize);
    font-weight: 500;
    color: var(--primaryColor500);
}

.at-accordion__title {
    margin-block-end: var(--marginMedium);
}

.at-accordion__text {
    max-width: 40ch;
    margin-top: var(--marginSmall);
}

.at-accordion__button {
    display: inline-block;
    margin-block: var(--marginSmall) 0;
}

@media (min-width: 768px) {
    .at-accordion__contentWrapper {
        grid-template-columns: 1fr 1fr;
    }

    .at-accordion__imageContainer {
        display: block;
    }

    .at-accordion__image {
        margin-inline: auto 0;
    }
}

/**
 * Accordion details and summary
 */

.at-accordion__accordionDetails {
    background-color: var(--primaryColor200);
    border-radius: var(--borderRadiusSmall);
}

.at-accordion__contentWrapper {
    padding-inline: var(--marginSmallMedium);
}

.at-accordion__accordionDetails {
    margin-block-end: var(--marginSmall);
    overflow: hidden; /* clips content during animation */
}

.at-accordion__accordionDetails > at-accordion__summary {
    cursor: pointer;
    list-style: none; /* remove default triangle if desired */
}

.at-accordion__accordionDetails > .at-accordion__summary::-webkit-details-marker {
    display: none;
}

.at-accordion__accordionSummary {
    display: flex;
    gap: var(--marginSmall);
    align-items: center;
    min-height: 84px;
    list-style: none;
    padding-block: var(--marginSmall);
    padding-inline: var(--marginSmallMedium);
    background: linear-gradient(to right, rgb(68 199 184 / .6) 0%, var(--primaryColor200) 66%);
    border-radius: var(--borderRadiusSmall);
}

.at-accordion__accordionSummary .at-accordion__title {
    margin-inline-start: 3rem;
}

.at-accordion__accordionSummary:hover {
    cursor: pointer;
}

.open .at-accordion__accordionSummary {
    display: none;
}

.at-accordion__accordionSummary .at-accordion__index,
.at-accordion__accordionSummary .at-accordion__title {
    margin-block: 0;
    font-size: var(--introSize);
}

.at-accordion__accordionSummary::after {
    flex: 0 0 30px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    content: '';
    background: var(--baseLight100) url(../../img/button-arrow.svg) no-repeat;

}