/*---*\
    Icon Cards (shared component)

    Reusable icon card layouts for slider, compact grid, and detailed grid
    variants across homepage and innerpage contexts.

    KEY FEATURES:
    - Layouts (ACF "layout"): slider (Slick + carousel chrome), compact grid,
      detailed grid (description + link on .icon-cards__grid).
    - Slider: Slick below 1200px (1-up mobile, 2-up tablet); chrome is arrows,
      progress bar, and duplicate CTA. From 1200px Slick unslicks to a centered
      three-up flex row; five-up from 1367px (homepage + innerpage).
    - Context: .icon-cards--homepage (intro/header typography);
      .icon-cards--innerpage (centered header, white card surfaces).
    - Responsive: card padding and icon sizes scale at 768px / 1200px / 1367px;
      grid columns at 768px, 1200px, and 1600px for non-slider layouts.

    IMPLEMENTATION NOTES:
    - Section backgrounds (.bg-white, .bg-gradient, .bg-medium-green, etc.)
      come from global.css utilities on the block root, not rules in this file.
    - Slick sets inline height/display on slides; !important overrides below
      768px and in the equal-height track are required for adaptiveHeight.
    - At 1200px+, stacked hover rules: homepage uses accent soft; innerpage uses
      medium green; .bg-medium-green sections lighten on hover.
    - 1600px breakpoint switches non-slider grids to three columns (theme-wide
      pattern; see image-buttons.css).
    - Deps: fx_slick (slider), fx_simplebar (.has-scrollable-content descriptions).
\*---*/


/*--------------------------------------*\
    Homepage: section header stack (slider)
\*--------------------------------------*/

.icon-cards--homepage.icon-cards--slider > .container,
.icon-cards--homepage.icon-cards--slider > .container-fluid {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.icon-cards--homepage.icon-cards--slider .icon-cards__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-paragraph-to-button);
    min-width: 0;
}

