/*
    AngelRide components - video card + section heading
    Depends on: /artifacts/css/angelride-theme.css
*/

.ar-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ar-space-3);
    margin-bottom: var(--ar-space-5);
    padding-bottom: var(--ar-space-4);
    border-bottom: 1px solid var(--ar-border-soft);
}

.page-admin-video-set .ar-page-heading,
.page-admin-user .ar-page-heading,
.page-admin-user-video-set-entitlement .ar-page-heading,
.page-admin-edit-user-video-set-entitlement .ar-page-heading,
.page-admin-video .ar-page-heading,
.page-admin-video-source .ar-page-heading,
.page-admin-video-sequence .ar-page-heading,
.page-admin-edit-video-set .ar-page-heading,
.page-admin-edit-video .ar-page-heading,
.page-admin-edit-video-source .ar-page-heading,
.page-admin-edit-video-sequence .ar-page-heading {
    position: sticky;
    top: 76px;
    z-index: 15;
    padding-top: var(--ar-space-3);
    background:
        linear-gradient(90deg, rgba(7, 9, 11, 0.96), rgba(10, 14, 18, 0.94)),
        var(--ar-bg);
    backdrop-filter: blur(16px);
}

.ar-page-heading__meta {
    margin: var(--ar-space-1) 0 0;
    color: var(--ar-text-muted);
    font-weight: 650;
}

.ar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-space-2);
}

.ar-actions--end {
    justify-content: flex-end;
}

.ar-actions--page {
    justify-content: flex-end;
    margin: calc(-1 * var(--ar-space-3)) 0 var(--ar-space-5);
}

.ar-actions--panel {
    justify-content: flex-end;
    margin-top: var(--ar-space-4);
}

.ar-actions--before-panel {
    justify-content: flex-end;
    margin-bottom: var(--ar-space-3);
}

.ar-actions--bulk {
    align-items: center;
    justify-content: flex-end;
}

.ar-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ar-space-5);
    margin-bottom: var(--ar-space-5);
}

.ar-section-heading__text {
    display: grid;
    gap: var(--ar-space-2);
}

.ar-section-heading__title {
    margin: 0;
    font-family: var(--ar-font-display);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.ar-section-heading__title::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: var(--ar-space-3);
    background: linear-gradient(90deg, var(--ar-red-bright), transparent);
}

.ar-section-heading__body {
    max-width: 620px;
    margin: 0;
    color: var(--ar-text-muted);
}

.ar-section-heading__action {
    flex: 0 0 auto;
    color: var(--ar-text-soft);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--ar-transition-fast);
}

.ar-section-heading__action:hover {
    color: var(--ar-red-bright);
}

.ar-video-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ar-space-4);
}

.ar-video-set-sticky-header {
    position: sticky;
    top: 76px;
    z-index: 14;
    padding: var(--ar-space-3) 0 var(--ar-space-4);
    background:
        linear-gradient(90deg, rgba(7, 9, 11, 0.97), rgba(10, 14, 18, 0.96)),
        var(--ar-bg);
    backdrop-filter: blur(16px);
}

.ar-video-set-sticky-header .ar-heading {
    margin-top: 0;
}

.ar-video-view-toggle {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--ar-space-2);
    margin: 0;
    padding: 0 0 0 var(--ar-space-2);
    border: 0;
}

.ar-list-controls--inline.ar-video-list-controls__inline {
    align-items: center;
    grid-template-columns: minmax(12rem, 24rem) auto auto;
}

.ar-list-controls--inline.ar-video-list-controls__inline .ar-list-summary {
    padding-bottom: 0;
}

.ar-video-view-toggle legend {
    float: left;
    margin: 0 var(--ar-space-2) 0 0;
}

