/* NOVUS — Features ---------------------------------------------------------
   Icon cards for benefits, suitable situations and scopes of work.
   ------------------------------------------------------------------------- */

.poly-features__head { max-width: 62ch; }

.poly-features__title { color: var(--poly-title); }
.poly-section--ink .poly-features__title { color: var(--poly-white); }

.poly-features__intro {
    max-width: 56ch;
    margin-top: 1.35rem;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.7;
}

.poly-section--ink .poly-features__intro { color: rgba(255, 255, 255, .7); }

.poly-features__grid {
    display: grid;
    grid-template-columns: repeat(var(--poly-cols, 3), minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(40px, 5vw, 72px);
}

/* ------------------------------------------------------------------- card */

.poly-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.4vw, 34px);
    background: var(--poly-white);
    border: 1px solid var(--poly-line);
    border-radius: var(--poly-radius-lg);
    transition: border-color .4s var(--poly-ease), box-shadow .4s var(--poly-ease), transform .4s var(--poly-ease-out);
}

.poly-section--mist .poly-feature { border-color: transparent; box-shadow: 0 1px 0 var(--poly-line); }

.poly-feature:hover {
    border-color: var(--poly-line-strong);
    box-shadow: 0 26px 50px -36px rgba(11, 17, 48, .5);
    transform: translateY(-3px);
}

.poly-feature__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.poly-feature__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--poly-radius);
    background: var(--poly-mist-deep);
    color: var(--poly-brand);
    transition: background-color .4s var(--poly-ease), color .4s var(--poly-ease);
}

.poly-feature__icon .poly-icon { width: 22px; height: 22px; }

.poly-feature:hover .poly-feature__icon { background: var(--poly-brand); color: var(--poly-white); }

.poly-feature__no {
    font-family: var(--poly-font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--poly-line-strong);
}

.poly-feature__title {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    letter-spacing: -.02em;
    color: var(--poly-title);
}

.poly-feature__stretch { color: inherit; text-decoration: none; }
.poly-feature__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.poly .poly-feature__stretch:focus-visible { outline: none; }

.poly-feature:has(.poly-feature__stretch:focus-visible) {
    outline: 2px solid var(--poly-accent);
    outline-offset: 3px;
}

.poly-feature__text {
    margin-top: .7rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--poly-body);
}

.poly-feature__more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.3rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--poly-brand);
}

.poly-feature__more .poly-icon { width: 16px; height: 16px; transition: transform .35s var(--poly-ease-out); }
.poly-feature:hover .poly-feature__more .poly-icon { transform: translateX(4px); }

/* --------------------------------------------------------------- ink cards */

.poly-section--ink .poly-feature {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

.poly-section--ink .poly-feature:hover { border-color: rgba(255, 255, 255, .26); box-shadow: none; }
.poly-section--ink .poly-feature__icon { background: rgba(123, 188, 232, .12); color: var(--poly-accent-200); }
.poly-section--ink .poly-feature:hover .poly-feature__icon { background: var(--poly-accent-200); color: var(--poly-ink); }
.poly-section--ink .poly-feature__no { color: rgba(255, 255, 255, .32); }
.poly-section--ink .poly-feature__title { color: var(--poly-white); }
.poly-section--ink .poly-feature__text { color: rgba(255, 255, 255, .66); }
.poly-section--ink .poly-feature__more { color: var(--poly-accent-200); }

/* ------------------------------------------------------------ split layout */

.poly-features--split .poly-features__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.poly-features--split .poly-features__head { position: sticky; top: calc(var(--poly-header-h, 80px) + 32px); }

.poly-features--split .poly-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    border-top: 1px solid var(--poly-line);
}

.poly-section--ink.poly-features--split .poly-features__grid { border-color: rgba(255, 255, 255, .12); }

.poly-features--split .poly-feature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.4rem;
    padding: clamp(22px, 2.2vw, 30px) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--poly-line);
    border-radius: 0;
    box-shadow: none;
}

.poly-section--ink.poly-features--split .poly-feature { border-color: rgba(255, 255, 255, .12); }
.poly-features--split .poly-feature:hover { transform: none; box-shadow: none; }
.poly-features--split .poly-feature__top { grid-row: span 3; margin: 0; }
.poly-features--split .poly-feature__no { display: none; }
.poly-features--split .poly-feature__text { max-width: 58ch; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .poly-features__grid { grid-template-columns: repeat(min(var(--poly-cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .poly-features--split .poly-features__inner { grid-template-columns: minmax(0, 1fr); }
    .poly-features--split .poly-features__head { position: static; }
}

@media (max-width: 640px) {
    .poly-features__grid { grid-template-columns: minmax(0, 1fr); }
}