/*
 * Services accordion - Figma 1:2922 (desktop) / 1:1581 (mobile).
 *
 * Desktop is a centred row, gap 56: a 608 column of heading, tabs and CTA, and
 * a 478 x 807 photo. Mobile is the same column at full width with the photo
 * dropped - the mobile frame has no photo at all, so it is not shrunk, it is
 * gone.
 *
 * The photo column stacks every item's photo and cross-fades between them, so
 * opening a tab does not reflow the row. Stacking also means all four are in
 * the document and decoded before the first swap, which an src swap could not
 * promise.
 */

.services-accordion {
    background: var(--color-offwhite);
    padding: var(--spacing-large) var(--spacing-small);
}

.services-accordion-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.services-accordion-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    /* 608 in the frame; shrinks with the row rather than forcing an overflow. */
    flex: 1 1 608px;
    max-width: 608px;
}

.services-accordion-heading {
    /* The heading wraps at 440 inside the 608 column. */
    max-width: 440px;
}

.services-accordion-list {
    width: 100%;
}

/*------------------------------------------------------------
#TABS
--------------------------------------------------------------*/

.services-accordion-item {
    border-top: 1px solid var(--Light-Grey);
}

.services-accordion-item-heading {
    margin: 0;
}

.services-accordion-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: 0;
    text-align: left;
    color: var(--color-shark);
    cursor: pointer;
}

.services-accordion-item-title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.services-accordion-icon {
    display: block;
    flex: 0 0 24px;
    height: 24px;
    /* The rules are drawn edge to edge in a 24 box, so the leaf is the box. */
    margin-top: 2px;
}

/*
 * The frame closes the header-to-body gap to 16 on an open tab, against the 24
 * that separates one closed tab from the next.
 */
.services-accordion-item.is-open .services-accordion-trigger {
    padding-bottom: 16px;
}

/*
 * One icon, two states: the frame's minus is the plus without its vertical
 * rule, so the open item hides that path rather than swapping the glyph.
 */
.services-accordion-item.is-open .services-accordion-icon-bar {
    opacity: 0;
}

/*------------------------------------------------------------
#PANEL
--------------------------------------------------------------*/

.services-accordion-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
}

.services-accordion-panel[hidden] {
    display: none;
}

.services-accordion-text {
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-shark);
    margin: 0;
}

.services-accordion-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.services-accordion-point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-shark);
}

.services-accordion-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 12px;
    height: 12px;
}

.services-accordion-button {
    display: inline-block;
    text-decoration: none;
}

/*------------------------------------------------------------
#PHOTO
--------------------------------------------------------------*/

.services-accordion-photos {
    position: relative;
    flex: 0 1 478px;
    /* 478 x 807. */
    aspect-ratio: 478 / 807;
    align-self: stretch;
    max-height: 807px;
}

.services-accordion-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 400ms ease;
}

.services-accordion-photo.is-active {
    opacity: 1;
}

.services-accordion-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .services-accordion-photo {
        transition: none;
    }
}

/* Medium devices and below - the mobile frame has no photo. */
@media (max-width: 991.98px) {
    .services-accordion-photos {
        display: none;
    }

    .services-accordion-main {
        flex-basis: auto;
        max-width: none;
    }

    .services-accordion-heading {
        max-width: none;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .services-accordion {
        /* 72 / 16 in the mobile frame. */
        padding: 72px 16px;
    }

    .services-accordion-main {
        gap: 24px;
    }

    .services-accordion-item-title {
        font-size: 20px;
    }
}