/* ============================================================
   FEATURES BLOCK — CLEAN, FINAL, RESPONSIVE
============================================================ */

/* Outer wrapper */
.features {
    width: 100%;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* Container */
.features .page-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

/* ============================================================
   GRID — PERFECT EQUAL HEIGHT CARDS
============================================================ */

.features__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

/* Tablet */
@media (max-width: 1024px) {
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .features__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CARD
============================================================ */

.features__item {
    background: var(--color-grey-light);
    border: 1px solid var(--color-grey-mid);
    padding: var(--space-lg) var(--space-md);

    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

/* ============================================================
   ICONS — CONSISTENT SIZE + DESKTOP POP
============================================================ */

.features__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto var(--space-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease;
}

.features__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 1025px) {
    .features__icon:hover {
        transform: scale(1.1);
    }
}

/* ============================================================
   TITLE + DESCRIPTION — FLEX BALANCED
============================================================ */

.features__title {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    text-align: center;
}

.features__desc {
    margin-bottom: var(--space-sm);
    flex-grow: 1; /* key: absorbs extra text height evenly */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

/* ============================================================
   FEATURES CTA BUTTON — BEAUTIFUL PADDING + RESPONSIVE
============================================================ */

.features__button {
    /* Centering inside card */
    margin-top: auto;
    margin-left: auto !important;
    margin-right: auto !important;

    /* DESKTOP — more padding for visual balance */
    padding: 14px 28px !important;

    font-size: 16px !important;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    /* Fit to text */
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap !important;

    /* Flex alignment */
    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    /* Visual styling */
    background: var(--color-white);
    border: 2px solid var(--color-gold);
    color: var(--color-purple);
    transition: all 0.25s ease;

    box-sizing: border-box !important;
}

/* TABLET (1024px ↓) */
@media (max-width: 1024px) {
    .features__button {
        font-size: 14px !important;
        padding: 12px 24px !important;
    }
}

/* MOBILE (767px ↓) */
@media (max-width: 767px) {
    .features__button {
        padding: 10px 22px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   SPLIT HEADING
============================================================ */

.split-heading {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.split-heading__line-one {
    font-family: "Open Sans", var(--font-body-family), sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--color-gold);
    margin-bottom: var(--space-xs);
}

.split-heading__line-two {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 45px;
    line-height: 1.2;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .split-heading__line-two {
        font-size: 36px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .split-heading__line-two {
        font-size: 30px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .split-heading__line-two {
        font-size: 26px;
    }
}

/* Desktop-only left align */
@media (min-width: 1025px) {
    .split-heading,
    .split-heading__line-one,
    .split-heading__line-two {
        text-align: left !important;
    }
}

/* ============================================================
   GUARANTEED OVERRIDE — FEATURES BUTTON (Correct Targeting)
============================================================ */

section.features .features__item > .features__button {
    /* padding */
    padding: 14px 22px !important;

    /* typography */
    font-size: 16px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* layout */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    /* width */
    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap !important;

    /* visual style */
    background: var(--color-white) !important;
    border: 2px solid var(--color-gold) !important;
    color: var(--color-purple) !important;

    /* positioning */
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}

/* Tablet + Mobile */
@media (max-width: 1024px) {
    section.features .features__item > .features__button {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   FEATURES BUTTON — HOVER STATE (Block-Only, Guaranteed Override)
============================================================ */

section.features .features__item > .features__button:hover {
    background: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    transition: all 0.25s ease;
}

/* DESKTOP ONLY — Feature card hover animation */
@media (min-width: 1025px) {

    .features__item {
        transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }

    .features__item:hover {
        background: var(--color-purple);
        border-color: var(--color-purple);
        transform: translateY(-4px);
    }

    /* Text turns white */
    .features__item:hover .features__title,
    .features__item:hover .features__desc,
    .features__item:hover .features__desc p {
        color: var(--color-white) !important;
    }

    /* ICON stays gold — NO color change */
    .features__item:hover .features__icon img {
        filter: none !important;
    }

    /* Button stays readable / keeps your design */
    .features__item:hover .features__button {
        background: var(--color-white) !important;
        color: var(--color-purple) !important;
        border-color: var(--color-white) !important;
    }
}

/* ============================================================
   EYEBROW ADJUSTMENT — LEAVE MAIN HEADINGS ALONE
   Make eyebrow ~½ the size of the Merriweather heading
============================================================ */

/* Desktop */
.awards-block__eyebrow,
.split-heading__line-one {
    font-size: 24px !important;   /* bigger, matches 45px heading */
    line-height: 1.3 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .awards-block__eyebrow,
    .split-heading__line-one {
        font-size: 20px !important;  /* fits 36px heading */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .awards-block__eyebrow,
    .split-heading__line-one {
        font-size: 18px !important;  /* fits 30px heading */
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .awards-block__eyebrow,
    .split-heading__line-one {
        font-size: 16px !important;  /* fits 26px heading */
    }
}