/* Our Story / video-intro — spacing + typography overrides */

/* Kill iOS double-tap zoom on interactive UI (story carousel, lightbox triggers).
   Charcoal only on html — overscroll past the footer. Page content stays white. */
html {
    touch-action: manipulation;
    background-color: #121212;
}

body,
.wrap,
.content,
main,
.intro {
    background-color: #ffffff;
}

/* Hero + engagement block must stay transparent so the polaroid overlaps the green. */
.banner,
.video-intro {
    background-color: transparent;
}

/* Desktop theme sets body/container min-width:992px — breaks mobile text layout */
@media (max-width: 991.98px) {
    html,
    body,
    .container,
    .wrap,
    .content,
    main {
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }

    /* Do NOT set overflow-x on html/body — it breaks position:sticky for all
     * descendants. Horizontal bleed is prevented by avoiding 100vw instead. */
}

/* The engagement thumbnail's aspect box was hardcoded panoramic (51.48%) but
   the actual photo is 1600x898 (56.13%). The <img> is anchored top:0, so the
   extra height spilled BELOW the box and covered the first line of body text.
   Match the box to the real photo ratio and clip with object-fit so the image
   can never overflow into the copy again (regardless of which photo is used). */
.video-intro__thumbnail::before {
    padding-top: 56.13%;
}

.video-intro__thumbnail img,
.video-intro__thumbnail .video-intro__thumb-img {
    height: 100%;
    object-fit: cover;
}

/* Lily tucks under the video thumbnail — crown hidden behind, bloom peeks below */

.video-intro,
.video-intro__inner {
    overflow: visible;
}

.video-intro__media {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.video-intro__media .video-intro__illustrator {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 100%;
    width: min(64vw, 300px);
    height: auto;
    margin: 0;
    transform: translate(-50%, -54%);
    pointer-events: none;
}

.video-intro__media .video-intro__thumbnail {
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.intro__carousel-item {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Bootstrap leaves bottom:0 on controls — stretch breaks the circular arrows.
   Use absolute root paths + embedded SVG so icons never 404 from relative URLs. */
.intro__carousel .carousel {
    touch-action: manipulation;
}

.intro__carousel .carousel-control-prev,
.intro__carousel .carousel-control-next {
    bottom: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.intro__carousel .icon-location {
    display: inline-block;
    width: 11px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'%3E%3Cpath fill='%23FFF' d='M5.5 0C2.467 0 0 2.562 0 5.71c0 2.888 4.3 8.335 4.791 8.947A.909.909 0 005.5 15a.909.909 0 00.709-.343C6.699 14.045 11 8.598 11 5.71 11 2.562 8.533 0 5.5 0zm0 7.5c-1.01 0-1.833-.841-1.833-1.875S4.489 3.75 5.5 3.75c1.01 0 1.833.841 1.833 1.875S6.511 7.5 5.5 7.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.intro__carousel .carousel-control-prev-icon,
.intro__carousel .carousel-control-next-icon {
    display: inline-block;
    width: 16px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11'%3E%3Cpath fill='%23FFF' d='M1.693 6.324H12.18l-3.303 3.27a.818.818 0 000 1.165.837.837 0 001.176 0l4.705-4.66A.817.817 0 0015 5.5a.818.818 0 00-.243-.6L10.052.24a.838.838 0 00-1.176 0 .818.818 0 000 1.165l3.303 3.27H1.693c-.383 0-.693.37-.693.824 0 .455.31.824.693.824'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.intro__carousel .carousel-control-prev-icon {
    transform: rotate(180deg);
}

.intro__carousel-item:focus {
    outline: none;
}

.intro__carousel-item:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.video-intro__text,
.intro__content p {
    font-size: 1.8rem;
    line-height: 1.65;
}

.video-intro__text p,
.intro__content p {
    margin: 0 0 1.15em;
}

.video-intro__text p:last-child,
.intro__content p:last-child {
    margin-bottom: 0;
}

.video-intro__sign {
    margin-top: 1.6em;
    margin-bottom: 0;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 400;
    text-align: right;
    letter-spacing: 0.02em;
}

@media (min-width: 992px) {
    .video-intro__sign {
        text-align: left;
        padding-left: 2rem;
    }
}

@media (max-width: 991.98px) {
    .video-intro__thumbnail {
        margin-bottom: 24px;
    }

    .video-intro__year {
        margin: 16px auto 0;
        max-width: 100%;
        font-size: clamp(76px, 24vw, 128px);
        line-height: 0.95;
    }

    .video-intro__lottie-engagement {
        left: 0;
        right: 0;
        width: min(92vw, 360px);
        max-width: min(92vw, 360px);
        margin: 12px auto 20px;
    }

    .video-intro__media .video-intro__illustrator {
        width: min(60vw, 280px);
        transform: translate(-50%, -52%);
    }

    .video-intro__content {
        margin-top: 28px;
        clear: both;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        text-align: left;
    }

    .video-intro__text {
        margin-top: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .video-intro__sign {
        text-align: left;
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .video-intro__media .video-intro__illustrator {
        left: 24px;
        width: min(52%, 400px);
        transform: translateY(-56%);
    }
}

@media (min-width: 992px) {
    .video-intro__content {
        margin-top: 0;
    }

    /* Comfortable gap under the photo (48px was too airy / top-heavy). */
    .video-intro__text {
        margin-top: 30px;
    }
}