/*---*\
Tabbed Accordion
Vertical title list with one content card. Below 1200px the open panel
stacks under its title. At 1200px the intro, titles, and button sit in the
left column and the open panel is vertically centered in the right column.

KEY FEATURES:
- Red (bg-primary) or Light Grey (bg-off-white)
- Optional background graphic on either background. Inline SVG uses charcoal on Light Grey and off-white on Red
- Slanted bottom uses .section-slanted in global.css. Horizontal overflow is clipped so the graphic does not widen the page, and vertical overflow stays visible so the wedge can hang below
- One title button per item. The open panel is not duplicated
- Below 1200px each title is a charcoal bar. Closed titles keep the top radius and use 0 on the bottom-left and bottom-right. The open bar meets an off-white panel, and its chevron points up
- Closed titles below 768px have a white bottom border on Red and a primary-red bottom border on Light Grey
- At 1200px the active title is full color with an orange underline and inactive titles are muted. Chevrons point right

IMPLEMENTATION NOTES:
- The stage uses CSS Grid at 1200px because each panel follows its button in
  source order and the open panel has to share one right-hand cell
- Closed panels set display:none so display:flex does not override the hidden attribute
- The desktop card's gradient border is a border-box background layer under a
  padding-box fill, because border-image would drop the rounded corners
\*---*/

.tabbed-accordion {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

.tabbed-accordion__graphic-wrap {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tabbed-accordion__graphic {
    position: absolute;
    top: -40px;
    left: -30%;
    width: 441px;
    max-width: none;
    height: auto;
    color: var(--color-tertiary);
    opacity: 0.04;
    pointer-events: none;
}

.tabbed-accordion__graphic-wrap--flag .tabbed-accordion__graphic {
    top: -95px;
    left: -110px;
}

.tabbed-accordion.bg-primary .tabbed-accordion__graphic {
    color: var(--color-primary-contrast);
}

.tabbed-accordion .container {
    position: relative;
    z-index: 1;
}

.tabbed-accordion__intro {
    margin-bottom: 32px;
}

.tabbed-accordion__intro > :last-child {
    margin-bottom: 0;
}

.tabbed-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    padding: 20px 22px;
    border: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background-color: var(--color-tertiary);
    background-image: none;
    box-shadow: none;
    color: var(--color-text-inverse);
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    text-align: left;
    cursor: pointer;
    opacity: 1;
}

.tabbed-accordion__intro + .tabbed-accordion__trigger,
.tabbed-accordion__stage > .tabbed-accordion__trigger:first-child {
    margin-top: 0;
}

.tabbed-accordion.bg-primary .tabbed-accordion__trigger:not([aria-expanded="true"]) {
    border-bottom: 2px solid var(--color-white);
}

.tabbed-accordion.bg-off-white .tabbed-accordion__trigger:not([aria-expanded="true"]) {
    border-bottom: 2px solid var(--color-primary);
}

.tabbed-accordion__trigger[aria-expanded="true"] {
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background-color: var(--color-tertiary);
    background-image: linear-gradient(90deg, var(--color-secondary) 0.13%, var(--color-secondary-dark) 99.89%);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% 7px;
    box-shadow: none;
    opacity: 1;
}

.bg-off-white .tabbed-accordion__trigger[aria-expanded="true"] {
    background-image: linear-gradient(90deg, var(--color-primary) 0.13%, var(--color-secondary-dark) 99.89%);
}

.tabbed-accordion__trigger:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.tabbed-accordion.bg-primary .tabbed-accordion__trigger:focus-visible {
    outline-color: var(--color-primary-contrast);
}

.tabbed-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
}

.tabbed-accordion__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    transition: transform 0.2s ease;
}

.tabbed-accordion__trigger .tabbed-accordion__chevron {
    transform: rotate(90deg);
}

.tabbed-accordion__trigger[aria-expanded="true"] .tabbed-accordion__chevron {
    transform: rotate(-90deg);
}

.tabbed-accordion__panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    padding: 25px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background-color: var(--color-surface-off-white);
    color: var(--color-paragraph);
    overflow: hidden;
    transition: height 0.3s ease;
}

.bg-off-white .tabbed-accordion__panel {
    background-color: var(--color-white);
}

.tabbed-accordion__panel[hidden] {
    display: none;
}

.tabbed-accordion__image {
    display: block;
    width: 100%;
    height: 278px;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.tabbed-accordion__content > :first-child {
    margin-top: 0;
}

.tabbed-accordion__content > :last-child {
    margin-bottom: 0;
}

.tabbed-accordion__content h2,
.tabbed-accordion__content h3,
.tabbed-accordion__content h4,
.tabbed-accordion__content h5,
.tabbed-accordion__content h6 {
    margin-bottom: var(--space-paragraph);
    color: var(--color-heading);
    font-size: var(--font-size-h5);
}

.tabbed-accordion__content p {
    color: var(--color-paragraph);
}

.tabbed-accordion__content ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-list-item);
    margin: 0;
}

.tabbed-accordion__content li {
    margin: 0;
}

