/* =========================================================
   SCHOOLS & WORKSHOPS

   One full-width section per workshop, alternating white and
   pale blue. Text on the left, a mixed carousel of social
   embeds and gallery photos on the right, stacking below
   980px.

   See /inc/workshops.php,
       /templates/workshops.php,
       /assets/js/workshops.js
   ========================================================= */

.mwd-ws {
    --ws-tint: #e7f6fb;
    --ws-heading: #053a4d;
    --ws-accent: #01bcef;
    --ws-arrow-bg: #e2eff7;

    --ws-rail: 520px;
    --ws-gap: 20px;
    --ws-radius: 12px;

    /*
     * The space between the content column and the edge of the screen. The
     * column is 90% wide up to a 1080px cap, so below roughly 1200px the
     * gutter is 5vw and above it the leftover half. The rail is pushed out
     * into this so slides run off the edge of the screen rather than stopping
     * short at the column edge.
     */
    --ws-gutter: max((100vw - 1080px) / 2, 5vw);

    --ws-embed-border: rgba(5, 58, 77, 0.14);

    /*
     * Breathing room after the last slide. Capped, because the raw gutter is
     * several hundred pixels on a wide screen and scrolling to the end would
     * leave the rail looking empty rather than finished. On a phone the cap
     * never bites, so the trailing space matches the leading inset.
     */
    --ws-rail-end: min(var(--ws-gutter), 56px);

    --ws-logo-opacity: 0.15;

    /*
     * Break out of whatever Divi column the shortcode sits in so the
     * alternating backgrounds reach the edge of the viewport. Drop these three
     * lines and put the backgrounds on Divi rows instead if you'd rather keep
     * the section inside the builder's own width.
     */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* =========================================================
   SECTION
   ========================================================= */

.mwd-ws-section {
    padding: 120px 0;
}


.mwd-ws-section--light {
    background: #ffffff;
}


.mwd-ws-section--tint {
    background: var(--ws-tint);
}


.mwd-ws-inner {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: center;

    gap: 48px;

    width: 90%;
    max-width: 1080px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   TEXT
   ========================================================= */

/* =========================================================
   LOGO DECOR

   An optional school crest, sunk into the empty gutter to
   the left of the text column. It sits behind the words at
   low opacity and is purely decorative, so it's hidden from
   assistive technology and dropped entirely once the layout
   stacks and there's no spare room for it.
   ========================================================= */

.mwd-ws-text {
    position: relative;
}


.mwd-ws-logo {
    position: absolute;
    z-index: 0;

    top: 50%;

    /*
     * Pushed out into the gutter, but only as far as there is gutter to use.
     * On a 1440 screen that's about 180px; on anything wider it stops at 300
     * so the crest doesn't drift away from the text it belongs to.
     */
    left: calc(min(var(--ws-gutter), 300px) * -1);

    width: 460px;

    transform: translateY(-50%);

    opacity: var(--ws-logo-opacity);

    pointer-events: none;
}


.mwd-ws-logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* Everything real sits above it. */

.mwd-ws-title,
.mwd-ws-body,
.mwd-ws-gate,
.mwd-ws-links,
.mwd-ws-nav {
    position: relative;
    z-index: 1;
}


.mwd-ws-links {
    margin: 20px 0 0;
}


.mwd-ws-title {
    margin: 0 0 16px;
    padding: 0;

    color: var(--ws-heading);

    font-family: var(--et_global_heading_font);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2em;
}


.mwd-ws-body,
.mwd-ws-body p,
.mwd-ws-body li {
    color: var(--gcid-body-color) !important;

    font-family: var(--et_global_body_font);
    font-size: 16px;
    line-height: 1.5em;
}


.mwd-ws-body > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CONSENT GATE

   Only ever visible when the visitor has not allowed social
   content and the workshop actually has some.
   ========================================================= */

.mwd-ws-gate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;

    margin-top: 28px;
}


.mwd-ws-gate[hidden] {
    display: none;
}


.mwd-ws-allow {
    display: inline-block;

    padding: 11px 22px;

    border: 0;
    border-radius: var(--ws-radius);

    background: var(--ws-accent);
    color: #ffffff;

    font-family: var(--et_global_body_font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition: opacity 150ms ease;
}


.mwd-ws-allow:hover,
.mwd-ws-allow:focus {
    background: var(--ws-accent);
    color: #ffffff;
    opacity: 0.85;
}


.mwd-ws-allow:focus-visible {
    outline: 2px solid var(--ws-heading);
    outline-offset: 2px;
}


/* The site's dashed arrow link. The arrow is a glyph from Divi's ETmodules
   icon font sitting in the right-hand padding, not a separate element. */

.mwd-ws-fallback {
    position: relative;
    display: inline-block;

    padding: 5.4px 36px 5.4px 12.6px;

    border-bottom: 1px dashed var(--gcid-secondary-color);

    background: none;
    color: var(--ws-accent);

    font-family: var(--et_global_body_font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7em;

    text-decoration: none;

    transition: opacity 150ms ease;
}


.mwd-ws-fallback::after {
    content: '$';

    position: absolute;
    top: 50%;
    right: 12.6px;

    transform: translateY(-50%);

    font-family: ETmodules !important;
    font-size: 18px;
    line-height: 1em !important;
}


.mwd-ws-fallback:hover {
    color: var(--ws-accent);
    text-decoration: none;
    opacity: 0.75;
}


/* =========================================================
   RAIL
   ========================================================= */

.mwd-ws-media {
    margin-right: calc(var(--ws-gutter) * -1);
}


.mwd-ws-rail {
    position: relative;

    display: flex;
    align-items: center;

    gap: var(--ws-gap);

    height: var(--ws-rail);

    margin: 0;
    padding: 0;

    list-style: none;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}


.mwd-ws-rail::-webkit-scrollbar {
    display: none;
}


/* Stands in for the trailing padding a scrolling flex container won't honour.
   Carries no slide class, so the slider's measuring ignores it. */

.mwd-ws-rail::after {
    content: "";

    flex: 0 0 var(--ws-rail-end);
    align-self: stretch;
}


/* Divi puts bullets and counters on stray list items. */

.mwd-ws .mwd-ws-rail,
.mwd-ws .mwd-ws-rail > li.mwd-ws-slide {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}


.mwd-ws .mwd-ws-rail > li.mwd-ws-slide::marker {
    content: none;
}


.mwd-ws .mwd-ws-rail > li.mwd-ws-slide::before {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SLIDES
   ========================================================= */

.mwd-ws-slide {
    flex: 0 0 auto;

    height: 100%;
    margin: 0;

    border-radius: var(--ws-radius);
    overflow: hidden;

    scroll-snap-align: start;
}


.mwd-ws-slide[hidden] {
    display: none;
}


/* Photos take their width from the attachment's own aspect ratio, capped so
   a panorama can't swallow the whole rail. */

.mwd-ws-slide--photo {
    max-width: 620px;
}


.mwd-ws-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Embeds are a fixed width per platform. --ws-h is 100% for the tall card
   formats and a pixel height for a 16:9 YouTube player, which is centred in
   the rail rather than stretched. */

/* The embed renders as a plain white page, so on a white section it dissolved
   into the background with no edge at all. A hairline border and the same
   radius as the photos gives it a card to sit in. Its own content has square
   corners, so nothing of substance gets clipped by the rounding. */

.mwd-ws-slide--embed {
    display: flex;
    align-items: center;

    border: 1px solid var(--ws-embed-border);
    border-radius: var(--ws-radius);

    flex: 0 0 var(--ws-w);
    width: var(--ws-w);

    background: transparent;
}


.mwd-ws-slide--embed iframe {
    display: block;

    width: 100%;
    height: var(--ws-h);

    border: 0;
    border-radius: calc(var(--ws-radius) - 1px);
}


/* Videos size exactly like photos: fill the rail height, width follows the
   aspect ratio. The ratio starts as whatever WordPress recorded and gets
   rebuilt by the script once the browser reports the true frame size, which
   is the only figure that accounts for a phone's rotation metadata. */

.mwd-ws-slide--video {
    position: relative;

    max-width: 620px;
    background: #000000;
}


.mwd-ws-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.mwd-ws-mute {
    position: absolute;
    left: 12px;
    bottom: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(5, 58, 77, 0.55);
    color: #ffffff;

    cursor: pointer;

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    transition: background 150ms ease;
}


.mwd-ws-mute[hidden] {
    display: none;
}


.mwd-ws-mute:hover {
    background: rgba(5, 58, 77, 0.8);
    color: #ffffff;
}


.mwd-ws-mute:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}


.mwd-ws-mute svg {
    display: block;

    width: 18px;
    height: 18px;
}


/* aria-pressed tracks the muted state, so the icon follows from it rather
   than needing a class of its own. Pressed means muted, and the button is
   offering to turn the sound on. */

.mwd-ws-mute .mwd-ws-mute-on {
    display: none;
}


.mwd-ws-mute[aria-pressed="false"] .mwd-ws-mute-off {
    display: none;
}


.mwd-ws-mute[aria-pressed="false"] .mwd-ws-mute-on {
    display: block;
}


/* =========================================================
   ARROWS
   ========================================================= */

/* The arrows sit under the body text rather than beneath the rail. Below the
   rail they were the only thing in an otherwise empty band, floating at an
   arbitrary point in the gutter; in the text column they give that column
   some weight at the bottom and sit where the eye already is. */

.mwd-ws-nav {
    display: flex;
    justify-content: flex-start;

    gap: 10px;

    margin-top: 28px;
}


.mwd-ws-nav[hidden] {
    display: none;
}


.mwd-ws-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--ws-arrow-bg);
    color: var(--ws-accent);

    cursor: pointer;

    transition:
        background 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}


.mwd-ws-section--tint .mwd-ws-arrow {
    background: #ffffff;
}


.mwd-ws-arrow svg {
    display: block;

    width: 18px;
    height: 18px;
}


.mwd-ws-arrow:hover:not(:disabled) {
    background: var(--ws-accent);
    color: #ffffff;
}


.mwd-ws-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


.mwd-ws-arrow:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}


