.detail {

    max-width: 1180px;

    margin: 0 auto;

}



.detail-back-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--color-text);

    text-decoration: none;

    margin-bottom: 10px;



    &:hover {

        color: var(--color-brand);

        text-decoration: underline;

        text-underline-offset: 3px;

    }



    svg {

        transform: scale(0.85);

    }

}



.detail-head {

    display: flex;

    gap: 16px;

    align-items: center;

    margin-bottom: 0.5rem;



    .button {

        margin-left: auto;

    }

}



.channels {

    display: flex;

    flex-direction: column;

    margin-top: 2.5rem;

}



.channels details {

    border-top: 1px solid var(--color-gray-300);

    interpolate-size: allow-keywords;



    &:last-child {

        border-bottom: 1px solid var(--color-gray-300);

    }



    summary:focus-visible {

        outline: 2px ridge var(--color-gray-800);

        outline-offset: 0;

        z-index: 1;

    }



    summary {

        cursor: pointer;

        list-style: none;

        display: flex;

        align-items: center;

        justify-content: space-between;

        position: relative;

        padding: 20px 4px 20px 0;

        user-select: none;



        &::-webkit-details-marker {

            display: none;

        }



        &::before,

        &::after {

            content: '';

            position: absolute;

            top: 50%;

            right: 3px;

            width: 10px;

            height: 1px;

            background-color: var(--color-gray-800);

            transition: transform 0.25s ease;

        }



        &::before {

            transform: translate(-7px, -50%) rotate(45deg);

        }



        &::after {

            transform: translate(0, -50%) rotate(-45deg);

        }



        .channel-title {

            font-weight: 600;

        }

    }



    &.is-open>summary::before {

        transform: translate(-7px, -50%) rotate(-45deg);

    }



    &.is-open>summary::after {

        transform: translate(0, -50%) rotate(45deg);

    }



    &::details-content {

        block-size: 0;

        opacity: 0;

        overflow: clip;

        transition:

            block-size 0.3s ease,

            opacity 0.25s ease,

            content-visibility 0.3s allow-discrete;

    }



    &[open]::details-content {

        block-size: auto;

        opacity: 1;

    }



    & .channel-body {

        padding: 20px 0 30px 0;

    }

}



.group {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 25px 40px;



    &+.group {

        margin-top: 2rem;

    }

}



.variant {

    margin: 0;

    width: fit-content;

    max-width: 100%;



    & img,

    & video {

        display: block;

        max-width: 100%;

    }



    & figcaption {

        width: 0;

        min-width: 100%;

        margin-top: 0.5rem;

        font-size: 14px;

        word-break: break-all;

    }

}



.ad-preview {

    overflow: hidden;



    iframe {

        display: block;

        border: 0;

        transform-origin: 0 0;

    }



    .ad-preview-controls {

        display: flex;

        gap: 8px;

        margin-top: 8px;

    }

}



/* address specific assets */



.meta .group .variant,

.tvc .group .variant {

    flex-basis: calc((100% - 80px) / 3);

}