.ar-video-view-option__label,
.ar-video-choice {
    color: var(--ar-text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.ar-video-view-option__label--categories {
    margin-left: var(--ar-space-2);
}

.ar-video-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.ar-video-choice input {
    margin: 0;
    accent-color: var(--ar-red);
}

.ar-video-view-panel {
    margin-top: var(--ar-space-4);
}

.ar-video-category-view {
    display: grid;
    gap: var(--ar-space-7);
}

.ar-video-category-view[hidden] {
    display: none;
}

.ar-video-category-heading {
    margin-bottom: var(--ar-space-4);
}

.ar-video-category-heading .ar-section-heading__title {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.ar-video-category-empty {
    margin-top: var(--ar-space-3);
}

[data-video-category-content][hidden] {
    display: none;
}

.ar-video-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ar-border-soft);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 26%),
        linear-gradient(180deg, var(--ar-bg-panel-raised), var(--ar-bg-panel));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    transition:
        transform var(--ar-transition-med),
        border-color var(--ar-transition-med),
        box-shadow var(--ar-transition-med);
}

.ar-video-card[hidden] {
    display: none;
}

.ar-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(135deg, var(--ar-red) 0 1px, transparent 1px 100%),
        linear-gradient(315deg, rgba(184, 192, 199, 0.20) 0 1px, transparent 1px 100%);
    opacity: 0.55;
}

.ar-video-card:hover {
    transform: translateY(-4px);
    border-color: rgba(215, 32, 47, 0.42);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32), 0 0 30px rgba(215, 32, 47, 0.12);
}

.ar-video-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 25%, rgba(215, 32, 47, 0.18), transparent 40%),
        linear-gradient(135deg, #1a222a, #090d10);
}

.ar-video-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.84;
    filter: saturate(0.92) contrast(1.08);
    transition:
        transform var(--ar-transition-med),
        opacity var(--ar-transition-med),
        filter var(--ar-transition-med);
}

.ar-video-card:hover .ar-video-card__media img {
    transform: scale(1.045);
    opacity: 0.96;
    filter: saturate(1.04) contrast(1.12);
}

.ar-video-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.70) 100%),
        linear-gradient(135deg, rgba(215, 32, 47, 0.22), transparent 35%);
}

.ar-video-card__badge {
    position: absolute;
    top: var(--ar-space-3);
    left: var(--ar-space-3);
    z-index: 2;
}

.ar-video-card__duration {
    position: absolute;
    right: var(--ar-space-3);
    bottom: var(--ar-space-3);
    z-index: 2;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.62);
    color: var(--ar-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ar-video-card__play {
    position: absolute;
    left: var(--ar-space-3);
    bottom: var(--ar-space-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(215, 32, 47, 0.88);
    box-shadow: 0 0 24px rgba(215, 32, 47, 0.24);
    transition:
        transform var(--ar-transition-fast),
        background-color var(--ar-transition-fast);
}

.ar-video-card:hover .ar-video-card__play {
    transform: scale(1.07);
    background: var(--ar-red-bright);
}

.ar-video-card__play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    border-block: 7px solid transparent;
    border-left: 10px solid #fff;
}

.ar-video-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: var(--ar-space-2);
    padding: var(--ar-space-4);
}

.ar-video-card__title {
    margin: 0;
    color: var(--ar-text);
    font-family: var(--ar-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.05;
}

.ar-video-card__description {
    margin: 0;
    color: var(--ar-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ar-video-card--placeholder .ar-video-card__media {
    display: grid;
    place-items: center;
}

.ar-video-card--placeholder .ar-video-card__media::before {
    content: "";
    width: 68%;
    height: 48%;
    border: 1px solid rgba(184, 192, 199, 0.18);
    clip-path: polygon(7% 35%, 38% 18%, 78% 20%, 96% 48%, 88% 70%, 18% 70%);
    background:
        linear-gradient(135deg, rgba(215, 32, 47, 0.12), transparent),
        rgba(255, 255, 255, 0.025);
}

.ar-product-video-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 9, 11, 0.98), rgba(13, 18, 22, 0.94)),
        var(--ar-bg);
}

.ar-product-video-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(215, 32, 47, 0.16), transparent 32%),
        linear-gradient(315deg, rgba(184, 192, 199, 0.08), transparent 38%);
}

