/* Expandable */
.expandable {
    border-radius: var(--radius-md);
    background: var(--color-gray-lightest);
    overflow: hidden;
    margin-block: calc(var(--gap) * 2);
}

.section--gray-lightest .expandable,
.section--blue-ice .expandable,
.section--blue-navy .expandable,
.section--blue-navy-dark .expandable {
    background-color: var(--color-white);
}

.expandable__header {
    display: grid;
    grid-template-columns: 440px 1fr auto auto;
    grid-template-rows: auto auto;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 3);
    cursor: pointer;
    transition: background-color var(--duration-1) var(--ease-standard);
}

.expandable__time {
    font-size: var(--text-xs);
    font-weight: 300;
    color: var(--color-gray);
    white-space: nowrap;
    grid-column: 1;
    grid-row: 1;
}

.expandable__content-wrapper {
    display: contents;
}

.expandable__title {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-gray);
    margin: 0;
    grid-column: 1;
    grid-row: 2;
}

.expandable__description {
    font-size: var(--font-size-100);
    line-height: 1.5;
    color: var(--color-gray);
    margin: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
}

.expandable__image-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 125px;
    border-radius: calc(var(--radius-md) * 0.5);
    overflow: hidden;
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
}

.expandable__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.expandable__toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-blue-sky);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--duration-2) var(--ease-standard);
    color: var(--color-blue-sky);
    grid-column: 4;
    grid-row: 1 / -1;
    align-self: center;
}

.expandable__toggle:hover {
    background-color: var(--color-blue-sky);
    color: var(--color-white);
    transform: scale(1.05);
}

.expandable__toggle svg {
    width: 24px;
    height: 24px;
    transition: transform var(--duration-2) var(--ease-standard);
}

.expandable--expanded .expandable__toggle svg {
    transform: rotate(180deg);
}

.expandable__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-3) var(--ease-standard);
}

.page--nojs .expandable__body,
.expandable--expanded .expandable__body {
    max-height: 2000px;
}

.expandable__body-content {
    color: var(--color-gray);
    padding: 0 calc(var(--gap) * 3) calc(var(--gap) * 3);
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity var(--duration-2) var(--ease-standard),
        transform var(--duration-2) var(--ease-standard);
}

.page--nojs .expandable__body-content,
.expandable--expanded .expandable__body-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 100ms;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .expandable__header {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: calc(var(--gap) * 1.5);
        padding: calc(var(--gap) * 2);
    }

    .expandable__time {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: var(--font-size-100);
    }

    .expandable__image-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-bottom: calc(var(--gap) * 0.5);
    }

    .expandable__title {
        grid-column: 1;
        grid-row: 3;
    }

    .expandable__description {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .expandable__toggle {
        grid-column: 2;
        grid-row: 3;
    }

    .expandable__body-content {
        padding: 0 calc(var(--gap) * 2) calc(var(--gap) * 2);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .expandable__header {
        grid-template-columns: 300px 1fr auto auto;
    }

    .expandable__image-wrapper {
        width: 150px;
        height: 94px;
    }
}