/* =========================================================
   OFF-SCREEN WORK

   The first two sections render normally. Everything after
   is skipped until the browser gets near it, which keeps
   layout and paint costs flat however many workshops are
   published. The intrinsic size is a rough guess at section
   height so the scrollbar doesn't jump around.
   ========================================================= */

.mwd-ws-section:nth-child(n+3) {
    content-visibility: auto;
    contain-intrinsic-size: auto 820px;
}


/* =========================================================
   MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mwd-ws-rail {
        scroll-behavior: auto;
    }

    .mwd-ws-allow,
    .mwd-ws-arrow,
    .mwd-ws-fallback {
        transition: none;
    }

}


/* =========================================================
   STACKED
   ========================================================= */

@media (max-width: 979px) {

    .mwd-ws {
        --ws-rail: 480px;
    }

    .mwd-ws-section {
        padding: 100px 0;
    }

    .mwd-ws-section:nth-child(n+3) {
        contain-intrinsic-size: auto 900px;
    }

    .mwd-ws-inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;

        gap: 32px;
    }

    .mwd-ws-logo {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .mwd-ws {
        --ws-rail: 430px;
        --ws-gap: 14px;
    }

    .mwd-ws-section {
        padding: 80px 0;
    }

    .mwd-ws-title {
        font-size: 30px;
    }

    .mwd-ws-slide--photo,
    .mwd-ws-slide--video {
        max-width: 300px;
    }

    .mwd-ws-section:nth-child(n+3) {
        contain-intrinsic-size: auto 780px;
    }

    /*
     * Bleed the rail out to both edges rather than just the right. On a narrow
     * screen the left gutter is only a few percent, so clipping a sliver of
     * slide against it read as a mistake rather than as an edge. The matching
     * padding keeps the first slide lined up with the heading, and the scroll
     * padding makes snapping settle against that same line instead of the
     * screen edge.
     */

    .mwd-ws-media {
        margin-left: calc(var(--ws-gutter) * -1);
    }

    .mwd-ws-rail {
        padding-left: var(--ws-gutter);
        scroll-padding-left: var(--ws-gutter);
    }

}