.aiscotland-speakers {
    margin: 40px 0;
}

.aiscotland-speakers__content {
    max-width: 856px;
}

.aiscotland-speakers__grid p,
.aiscotland-speakers__grid ul li {
    color: #ffffff;
}

.aiscotland-speakers__speaker-container {
    position: relative;
}

.aiscotland-speakers__speaker {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #304153;
    padding-right: 32px;
    position: relative;
    max-width: 450px;
}

.aiscotland-speakers__speaker:hover .aiscotland-speakers__arrow{
    right: -4px;
}

.aiscotland-speakers__speaker:hover,
.aiscotland-speakers__speaker:focus {
    text-decoration: none;
}

.aiscotland-speakers__speaker-container:last-of-type .aiscotland-speakers__speaker {
    border-bottom: none;
    margin-bottom: 0;
}

.aiscotland-speakers__image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
    flex-grow: 0;
}

.aiscotland-speakers__image--detail {
    width: 156px;
    height: 156px;
    margin-bottom: 20px;
}

.aiscotland-speakers__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aiscotland-speakers__name {
    font-size: 20px;
    line-height: 1.6; /* 160% */
    color: #ffffff;
}

.aiscotland-speakers__name--detail {
    font-size: 32px;
    line-height: 1.25; /* 160% */
    color: #ffffff;
    margin-bottom: 10px;
}

.aiscotland-speakers__title {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42;
    color: var(--aiscotland-color-primary-teal);;
}

.aiscotland-speakers__title--detail {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.aiscotland-speakers__text {
    margin-bottom: 60px;
    max-width: 856px;
}

.aiscotland-speakers__arrow {
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition: right 0.2s ease;
}

/* Speaker panel - triggered */
.aiscotland-speakers__speaker-detail {
    background-color: var(--aiscotland-color-primary);

    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;

    transform: translateX(100%);  /* move fully off screen to the right */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transition: transform 0.3s ease, opacity 0.3s ease;
}

.aiscotland-speakers__speaker-detail > .container {
    position: relative;
    z-index: 1;
}

.aiscotland-speakers__speaker-detail::before {
    content: "";
    position: absolute;
    top: 65px;
    right: 0;
    height: 725px;
    left: 0;
    background-color: var(--aiscotland-color-primary);
    background-image: url("/wp-content/themes/aiscotland/assets/images/dot-background-narrow.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 0;
    mix-blend-mode: lighten;
    opacity: 0.3;
}

.aiscotland-speakers__speaker-back {
    position: absolute;
    top: 65px;
    right: 0;
    height: 725px;
    left: 0;
    background-color: var(--aiscotland-color-primary);
    background-image: url("/wp-content/themes/aiscotland/assets/images/dot-background-narrow.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 0;
    mix-blend-mode: lighten;
}

.aiscotland-speakers__speaker-detail.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* show focus ring for keyboard users on desktop */
.aiscotland-speakers__speaker-close:focus-visible,
.aiscotland-speakers__speaker:focus-visible {
    outline: auto;
}

/* remove blue outline on mobile/touch programmatic focus */
@media (hover: none) and (pointer: coarse) {
    .aiscotland-speakers__speaker-close:focus-within,
    .aiscotland-speakers__speaker:focus-within {
        outline: none;
    }
}

.aiscotland-speakers__speaker-close {
    background: none;
    color: #fff;
    border: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    padding: 16px 0 16px;
    margin-bottom: 48px;
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {

    .aiscotland-speakers__arrow,
    .aiscotland-speakers__speaker-detail {
        transition: none;
    }
}