/* Wedding Souls — home page sections rebuilt in our own markup, replacing
   template blocks that Webflow's runtime animated (owner-approved 2026-10-08).
   Motion start states hang off html.motion-on, as in motion.css. */

/* ---- Working Process: five step cards on a drawn line --------------------
   Was a pinned 400vh conveyor of small duplicated cards whose photos sat under
   an arch. Now one card per step, each with a full 4:5 photo. */

.process-steps {
    padding-bottom: var(--_spacing---space-6-normal);
}

.process-line {
    display: block;
    width: 100%;
    height: 2px;
    margin-bottom: 1.75rem;
    overflow: visible;
    stroke: var(--_color---body-color);
    stroke-width: 2;
}

.process-steps-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.process-step {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--_color---white);
    color: var(--_color---body-color);
}

/* A node where each card meets the line above it. */
.process-step::before {
    content: "";
    position: absolute;
    top: calc(-1.75rem - 6px);
    left: 1.1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--_color---body-color);
}

.process-step-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--_color---dark);
}

.process-step-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.process-step:hover .process-step-img {
    transform: scale(1.04);
}

.process-step-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.1rem 1.35rem;
}

.process-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.process-step-number {
    font-family: var(--font-family--display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--_color---primary-color);
    font-variant-numeric: tabular-nums;
}

.process-step-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-step-title {
    margin: 0;
    font-family: var(--font-family--display);
    font-size: 1.35rem;
    font-weight: var(--fonts-weight--semi-bold);
    line-height: 1.15;
    color: var(--_color---body-color);
}

.process-step-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--_color---body-color);
    opacity: .75;
}

/* Cards rise in one after another as the block comes into view (motion.js adds
   .is-in to .process-steps, which also draws the line and the icons). */
html.motion-on .process-steps .process-step {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

html.motion-on .process-steps.is-in .process-step {
    opacity: 1;
    transform: none;
}

html.motion-on .process-steps.is-in .process-step:nth-child(2) { transition-delay: .12s; }
html.motion-on .process-steps.is-in .process-step:nth-child(3) { transition-delay: .24s; }
html.motion-on .process-steps.is-in .process-step:nth-child(4) { transition-delay: .36s; }
html.motion-on .process-steps.is-in .process-step:nth-child(5) { transition-delay: .48s; }

@media screen and (max-width: 991px) {
    /* The template's own spacer supplies the bottom gap at these widths. */
    .process-steps {
        padding-bottom: 0;
    }
    .process-steps-list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .process-steps-list::-webkit-scrollbar {
        display: none;
    }
    .process-step {
        flex: 0 0 44%;
        scroll-snap-align: center;
    }
    /* The row scrolls, so nodes above it would be clipped. */
    .process-step::before {
        display: none;
    }
    .process-steps .snap-dots {
        display: flex;
        justify-content: center;
        margin-top: .5rem;
    }
    .process-steps .snap-dots button {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        display: grid;
        place-items: center;
        cursor: pointer;
    }
    /* Dark dots: the packages' orange ones would vanish on this orange block. */
    .process-steps .snap-dots button::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgb(4 2 0 / .3);
        transition: background-color .2s ease, transform .2s ease;
    }
    .process-steps .snap-dots button[aria-current="true"]::before {
        background-color: var(--_color---body-color);
        transform: scale(1.4);
    }
    .process-steps .snap-dots button:focus-visible {
        outline: 2px solid var(--_color---body-color);
        outline-offset: -6px;
    }
}

@media screen and (max-width: 767px) {
    .process-step {
        flex-basis: 78%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-step-img {
        transition: none;
    }
    .process-step:hover .process-step-img {
        transform: none;
    }
}

/* ---- Our Recent Work: four rows, each with a strip of three tiles ---------
   The template showed a photo only on mouse hover and linked every row back to
   this page. Tiles are now always visible; hover or focus widens the strip. */

.work-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.work-row {
    border-bottom: 2px solid var(--_color---black);
}

.work-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 0;
    color: var(--_color---black);
    text-decoration: none;
}

.work-text {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1.25rem;
}

.work-title {
    margin: 0;
    overflow-wrap: anywhere;
}

.work-note {
    opacity: .8;
}

/* Tiles keep a fixed height and share the strip's width, so widening the strip
   on hover changes no row height and shifts nothing below it. */
.work-strip {
    display: flex;
    gap: .5rem;
    width: min(21rem, 32vw);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.work-tile {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 6.5rem;
    overflow: hidden;
    background-color: var(--_color---dark);
}

.work-tile-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* Fades in over its still once it is actually playing. */
.work-tile-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

.work-tile-video.is-playing {
    opacity: 1;
}

.work-arrow {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.work-link:hover .work-strip,
.work-link:focus-visible .work-strip {
    width: min(30rem, 45vw);
}

.work-link:hover .work-tile-img,
.work-link:focus-visible .work-tile-img {
    transform: scale(1.06);
}

.work-link:hover .work-arrow,
.work-link:focus-visible .work-arrow {
    transform: translateX(.35rem);
}

.work-link:focus-visible {
    outline: 2px solid var(--_color---black);
    outline-offset: 4px;
}

@media screen and (max-width: 767px) {
    .work-link {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "text arrow" "strip strip";
        gap: .75rem;
        padding: 1rem 0 1.1rem;
    }
    .work-text {
        grid-area: text;
    }
    .work-arrow {
        grid-area: arrow;
    }
    .work-strip,
    .work-link:hover .work-strip,
    .work-link:focus-visible .work-strip {
        grid-area: strip;
        width: 100%;
    }
    .work-tile {
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-strip,
    .work-tile-img,
    .work-arrow,
    .work-tile-video {
        transition: none;
    }
    .work-link:hover .work-tile-img,
    .work-link:focus-visible .work-tile-img,
    .work-link:hover .work-arrow,
    .work-link:focus-visible .work-arrow {
        transform: none;
    }
}