/**
 * Feature Section block.
 * Self-contained styles (theme styles.min.css has no in-repo SCSS source).
 * Colors reference the brand tokens in css/brand-tokens.css (hex noted inline).
 */

.feature-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.feature-summary {
    position: relative; /* anchor for the stretched-link that makes the whole summary clickable */
    margin-bottom: 24px;
}

/* Rounded feature photo (Figma radius/xs 8px). */
.feature-summary__image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* When stacked, the image sits on top of the text — add a gap between them. */
.feature-summary__content {
    margin-top: 24px;
}

.feature-section__heading {
    margin-bottom: 16px;
}

/* Headline weight, editor-selectable. Bold matches the previous inherited look. */
.feature-section--heading-bold .feature-section__heading {
    font-weight: 700;
}

.feature-section--heading-extra-bold .feature-section__heading {
    font-weight: 800;
}

.feature-section__lead {
    margin-bottom: 24px;
}

.feature-section__cta {
    margin-top: 8px;
}

/* The whole summary is one click target, so hovering anywhere in it should
   trigger the button's hover state. The stretched-link overlay otherwise
   suppresses the button's own :hover. Mirrors .btn.btn-primary:hover. */
.feature-summary:hover .btn.btn-primary {
    color: initial;
    background-position: 50%;
}

/* Bullets: stacked by default (left-aligned, flush with the image and copy
   above), 3-up only at >=1024px. */
.feature-bullets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 24px;
}

/* Icon bullets: purple icon box on the left, title + copy to the right.
   position:relative anchors the stretched-link so the whole bullet is clickable.
   No horizontal padding while stacked so the icon aligns with the copy above. */
.feature-bullet {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* small horizontal padding so the icon/text don't touch the hover background,
       offset by a negative margin so the content still lines up with the copy above. */
    padding: 12px;
    margin-inline: -12px;
    border-radius: 16px; /* matches the feature image corners */
    transition: background-color 200ms ease;
}

/* Whole-bullet hover/focus affordance (replaces the title underline). */
.feature-bullet:hover,
.feature-bullet:focus-within {
    background-color: var(--kipu-bullet-hover); /* #F4F0FB */
}

.feature-bullet__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 3-up from 1024px and up, with card insets for the hover state. */
@media (min-width: 1024px) {
    .feature-bullets {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-bullet {
        padding: 16px;
        margin-inline: 0;
    }
}

/* The purple box that holds (or stands in for) the bullet icon. */
.feature-bullet__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--kipu-purple); /* #6C18C9 */
}

.feature-bullet__icon-img {
    width: 12px;
    height: auto;
}

.feature-bullet__title {
    margin-bottom: 8px;
    color: var(--kipu-purple); /* #6C18C9 */
    font-size: 20px;
}

.feature-bullet__title a {
    color: var(--kipu-purple); /* #6C18C9 */
    text-decoration: none;
}

.feature-bullet__desc {
    margin-bottom: 0;
    color: #111;
}

/* Desktop: place columns side by side and flip side for image-right sections.
   The image column is authored first in the DOM so it always stacks on top on
   mobile; on large screens row-reverse moves it to the right when requested. */
@media (min-width: 992px) {
    .feature-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .feature-summary {
        margin-bottom: 40px;
    }

    .feature-summary__content {
        margin-top: 0;
    }

    .feature-section--image-right .feature-summary {
        flex-direction: row-reverse;
    }
}