/* No section link: centered intro stack (matches innerpage compact/detailed header). */
.icon-cards--homepage.icon-cards--slider .icon-cards__header:not(:has(.icon-cards__header-cta)) {
    align-items: center;
    text-align: center;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__header:not(:has(.icon-cards__header-cta)) .sub-heading {
    justify-content: center;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__header:not(:has(.icon-cards__header-cta)) .sub-heading::after {
    display: block;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__intro {
    min-width: 0;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__intro h2 {
    margin: var(--space-sub-to-heading) 0 0 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    color: var(--color-heading);
    text-transform: uppercase;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__intro h2 + p {
    margin: var(--space-paragraph) 0 0 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-body);
    color: var(--color-body);
    max-width: none;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__header-cta {
    flex-shrink: 0;
}

.icon-cards--homepage.icon-cards--slider .icon-cards__header-cta .btn,
.icon-cards--homepage.icon-cards--slider .icon-cards__cta .btn {
    white-space: nowrap;
}

.icon-cards--slider .icon-cards__carousel-shell {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    min-width: 0;
    width: 100%;
    align-self: stretch;
}

.icon-cards--slider .icon-cards__chrome {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--soft-small);
    width: 100%;
}

.icon-cards--slider .icon-cards__chrome .icon-cards__progress {
    flex: 1 1 auto;
    min-width: var(--space-heading-top);
    height: 1px;
    margin: 0;
    background-color: var(--border-color);
}

@media (max-width: 767px) {
    /* Mobile Figma spacing uses a tighter 20px rhythm than the global 24px gap. */
    .icon-cards--slider .icon-cards__carousel-shell {
        gap: var(--soft-small);
    }

    .icon-cards--slider .icon-cards__chrome .icon-cards__progress {
        display: none;
    }

    /*
     * Slick row mode (rows: 2 on mobile) wraps each card row in an extra
     * div inside .slick-slide. Reset the desktop equal-height flex wrapper
     * so both stacked rows size naturally and keep consistent row spacing.
     */
    .icon-cards--slider .icon-cards__slider .slick-slide > div {
        display: block;
        height: auto !important;
    }

    .icon-cards--slider .icon-cards__slider .slick-slide > div + div {
        margin-top: var(--soft-small);
    }

    /*
     * Keep Slick adaptiveHeight functional on mobile by disabling
     * equal-height carousel behavior that is needed for tablet/desktop.
     */
    .icon-cards--slider .icon-cards__slider .slick-track {
        display: block !important;
    }

    .icon-cards--slider .icon-cards__slider .slick-slide {
        height: auto !important;
    }

    .icon-cards--slider .icon-cards__slider .icon-cards__item,
    .icon-cards--slider .icon-cards__slider .icon-cards__item > .icon-cards__card {
        height: auto;
    }

    .icon-cards--slider .icon-cards__carousel-shell {
        width: calc(100% + 2 * var(--bs-gutter-x, 20px));
        max-width: none;
        margin-left: calc(-1 * var(--bs-gutter-x, 20px));
        margin-right: calc(-1 * var(--bs-gutter-x, 20px));
        padding-left: max(var(--soft-small), env(safe-area-inset-left));
        padding-right: max(var(--soft-small), env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .icon-cards--slider .icon-cards__chrome {
        justify-content: space-between;
    }
}


/*
 * .sub-heading is a global TinyMCE class from inc/theme/admin.php.
 * The section_intro WYSIWYG may output it inside .icon-cards__intro.
 * Homepage blocks with a header CTA use a left-aligned mark at desktop.
 */
@media (min-width: 1200px) {
    .icon-cards--homepage .icon-cards__header:has(.icon-cards__header-cta) .sub-heading {
        justify-content: flex-start;
    }
}


/*--------------------------------------*\
    Slider (Slick)
\*--------------------------------------*/

.icon-cards__slider {
    margin: 0;
}

.icon-cards .icon-cards__slider.slick-initialized .icon-cards__item.fx-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.icon-cards__slider .slick-list {
    margin: 0 calc(-1 * (var(--content-gap) / 2));
}

.icon-cards__slider .slick-slide {
    padding: 0 calc(var(--content-gap) / 2);
    vertical-align: top;
    /* Slick sets per-slide height inline; force equal-height slides so
       cards stretch to fill the tallest sibling. */
    height: inherit !important;
}

.icon-cards__slider .slick-track {
    display: flex !important;
}

.icon-cards__slider .slick-slide > div {
    height: 100% !important;
    display: flex;
}

.icon-cards__slider.fx-slider .fx-slide {
    height: 100%;
}

.icon-cards__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.icon-cards__item > .icon-cards__card {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

.icon-cards a.icon-cards__card {
    color: inherit;
    text-decoration: none;
    transition:
        background-color var(--transition-slow),
        color var(--transition-slow);
}

.icon-cards a.icon-cards__card:hover {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: unset;
    text-underline-offset: unset;
}

/*--------------------------------------*\
    Card
\*--------------------------------------*/

.icon-cards__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background-color: var(--bg-medium-green);
    border-radius: var(--border-radius-card);
    text-align: left;
    transition: background-color var(--transition-slow);
}

.icon-cards--compact .icon-cards__card {
    padding: 20px;
}

.bg-gradient .icon-cards__card {
    background: var(--color-white);
}

.bg-gradient .icon-cards__card-title {
    --color-heading: var(--bg-dark);
    color: var(--color-heading);
}

.bg-gradient .icon-cards__card-description {
    --color-body: var(--bg-dark);
    color: var(--color-body);
}

.icon-cards__card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.icon-cards__card-icon-img {
    display: block;
    max-width: 38px;
    max-height: 38px;
    width: auto;
    height: auto;
}

/* Inline SVG icons inherit the icon circle foreground color. */
.icon-cards__card-icon-img * {
    fill: var(--color-white);
}

.icon-cards__card-icon svg.icon-cards__card-icon-img {
    max-width: 38px;
    max-height: 38px;
}

.icon-cards__card-icon i,
.icon-cards__card-icon [class*="be-content-"] {
    display: block;
    font-size: 38px;
    line-height: 1;
}

.icon-cards__card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.icon-cards__card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h6);
    line-height: var(--line-height-heading);
    color: var(--color-heading);
    text-transform: uppercase;
}

.icon-cards__card:hover .icon-cards__card-link .btn.btn-tertiary::after {
    transform: translateX(2px);
}

.icon-cards__arrows {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.icon-cards__arrow {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    left: auto;
    right: auto;
    transform: none;
    font-family: 'be-icon', var(--font-icon) !important;
    font-size: 0;
    line-height: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        opacity var(--transition-fast);
}

.icon-cards__arrow:hover {
    background-color: var(--color-primary-hover);
}

.icon-cards__arrow[aria-disabled="true"],
.icon-cards__arrow.slick-disabled {
    opacity: 0.4;
    cursor: default;
}

.icon-cards__arrow.slick-prev::before,
.icon-cards__arrow.slick-next::before {
    opacity: 1;
    color: currentColor;
    /* 35px arrow controls use a smaller glyph than global 45px controls. */
    font-size: 14px;
}

.icon-cards.bg-gradient .btn-tertiary {
    color: var(--color-primary);
}


/*--------------------------------------*\
    Responsive card sizing and layout
\*--------------------------------------*/
@media (min-width: 768px) {
    .icon-cards__card-icon {
        width: 90px;
        height: 90px;
    }

    .icon-cards__card-icon-img {
        max-width: 42px;
        max-height: 42px;
    }

    .icon-cards__card-icon svg.icon-cards__card-icon-img {
        max-width: 42px;
        max-height: 42px;
    }

    .icon-cards__card-icon i,
    .icon-cards__card-icon [class*="be-content-"] {
        font-size: 42px;
    }

    .icon-cards__card {
        padding: 22px 18px;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }

    .icon-cards__card-body {
        align-items: center;
    }

    .icon-cards__card-title {
        text-align: center;
    }

    /*
     * Innerpage no-description cards drop their mobile horizontal
     * layout and join the centered column layout from tablet up. The
     * base rule (.icon-cards--innerpage .icon-cards__card:not(...))
     * has higher specificity than the generic .icon-cards__card
     * column override above, so it must be repeated here.
     */
    .icon-cards--innerpage .icon-cards__card:not(.has-description) {
        flex-direction: column;
    }
}


@media (min-width: 768px) and (max-width: 1199px) {
    .icon-cards--slider .icon-cards__arrow {
        width: 45px;
        height: 45px;
    }

    .icon-cards--slider .icon-cards__arrow.slick-prev::before,
    .icon-cards--slider .icon-cards__arrow.slick-next::before {
        font-size: 18px;
    }
}


@media (min-width: 1200px) {
    .icon-cards--compact .icon-cards__card {
        padding: 30px;
    }
    
    .icon-cards__card-icon {
        width: 100px;
        height: 100px;
    }

    .icon-cards__card-icon-img {
        max-width: 48px;
        max-height: 48px;
    }

    .icon-cards__card-icon svg.icon-cards__card-icon-img {
        max-width: 48px;
        max-height: 48px;
    }

    .icon-cards__card-icon i,
    .icon-cards__card-icon [class*="be-content-"] {
        font-size: 48px;
    }

    .icon-cards__card {
        padding: 30px 20px;
    }

    .icon-cards__card-title {
        font-size: 24px;
    }

    .icon-cards--innerpage .icon-cards__card:not(.has-description) .icon-cards__card-body {
        align-items: center;
    }

    .icon-cards--homepage.icon-cards--slider .icon-cards__header:has(.icon-cards__header-cta) {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--content-gap);
    }

    .icon-cards--homepage.icon-cards--slider .icon-cards__header:has(.icon-cards__header-cta) .icon-cards__intro {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 70%;
    }

    .icon-cards--slider .icon-cards__slider:not(.slick-initialized) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        align-items: stretch;
        gap: var(--content-gap);
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .icon-cards--slider .icon-cards__slider.fx-slider:not(.slick-initialized) > .fx-slide {
        display: flex;
        flex-direction: column;
        flex: 0 0 calc((100% - 2 * var(--content-gap)) / 3);
        width: calc((100% - 2 * var(--content-gap)) / 3);
        max-width: calc((100% - 2 * var(--content-gap)) / 3);
    }

    .icon-cards--slider .icon-cards__slider > .icon-cards__item {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex: 0 0 calc((100% - 2 * var(--content-gap)) / 3);
        width: calc((100% - 2 * var(--content-gap)) / 3);
        max-width: calc((100% - 2 * var(--content-gap)) / 3);
        height: auto;
    }

    .icon-cards--slider .icon-cards__slider > .icon-cards__item > .icon-cards__card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
    }

    .icon-cards--slider .icon-cards__slider > .icon-cards__item > .icon-cards__card > .icon-cards__card-body {
        flex: 1 1 auto;
        width: 100%;
        height: inherit;
    }

    .icon-cards--slider .icon-cards__slider .slick-list,
    .icon-cards--slider .icon-cards__slider .slick-slide {
        margin: 0;
        padding: 0;
    }

    .icon-cards:not(.icon-cards--slider) .icon-cards__card-link,
    .icon-cards--slider .icon-cards__card-link {
        margin-top: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition:
            opacity var(--transition-medium),
            transform var(--transition-medium),
            visibility var(--transition-medium);
    }

    .icon-cards .icon-cards__card:hover .icon-cards__card-link,
    .icon-cards .icon-cards__card:focus-within .icon-cards__card-link,
    .icon-cards--slider .icon-cards__card:hover .icon-cards__card-link,
    .icon-cards--slider .icon-cards__card:focus-within .icon-cards__card-link {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateY(0);
        transition:
            opacity var(--transition-medium),
            transform var(--transition-medium),
            visibility var(--transition-medium);
    }

    .icon-cards.icon-cards--innerpage .icon-cards__card-link {
        opacity: 1;
        pointer-events: auto;
        margin-top: auto;
        visibility: visible;
        transform: translateY(0);
    }

    .icon-cards--slider .icon-cards__chrome {
        display: none;
    }
}


@media (min-width: 1367px) {
    .icon-cards--slider .icon-cards__slider.fx-slider:not(.slick-initialized) > .fx-slide {
        flex: 0 0 calc((100% - 4 * var(--content-gap)) / 5);
        width: calc((100% - 4 * var(--content-gap)) / 5);
        max-width: calc((100% - 4 * var(--content-gap)) / 5);
    }

    .icon-cards--slider .icon-cards__slider > .icon-cards__item {
        flex: 0 0 calc((100% - 4 * var(--content-gap)) / 5);
        width: calc((100% - 4 * var(--content-gap)) / 5);
        max-width: calc((100% - 4 * var(--content-gap)) / 5);
    }

    .icon-cards--slider .icon-cards__card:not(.has-description) {
        max-width: 272px;
    }

    .icon-cards__card-icon svg.icon-cards__card-icon-img {
        max-width: 58px;
        max-height: 58px;
    }

    .icon-cards__card-icon i,
    .icon-cards__card-icon [class*="be-content-"] {
        font-size: 58px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .icon-cards__slider .slick-track {
        transition: none !important;
    }

    .icon-cards__card,
    .icon-cards--innerpage .icon-cards__card {
        transition: none;
    }

    .icon-cards a.icon-cards__card {
        transition: none;
    }
}


/*--------------------------------------*\
    Innerpage variant
\*--------------------------------------*/

.icon-cards--innerpage > .container,
.icon-cards--innerpage > .container-fluid {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.icon-cards--innerpage .icon-cards__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-paragraph-to-button);
    min-width: 0;
}

.icon-cards--innerpage .icon-cards__intro {
    min-width: 0;
}

.icon-cards--innerpage .icon-cards__header-cta {
    flex-shrink: 0;
}

.icon-cards--innerpage .icon-cards__header-cta .btn {
    white-space: nowrap;
}

.icon-cards--innerpage .icon-cards__cta {
    align-self: center;
}

.icon-cards--innerpage .sub-heading {
    justify-content: center;
}

.icon-cards--innerpage .sub-heading::after {
    display: block;
}

@media (min-width: 1200px) {
    .icon-cards--innerpage .icon-cards__header:has(.icon-cards__header-cta) {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        text-align: left;
        gap: var(--content-gap);
    }

    .icon-cards--innerpage .icon-cards__header:has(.icon-cards__header-cta) .icon-cards__header-cta {
        margin-bottom: 10px;
    }

    .icon-cards--innerpage .icon-cards__header:has(.icon-cards__header-cta) .icon-cards__intro {
        flex: 1 1 auto;
        max-width: 70%;
    }

    .icon-cards--innerpage .icon-cards__header:has(.icon-cards__header-cta) .sub-heading {
        justify-content: flex-start;
    }
}


/*--------------------------------------*\
    Grid (compact + detailed layouts)
\*--------------------------------------*/

.icon-cards__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon-cards__grid > .icon-cards__item {
    box-sizing: border-box;
    flex: 0 1 100%;
    padding: 0 16px;
    min-width: 0;
    height: auto;
    max-width: 100%;
}

.icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item + .icon-cards__item {
    margin-top: 25px;
}

.icon-cards--innerpage .icon-cards__card {
    background-color: var(--color-white);
    flex-direction: column;
    font-weight: 400;
    align-items: center;
    gap: 18px;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-slow);
}

.icon-cards--innerpage .icon-cards__card:not(.has-description) {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 15px;
}

.bg-white.icon-cards--innerpage .icon-cards__card {
    background: var(--bg-light-green);
}

.icon-cards--innerpage .icon-cards__card-body {
    align-items: center;
}

.icon-cards--innerpage .icon-cards__card:not(.has-description) .icon-cards__card-body {
    align-items: flex-start;
}

.icon-cards--innerpage:not(.icon-cards--compact) .icon-cards__card-title {
    text-align: center;
}

/*--------------------------------------*\
    Card description (with optional SimpleBar scroll)
\*--------------------------------------*/

.icon-cards__card-description {
    margin: 0;
    width: 100%;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-body);
}

.icon-cards.bg-green :where(.icon-cards__card-description p) {
    color: var(--color-body);
}

.icon-cards__card-description.has-scrollable-content {
    max-height: 144px;
    padding-right: 15px;
}

@media (min-width: 768px) {

    .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item + .icon-cards__item {
        margin-top: 0;
    }

    .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item {
        flex: 0 1 50%;
    }

    .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item:nth-child(n+3) {
        margin-top: 32px;
    }

    .icon-cards:not(.icon-cards--slider):not(.icon-cards--detailed) .icon-cards__grid > .icon-cards__item .icon-cards__card {
        flex-direction: column;
    }

    .icon-cards:not(.icon-cards--slider):not(.icon-cards--detailed) .icon-cards__grid > .icon-cards__item:not(.has-description) .icon-cards__card-body {
        align-items: center;
    }
    .icon-cards__card-description.has-scrollable-content {
        max-height: 145px;
        padding-right: 20px;
    }
}

@media (min-width: 1200px) {
    .icon-cards__card-description.has-scrollable-content {
        max-height: 12rem;
    }


    .icon-cards:not(.icon-cards--slider):not(.icon-cards--detailed) .icon-cards__grid > .icon-cards__item {
        flex: 0 1 25%;
    }

    .icon-cards:not(.icon-cards--slider):not(.icon-cards--detailed) .icon-cards__grid > .icon-cards__item:nth-child(n+3) {
        margin-top: 0;
    }

    .icon-cards:not(.icon-cards--slider):not(.icon-cards--detailed) .icon-cards__grid > .icon-cards__item:nth-child(n+5) {
        margin-top: 32px;
    }

    .icon-cards:not(.icon-cards--innerpage) .icon-cards__card:hover {
        background-color: var(--color-accent-green-soft);
    }

    .icon-cards .icon-cards__card:hover {
        background-color: var(--bg-medium-green);
    }

    .icon-cards .icon-cards__card:hover .has-scrollable-content .simplebar-track {
        background-color: var(--bg-light-green);
    }

    .icon-cards.bg-medium-green .icon-cards__card:hover {
        background-color: var(--bg-light-green);
    }
}


@media ( min-width: 1600px ) {
   .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item {
        flex: 0 1 33.33%;
    }

    .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item:nth-child(n+3) {
        margin-top: 0;
    }

    .icon-cards:not(.icon-cards--slider) .icon-cards__grid > .icon-cards__item:nth-child(n+4) {
        margin-top: 32px;
    }
}