/*---*\
    Icon Cards Section
    Component for displaying icon cards with heading, icon, and description.
    Supports white, gray, and light blue background variants.
\*---*/

/* Mobile-first styles (320px+) */

.icon-cards-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

/* Section Header */
.icon-cards-section__header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-bottom: 35px;
}

.icon-cards-section__header-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Subheading with logos */
.icon-cards-section__subheading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.icon-cards-section__logo {
    width: 28.727px;
    height: 25px;
}

.icon-cards-section__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.icon-cards-section__logo--flipped {
    -webkit-transform: scaleX(-1) scaleY(-1);
            transform: scaleX(-1) scaleY(-1);
}

.icon-cards-section__subheading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-subheading);
    line-height: var(--line-height-heading);
    color: var(--color-primary-light);
    text-transform: uppercase;
}

.icon-cards-section__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
    text-align: center;
    width: 100%;
}

.icon-cards-section__description {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    text-align: center;
    width: 100%;
}

/* Grid */
.icon-cards-section__grid {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap-lg);
    width: 100%;
}

/* Card */
.icon-card {
    background: var(--color-bg-light-blue);
    border-radius: var(--border-radius);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

/* Icon Container */
.icon-card__icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Lyon Icon Font (inside wrapper) */
.icon-card__icon-wrapper i {
    font-size: 50px;
    color: var(--color-primary);
    line-height: 1;
}

/* Inline SVG Icon (inside wrapper) */
.icon-card__icon-wrapper svg,
.icon-card__svg {
    width: 50px;
    height: 50px;
    fill: var(--color-primary);
}

/* Handle SVGs with embedded styles - use currentColor approach */
.icon-card__icon-wrapper svg path,
.icon-card__svg path {
    fill: inherit;
}

/* Card Content */
.icon-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
}

.icon-card__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: 22px;
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
}

.icon-card__text {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

/* Button */
.icon-cards-section__button {
    /* Button styles inherited from global.css */
    flex-shrink: 0;
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Color Variants */
.icon-cards-section.bg-white {
    background: var(--color-bg-white);
}

.icon-cards-section.bg-gray {
    background: var(--color-bg-gray);
}

.icon-cards-section.bg-light-blue {
    background: var(--color-bg-light-blue);
}

/* Card variants for different section backgrounds */
.icon-cards-section.bg-gray .icon-card,
.icon-cards-section.bg-light-blue .icon-card {
    background: var(--color-bg-white);
}

.half-and-half.bg-white + .icon-cards-section.bg-white {
    padding-top: var(--section-margins);
}


/* Tablet (768px+) */
@media (min-width: 768px) {
    .icon-cards-section {
        gap: var(--spacing-md);
    }

    /* Subheading logos larger on tablet+ */
    .icon-cards-section__logo {
        width: 40.218px;
        height: 35px;
    }

    .icon-cards-section__subheading-wrapper {
        gap: 10px;
    }

    /* Grid - 2 columns on tablet using Flexbox */
    .icon-cards-section__grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--grid-gap-lg);
    }

    /* Cards take up ~48% width to fit 2 per row */
    .icon-card {
        flex: 0 1 calc(50% - var(--grid-gap-lg) / 2);
        max-width: 664px;
        padding: 30px;
    }

    /* Content area grows to fill available card space */
    .icon-card__content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    /* Icon size */
    .icon-card__icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .icon-card__icon-wrapper i {
        font-size: 60px;
    }

    .icon-card__icon-wrapper svg,
    .icon-card__svg {
        width: 60px;
        height: 60px;
    }

    /* Card heading size */
    .icon-card__heading {
        font-size: 32px;
    }

    /* Text area grows to fill content, with scroll for overflow */
    .icon-card__text {
        flex-grow: 1;
        min-height: 120px;
        max-height: 240px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    }

    /* Webkit scrollbar styling */
    .icon-card__text::-webkit-scrollbar {
        width: var(--scrollbar-width);
    }

    .icon-card__text::-webkit-scrollbar-track {
        background: var(--scrollbar-track-color);
        border-radius: var(--scrollbar-border-radius);
    }

    .icon-card__text::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb-color);
        border-radius: var(--scrollbar-border-radius);
    }

    .icon-card__text::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover-color);
    }
}


/* Desktop (1200px+) */
@media (min-width: 1200px) {
    .icon-cards-section {
        gap: var(--spacing-md);
    }

    .icon-cards-section__header {
        margin-bottom: 50px;
    }

    /* Grid - 3 columns on desktop */
    .icon-cards-section__grid {
        gap: var(--grid-gap-lg);
    }

    /* Cards take equal width, 3 per row */
    .icon-card {
        flex: 0 1 calc(33.333% - var(--grid-gap-lg) * 2 / 3);
        max-width: 400px;
    }

    /* Adjust paragraph font size */
    .icon-cards-section__description {
        font-size: 20px;
    }

    .icon-card__text {
        font-size: 20px;
    }

    .icon-cards-section__button {
        margin-top: 50px;
    }
}


/* Large Desktop (1367px+) */
@media (min-width: 1367px) {
    /* No additional changes needed */
}