/* ==========================================================================
   Course page sections: review videos, the activities split, and prepare/pack.
   These three came from a dark template (overlay-black-dark, text-white) and
   were left running on light backgrounds, with full width text lines and boxy
   video frames. This file restyles them without touching the markup structure.
   Loaded last so it wins on equal specificity. theme.css and site-ui.css are
   replaced by an external sync, which is why none of this lives there.
   ========================================================================== */

:root {
    --cs-earth: var(--course-earth, #7b6d61);
    --cs-earth-dark: var(--course-earth-dark, #62564d);
    --cs-gold: var(--course-gold, #c79c66);
    --cs-cream: var(--course-cream, #fbf7f1);
    --cs-ink: var(--course-ink, #3f3832);
    --cs-line: var(--course-line, rgba(123, 109, 97, 0.22));
    --cs-shadow: var(--course-shadow, 0 10px 24px rgba(63, 56, 50, 0.06));
}

/* ==========================================================================
   1. Review videos
   ========================================================================== */

/* The intro runs the full container width, matching the video cards below it
   and every other paragraph on these pages. An earlier narrower measure read
   better in isolation but looked wrong against the full width card row. */
body#bg .sya-vid-section .section-content > .row p,
.sya-vid-section .section-content > .row p {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
}

/* Strip the boxy legacy frame and let the thumbnail be the card */
body#bg .sya-vid-section .dez-box,
.sya-vid-section .dez-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: var(--cs-shadow);
    overflow: hidden;
    padding: 0 !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sya-vid-section .dez-box:hover {
    box-shadow: 0 16px 34px rgba(63, 56, 50, 0.16);
    transform: translateY(-3px);
}

.sya-vid-section .dez-media,
.sya-vid-section .sya-video-play-link {
    display: block;
    margin: 0;
}

/* A fixed 16:9 frame stops the different thumbnail sizes from making the
   three cards uneven */
.sya-vid-section .sya-video-poster-container {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.sya-vid-section .sya-video-poster-img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
}

.sya-vid-section .dez-box:hover .sya-video-poster-img {
    transform: scale(1.05);
}

/* ==========================================================================
   2. Activities split (text on one side, video on the other)
   ========================================================================== */

/* dis-tbl is a display:table hack from the template. Flex centres the text
   properly and lets the video column fill its half. */
body#bg .sya-split .dis-tbl,
.sya-split .dis-tbl {
    align-items: center;
    display: flex !important;
    justify-content: center;
}

body#bg .sya-split .dis-tbl-cell,
.sya-split .dis-tbl-cell {
    display: block !important;
    padding: 56px 44px !important;
    width: 100%;
}

.sya-split .max-w600 {
    max-width: 620px;
}

/* The video half was a 480px YouTube thumbnail stretched over ~950px, which is
   why it looked soft and dark. Give it a real frame and cover it properly. */
.sya-split .col-lg-6.p-a0 {
    min-height: 460px;
    position: relative;
}

.sya-split .col-lg-6.p-a0 .sya-video-play-link,
.sya-split .col-lg-6.p-a0 .sya-video-poster-container {
    display: block;
    height: 100%;
    width: 100%;
}

.sya-split .col-lg-6.p-a0 .sya-video-poster-img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ==========================================================================
   3. Prepare and pack
   ========================================================================== */

body#bg .sya-prepack,
.sya-prepack {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#bg .sya-prepack-card,
.sya-prepack-card {
    background: var(--course-card, #fff);
    border: 1px solid var(--cs-line);
    border-radius: 16px;
    box-shadow: var(--cs-shadow);
    padding: 30px 28px 26px;
}

body#bg .sya-prepack-card h2,
.sya-prepack-card h2 {
    font-size: clamp(20px, 1.6vw, 24px) !important;
    margin-bottom: 6px !important;
}

.sya-prepack-card .m-b20 {
    margin-bottom: 14px !important;
}

.sya-prepack-card ol {
    margin-bottom: 0;
}

.sya-prepack-card ol > li {
    margin-bottom: 12px;
}

.sya-prepack-card ol > li:last-child {
    margin-bottom: 0;
}

.sya-prepack-card ul {
    margin-top: 8px;
}

/* ==========================================================================
   Shared: these sections came from a dark template, so headings and body text
   still carry text-white. Force readable colour on the light background.
   ========================================================================== */
body#bg .sya-vid-section .text-white,
body#bg .sya-split .text-white,
body#bg .sya-prepack-section .text-white,
.sya-vid-section .text-white,
.sya-split .text-white,
.sya-prepack-section .text-white {
    color: var(--cs-ink) !important;
}

body#bg .sya-vid-section h2,
body#bg .sya-prepack-section h2,
.sya-vid-section h2,
.sya-prepack-section h2 {
    color: var(--cs-ink) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    body#bg .sya-prepack,
    .sya-prepack {
        grid-template-columns: 1fr;
    }

    body#bg .sya-split .dis-tbl-cell,
    .sya-split .dis-tbl-cell {
        padding: 40px 24px !important;
    }

    .sya-split .col-lg-6.p-a0 {
        min-height: 300px;
    }
}

@media (max-width: 767px) {
    .sya-vid-section .dez-box {
        margin-bottom: 4px;
    }

    body#bg .sya-prepack-card,
    .sya-prepack-card {
        padding: 22px 18px 20px;
    }

    .sya-split .col-lg-6.p-a0 {
        min-height: 230px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sya-vid-section .dez-box,
    .sya-vid-section .sya-video-poster-img {
        transition: none;
    }

    .sya-vid-section .dez-box:hover {
        transform: none;
    }

    .sya-vid-section .dez-box:hover .sya-video-poster-img {
        transform: none;
    }
}