.tabbed-accordion__content li::before {
    background-color: var(--color-secondary);
}

.tabbed-accordion__content a:not(.btn) {
    color: var(--color-primary);
}

.tabbed-accordion__content .tabbed-accordion__content-title {
    display: none;
}

.tabbed-accordion__cta-wrap {
    margin-top: 32px;
    text-align: left;
}

@media (min-width: 768px) {
    .tabbed-accordion__graphic {
        top: -40px;
        left: -20%;
        width: 480px;
    }
}

@media (min-width: 1200px) {
    .tabbed-accordion__graphic {
        top: -20px;
        left: -224px;
        width: 520px;
        opacity: 0.11;
    }

    .tabbed-accordion__graphic-wrap--flag .tabbed-accordion__graphic {
        top: -85px;
        left: -110px;
        opacity: 0.05;
    }

    .tabbed-accordion__panel ul {
        margin-bottom: 10px;
    }

    .tabbed-accordion__panel a.btn-tertiary {
        background-color: var(--color-surface-off-white);
        background-image: none;
        color: var(--color-tertiary);
    }

    .tabbed-accordion__panel .btn + .btn {
        margin-top: 10px;
    }

    .tabbed-accordion__panel a.btn-tertiary:hover,
    .tabbed-accordion__panel a.btn-tertiary:focus-visible {
        border-color: var(--color-surface-off-white);
        background-color: transparent;
        color: var(--color-surface-off-white);
    }

    .tabbed-accordion__panel a.btn-tertiary:hover::before,
    .tabbed-accordion__panel a.btn-tertiary:focus-visible::before {
        content: none;
    }    

    .tabbed-accordion__stage {
        display: grid;
        grid-template-columns: minmax(0, 649px) minmax(0, 583px);
        column-gap: 64px;
        align-items: start;
        justify-content: start;
    }

    .tabbed-accordion__trigger {
        margin-top: 0;
        padding: 20px 0 18px;
        border-radius: 0;
        background-color: transparent;
        background-image: linear-gradient(90deg, var(--color-secondary) 0.13%, var(--color-secondary-dark) 99.89%);
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: 100% 0;
        box-shadow: inset 0 -2px 0 currentColor;
        color: var(--color-heading);
        opacity: 0.52;
        transition: opacity 0.25s ease, background-size 0.35s ease, box-shadow 0.35s ease;
    }

    .tabbed-accordion.bg-primary .tabbed-accordion__trigger {
        color: var(--color-text-inverse);
    }

    .tabbed-accordion__trigger:hover,
    .tabbed-accordion__trigger:focus-visible {
        border-bottom: 0;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        background-size: 100% 7px;
        box-shadow: inset 0 -2px 0 transparent;
        opacity: 1;
    }

    .tabbed-accordion.bg-primary .tabbed-accordion__trigger:not([aria-expanded="true"]),
    .tabbed-accordion.bg-off-white .tabbed-accordion__trigger:not([aria-expanded="true"]) {
        border-bottom: 0;
    }    

    .tabbed-accordion__trigger[aria-expanded="true"] {
        border-radius: 0;
        background-color: transparent;
        background-size: 100% 7px;
        box-shadow: inset 0 -2px 0 transparent;
        opacity: 1;
    }

    .tabbed-accordion__intro,
    .tabbed-accordion__trigger,
    .tabbed-accordion__cta-wrap {
        grid-column: 1;
    }

    .tabbed-accordion__panel {
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-radius: var(--radius-card-large);
        background-color: var(--color-tertiary);
        background-image:
            linear-gradient(var(--color-tertiary), var(--color-tertiary)),
            linear-gradient(90deg, var(--color-secondary) 0.13%, var(--color-secondary-dark) 99.89%);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        color: var(--color-paragraph-inverse);
    }

    .bg-off-white .tabbed-accordion__panel {
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-radius: var(--radius-card);
        background-color: var(--color-tertiary);
        background-image:
            linear-gradient(var(--color-tertiary), var(--color-tertiary)),
            var(--gradient-primary);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
    }

    .tabbed-accordion__content .tabbed-accordion__content-title {
        display: block;
    }

    .tabbed-accordion__content h2,
    .tabbed-accordion__content h3,
    .tabbed-accordion__content h4,
    .tabbed-accordion__content h5,
    .tabbed-accordion__content h6 {
        color: var(--color-text-inverse);
    }

    .tabbed-accordion__content p {
        color: var(--color-paragraph-inverse);
    }

    .tabbed-accordion__content a:not(.btn) {
        color: var(--color-secondary);
    }

    .tabbed-accordion__panel:not([hidden]) {
        grid-column: 2;
        grid-row: 1 / span 40;
        align-self: center;
        margin-top: 0;
    }

    .tabbed-accordion__trigger .tabbed-accordion__chevron,
    .tabbed-accordion__trigger[aria-expanded="true"] .tabbed-accordion__chevron {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tabbed-accordion__panel,
    .tabbed-accordion__chevron,
    .tabbed-accordion__trigger {
        transition: none;
    }
}