/* Aoprema Product Content (Split) — two-column product description layout. */

.apc-split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--apc-gap, 30px);
    width: 100%; /* flex roots don't fill on Elementor "Full width" without this */
    align-items: flex-start;
}

.apc-split__text {
    flex: 1 1 var(--apc-left, 50%);
    min-width: 0; /* allow long words / wide media to shrink instead of overflow */
}

.apc-split__videos {
    flex: 1 1 calc(100% - var(--apc-left, 50%));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--apc-video-gap, 20px);
}

/* No videos: let the text fill the full width. */
.apc-split--no-video .apc-split__text {
    flex-basis: 100%;
}

/* Keep typical WP description markup tidy inside the column. */
.apc-split__text > :first-child {
    margin-top: 0;
}
/* Lists had margin-bottom:0 (theme reset), so the next paragraph stuck to them. */
.apc-split__text ol,
.apc-split__text ul {
    margin: 0 0 0.9em;
}
.apc-split__text img {
    max-width: 100%;
    height: auto;
}

/* Responsive 16:9 embeds — overrides the hardcoded 540×330 we stripped. */
.apc-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.apc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* YouTube click-to-play facade. Selectors are doubled + !important because the
   Elementor kit styles every <button> (red background, radius, padding). */
.apc-yt .apc-yt__btn,
.apc-yt .apc-yt__btn:hover,
.apc-yt .apc-yt__btn:focus {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    min-height: 0;
    cursor: pointer;
    overflow: hidden;
}
.apc-yt .apc-yt__btn:focus-visible {
    outline: 3px solid #e2231a;
    outline-offset: 2px;
}
.apc-yt__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* hqdefault is 4:3 with black bars — crop to 16:9 */
    display: block;
    transition: opacity .2s;
}
.apc-yt__btn:hover img,
.apc-yt__btn:focus-visible img {
    opacity: .85;
}
.apc-yt__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    background: #e2231a;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.apc-yt__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -7px;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
}

/* Editor-only placeholder notice. */
.apc-notice {
    padding: 16px;
    background: #f5f5f5;
    border: 1px dashed #c3c4c7;
    color: #555;
    text-align: center;
}

/* Desktop-only column swap, so mobile order always stays description-first. */
@media (min-width: 768px) {
    .apc-split--videos-left .apc-split__videos {
        order: -1;
    }
}

/* Mobile: stack vertically, description first (natural DOM order). */
@media (max-width: 767px) {
    .apc-split {
        flex-direction: column;
        /* In a column flex, align-items controls width. Must stretch, or the
           video column shrinks to its content (an absolutely-positioned iframe
           = 0 width) and the 16:9 box collapses to 0×0. */
        align-items: stretch;
    }
    .apc-split__text,
    .apc-split__videos {
        flex-basis: auto;
        width: 100%;
    }
}