/*
    AngelRide media and graphic framing
    Depends on:
    - /assets/css/angelride-theme.css
    - /assets/css/angelride-components.css
    - /assets/css/angelride-utilities.css
*/

.ar-image-frame {
    position: relative;
    overflow: hidden;
    border: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.046), transparent 30%),
        var(--ar-bg-panel);
    box-shadow: var(--ar-shadow-panel);
}

.ar-image-frame--cut {
    --ar-cut-size: 30px;
    --ar-cut-border-color: var(--ar-border);

    clip-path: polygon(
        0 0,
        calc(100% - var(--ar-cut-size)) 0,
        100% var(--ar-cut-size),
        100% 100%,
        var(--ar-cut-size) 100%,
        0 calc(100% - var(--ar-cut-size))
    );
}

.ar-image-frame--red-edge {
    --ar-cut-border-color: rgba(215, 32, 47, 0.82);
    box-shadow: var(--ar-shadow-panel), var(--ar-shadow-red);
}

.ar-image-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(132deg, transparent 0 18%, rgba(215, 32, 47, 0.25) 18.1% 18.35%, transparent 18.45% 100%),
        linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.50) 100%);
    opacity: 0.78;
}

.ar-image-frame__media {
    position: relative;
    aspect-ratio: var(--ar-image-frame-ratio, 16 / 9);
    background:
        radial-gradient(circle at 72% 24%, rgba(215, 32, 47, 0.20), transparent 36%),
        linear-gradient(135deg, #182028, #090d10);
}

.ar-image-frame__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    filter: saturate(0.94) contrast(1.08);
}

.ar-image-frame__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--ar-space-5);
}

.ar-image-frame__placeholder-shape {
    width: min(72%, 420px);
    aspect-ratio: 16 / 8;
    border: 1px solid rgba(184, 192, 199, 0.16);
    background:
        linear-gradient(135deg, rgba(215, 32, 47, 0.20), transparent),
        rgba(255, 255, 255, 0.026);
    clip-path: polygon(5% 56%, 18% 28%, 48% 12%, 80% 24%, 96% 52%, 82% 76%, 24% 80%);
}

.ar-image-frame__caption {
    position: absolute;
    left: var(--ar-space-4);
    right: var(--ar-space-4);
    bottom: var(--ar-space-4);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ar-space-4);
    padding-top: var(--ar-space-3);
    border-top: 1px solid var(--ar-border-soft);
}

.ar-image-frame__caption strong {
    color: var(--ar-text);
    font-family: var(--ar-font-display);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.ar-image-frame__caption span {
    color: var(--ar-text-muted);
    font-size: 0.82rem;
}

.ar-graphic-band {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    border: 1px solid var(--ar-border-soft);
    background:
        radial-gradient(circle at 75% 18%, rgba(215, 32, 47, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
        var(--ar-bg-panel);
}

.ar-graphic-band__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--ar-graphic-opacity, 0.42);
    object-fit: cover;
}

.ar-graphic-band__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--ar-space-3);
    max-width: 640px;
    padding: var(--ar-space-5);
}

.ar-graphic-band__content h3 {
    margin: 0;
    font-family: var(--ar-font-display);
    font-size: 1.55rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.ar-graphic-band__content p {
    margin: 0;
    color: var(--ar-text-muted);
}

@media (max-width: 680px) {
    .ar-image-frame--cut {
        --ar-cut-size: 22px;
    }

    .ar-image-frame__caption {
        align-items: flex-start;
        flex-direction: column;
    }
}