.ar-product-video-hero__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(20rem, 1.18fr);
    align-items: center;
    gap: var(--ar-space-7);
}

.ar-product-video-hero__content {
    min-width: 0;
}

.ar-product-video-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-space-2);
    margin-top: var(--ar-space-4);
}

.ar-product-video-hero__meta span {
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(184, 192, 199, 0.18);
    background: rgba(255, 255, 255, 0.045);
    color: var(--ar-text-soft);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ar-product-video-hero__purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ar-space-4);
    margin-top: var(--ar-space-6);
}

.ar-product-video-hero__price {
    color: #fff;
    font-family: var(--ar-font-display);
    font-size: 1.7rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ar-product-video-trailer {
    min-width: 0;
}

.ar-product-video-trailer .ar-video-player {
    margin: 0;
}

.ar-product-video-trailer .ar-video-player__media {
    object-fit: cover;
}

.ar-product-video-trailer__empty {
    display: grid;
    min-height: 19rem;
    place-items: center;
    border: 1px solid var(--ar-border-soft);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 30%),
        var(--ar-bg-panel);
    color: var(--ar-text-muted);
}

.ar-product-video-description {
    max-width: 72rem;
}

.ar-product-video-description-section {
    padding-bottom: calc(var(--ar-space-7) / 2);
}

.ar-product-video-list-section {
    padding-top: calc(var(--ar-space-7) / 2);
}

.ar-product-video-description p {
    margin: 0;
    color: var(--ar-text-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.ar-product-video-description .ar-product-video-included-note {
    margin: calc((var(--ar-space-5) + 1.55em) / 2) auto 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}

.ar-product-video-category-list {
    display: grid;
    gap: var(--ar-space-7);
}

.ar-product-video-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ar-space-4);
}

.ar-product-video-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ar-border-soft);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 28%),
        var(--ar-bg-panel);
}

.ar-product-video-card__media {
    position: relative;
    float: left;
    width: 12rem;
    max-width: 42%;
    aspect-ratio: 16 / 9;
    margin-right: 10px;
    margin-bottom: var(--ar-space-2);
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%, rgba(215, 32, 47, 0.18), transparent 42%),
        linear-gradient(135deg, #1a222a, #090d10);
}

.ar-product-video-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.ar-product-video-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.58));
}

.ar-product-video-card__media--placeholder {
    display: grid;
    place-items: center;
}

.ar-product-video-card__media--placeholder::before {
    content: "";
    width: 64%;
    height: 48%;
    border: 1px solid rgba(184, 192, 199, 0.18);
    background: rgba(255, 255, 255, 0.025);
    clip-path: polygon(7% 35%, 38% 18%, 78% 20%, 96% 48%, 88% 70%, 18% 70%);
}

.ar-product-video-card__content {
    padding: var(--ar-space-4);
    min-width: 0;
}

.ar-product-video-card__content::after {
    content: "";
    display: block;
    clear: both;
}

.ar-product-video-card__title {
    margin: 0;
    padding: var(--ar-space-4) var(--ar-space-4) 0;
    color: var(--ar-text);
    font-family: var(--ar-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.12;
}

.ar-product-video-card__description {
    margin: 0;
    color: var(--ar-text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

@media (max-width: 1120px) {
    .ar-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ar-product-video-hero__layout,
    .ar-product-video-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .ar-list-controls--inline.ar-video-list-controls__inline {
        grid-template-columns: minmax(12rem, 24rem) auto auto;
    }
}

@media (max-width: 680px) {
    .ar-list-controls--inline.ar-video-list-controls__inline {
        grid-template-columns: 1fr;
    }

    .ar-video-view-toggle {
        align-self: auto;
    }

    .ar-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ar-video-grid {
        grid-template-columns: 1fr;
    }

    .ar-video-card__media {
        aspect-ratio: 16 / 8.8;
    }

    .ar-product-video-card__media {
        width: 10rem;
        max-width: 48%;
    }
}