/*
 * Features
 * Layout: template-parts/flex/features.php
 * Auto-enqueued by functions.php after css/theme.css.
 */

.features {
    --section-pad: var(--space-3xl);
    --motif-size: 735px;
    --motif-inset: var(--space-4xl);
    padding-block: calc(var(--section-pad) + var(--section-offset, 0px)) var(--space-4xl);
    background-color: var(--color-background);
    position: relative;
    /* The motif rotates, so its corners would otherwise poke past the right edge and cause horizontal scroll. */
    overflow: clip;
}

/* Background motif: right edge, two thirds of the way down. Spins as it scrolls through the viewport. */
.features::before {
    content: "";
    position: absolute;
    right: var(--motif-inset);
    top: 66%;
    width: var(--motif-size);
    height: var(--motif-size);
    translate: 0 -50%;
    background: url('../../assets/graphics/motif-lg.svg') center / contain no-repeat;
    pointer-events: none;
}

.features > .container {
    position: relative;
}

@supports (animation-timeline: view()) {

    .features::before {
        animation: features-motif-spin linear both;
        animation-timeline: view();
    }

    @media (prefers-reduced-motion: reduce) {
        .features::before {
            animation: none;
        }
    }

}

/* With js/features-motif.js running, rotation comes from --motif-rotate (eased) instead of the scroll timeline. */
.features.has-motif-js::before {
    animation: none;
    rotate: var(--motif-rotate, 0deg);
}

@keyframes features-motif-spin {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 180deg;
    }
}

.features__header {
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.features__heading {
    margin: 0;
}

.features__subheading {
    margin: 0;
    font-size: var(--text-1);
    font-weight: var(--font-light);
}

.features__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* One text + image block. Image and text sit side by side; the image swaps sides on even rows. */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    /* Keep the title clear of the top of the viewport when jumped to via its anchor. */
    scroll-margin-top: var(--space-xl);
}

.feature:nth-child(even) .feature__media {
    order: 2;
}

.feature__media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .875rem;
}

.feature__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.feature__title {
    margin: 0;
}

.feature__description {
    font-weight: var(--font-light);
}

.feature__description > :first-child {
    margin-block-start: 0;
}

.feature__description > :last-child {
    margin-block-end: 0;
}

.feature__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.feature__check {
    position: relative;
    padding-left: calc(1.5rem + var(--space-xs));
    font-weight: var(--font-regular);
}

/* Tick mark: solid secondary-colour circle with a white tick. */
.feature__check::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media screen and (max-width: 1024px) {

    .feature {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Image always above the text once stacked. */
    .feature:nth-child(even) .feature__media {
        order: 0;
    }

}