/* =============================================================================
   Industries We Serve — fed-avada-elements plugin
   ============================================================================= */

/* ---- Section ---- */
.fed-industries-section {
    background: #fff;
    padding: 40px 55px;
    box-sizing: border-box;
}
.fed-industries-inner {
    max-width: 1612px;
    margin: 0 auto;
}
/* Title — two-class selector (0,2,0) beats Avada's element-level heading rules.
   padding-left: 0 cancels the 25px Avada injects via fusion-responsive-typography-calculated. */
.fed-industries-section .fed-industries-title {
    font-size: 30px;
    font-weight: 700 !important;
    color: #313A41 !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* ---- Carousel ---- */
.fed-ind-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.fed-ind-carousel__window {
    flex: 1;
    /* overflow-x: clip clips the carousel slides horizontally without creating a
       scroll container. crucially, when paired with overflow-y: visible, it does
       NOT force overflow-y to auto (unlike overflow-x: hidden), so card
       box-shadows are free to render above and below the window boundary. */
    overflow-x: clip;
    overflow-y: visible;
    /* Only horizontal padding to give side-shadow room on hover lift.
       No vertical padding needed — shadows overflow freely. */
    padding: 0 24px;
    margin: 0 -24px;
}
.fed-ind-carousel__track {
    display: flex;
    gap: 26px;
    transition: transform .35s ease;
    will-change: transform;
}
.fed-ind-carousel__slide {
    flex-shrink: 0;
    min-width: 0;
}
.fed-ind-slide-ratio {
    position: relative;
    width: 100%;
    height: 0;
    /* 308×408px → 132.47% aspect ratio from Figma */
    padding-bottom: 132.47%;
}
.fed-ind-slide-ratio .fed-ind-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}

/* Nav buttons — hidden by default; JS adds .fed-ind-carousel--has-nav when navigation is needed */
.fed-ind-carousel__btn {
    flex-shrink: 0;
    background: none !important;
    border: 2px solid #1181C4 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1181C4 !important;
    transition: background .2s, color .2s;
    padding: 0 !important;
}
.fed-ind-carousel--has-nav .fed-ind-carousel__btn {
    display: flex !important;
}
.fed-ind-carousel__btn:hover {
    background: #1181C4 !important;
    color: #fff !important;
}
.fed-ind-carousel__btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}
.fed-ind-carousel__btn svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
}

/* ---- Image card ---- */
.fed-ind-card {
    display: block !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25) !important;
    transition: transform .2s ease, box-shadow .2s ease;
    /* Pre-promote to its own compositor layer so iOS never creates a new
       layer on tap — which is what triggers the text-size-adjust reflow */
    will-change: transform;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.fed-ind-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3) !important;
    text-decoration: none !important;
}
.fed-ind-card--image {
    background-size: cover !important;
    background-position: center !important;
    background-color: #4a6a7c;
}
.fed-ind-card--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(23, 130, 197, .12);
    border-radius: 10px;
    z-index: 2; /* above bg-blurred(1), below __inner(3) */
    pointer-events: none;
}
/* Full-card blurred copy — same cover crop as the card background.
   scale(1.06) hides the white fringe that blur creates at edges. */
.fed-ind-card__bg-blurred {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    transform: scale(1.03);
    z-index: 1;
    pointer-events: none;
}
/* Sharp window — full card size (inset:0) so background-size:cover uses the
   same reference as bg-blurred, giving identical crop. clip-path cuts it to
   the frame rectangle so only that area shows the sharp image. */
.fed-ind-card__frame-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    clip-path: inset(21.6% 7.1% 5.4% 7.1% round 5px);
    pointer-events: none;
    z-index: 1; /* within __inner stacking context, below ::before and title */
}
.fed-ind-card__inner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3; /* above bg-blurred(1) and ::after tint(2) */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 22px 23px !important;
    box-sizing: border-box;
    color: #fff !important;
}
.fed-ind-card--image .fed-ind-card__inner::before {
    content: "";
    position: absolute;
    top: 21.6%;
    left: 7.1%;
    right: 7.1%;
    bottom: 5.4%;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 6px;
    pointer-events: none;
    z-index: 3; /* above frame-img (z-index:1) and anything else inside __inner */
}
.fed-ind-card .fed-ind-card__title,
.fed-ind-card:visited .fed-ind-card__title,
.fed-ind-card:hover .fed-ind-card__title {
    display: block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    flex: 1;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important; /* above frame-img and ::before border */
}
.fed-ind-card__inner > svg,
.fed-ind-card__inner svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex-shrink: 0 !important;
    color: #fff !important;
    stroke: #fff !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important; /* above frame-img */
}

/* ---- Pills ---- */
/* margin-top: 18px so that visual gap from carousel to first pill = 18px +
   8px (row-inner top padding) = 26px — matching Figma's gap-[26px].
   When all rows are collapsed (height 0), the pills section height is 0 but
   the 18px margin still applies; bottom-bar adds 8px → total 26px. */
.fed-ind-pills {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}
/* Outer row: handles the collapse animation — overflow:hidden is intentional here */
.fed-ind-pills__row {
    overflow: hidden;
    max-height: 400px;
    opacity: 1;
    transition: max-height .45s ease, opacity .35s ease;
    margin-bottom: 10px !important;
}
.fed-ind-pills__row--hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin-bottom: 0 !important;
}
/* Inner row: grid layout + padding so box-shadows are not clipped by the outer overflow:hidden.
   Symmetric 8px top/bottom means: inter-row gap = 8 (bottom) + margin-bottom (10) + 8 (top) = 26px
   which matches the desktop grid gap of 26px. Mobile/tablet override margin-bottom to 0 and
   reduce vertical padding to match their respective gap values. */
.fed-ind-pills__row-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    padding: 8px;
}
.fed-ind-pill {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0;
    background-color: #D2EAF8 !important;
    border-radius: 10px !important;
    padding: 20px 23px !important;
    min-height: 87px;
    text-decoration: none !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25) !important;
    transition: background-color .2s ease;
}
.fed-ind-pill:hover {
    background-color: #bdd8ec !important;
    text-decoration: none !important;
}
.fed-ind-pill .fed-ind-pill__title,
.fed-ind-pill:visited .fed-ind-pill__title,
.fed-ind-pill:hover .fed-ind-pill__title {
    display: block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1181C4 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    flex: 1;
    margin: 0 !important;
}
.fed-ind-pill svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    flex-shrink: 0 !important;
    color: #1181C4 !important;
    stroke: #1181C4 !important;
    display: block !important;
}

/* ---- Bottom bar (dots + See more/less toggle) ---- */
/* 8px so that gap from last pill row to button = 8px (row-inner bottom pad)
   + 10px (row margin-bottom) + 8px = 26px. When pills are collapsed the total
   gap from carousel to button = 18px (pills margin-top) + 0 + 8px = 26px. */
.fed-ind-bottom-bar {
    margin-top: 8px;
}

/* ---- See more / See less toggle ---- */
.fed-ind-toggle {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}
.fed-ind-toggle__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    height: 55px;
    background: none !important;
    border: none !important;
    border-radius: 36px !important;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
    color: #1181C4 !important;
    padding: 10px !important;
    font-family: inherit;
    text-decoration: none !important;
}
.fed-ind-toggle__btn:hover {
    color: #005fa3 !important;
}
.fed-ind-toggle__btn svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    min-width: 24px !important;
    /* Chevron ∨ points down by default (collapsed / See more state) */
    transition: transform .25s ease;
}
.fed-ind-toggle__btn--open svg {
    /* Rotate 180° → chevron ∧ points up (expanded / See less state) */
    transform: rotate(180deg);
}

/* ---- Responsive ---- */

/* Dots hidden on desktop; shown via media query at tablet and below */
.fed-ind-carousel__dots { display: none; }

/* Large desktop to pre-tablet — 1024–1499 px */
@media (max-width: 1499px) {
    .fed-ind-card--image .fed-ind-card__inner::before { top: 28%; }
    .fed-ind-card__frame-img { clip-path: inset(28% 7.1% 5.4% 7.1% round 5px); }
}

/* Tablet — 640–1023 px */
@media (max-width: 1023px) {
    .fed-industries-section { padding: 32px 20px; }
    .fed-industries-section .fed-industries-title { font-size: 26px; margin-bottom: 30px; text-align: center !important; }
    .fed-ind-carousel { gap: 10px; }
    /* overflow-x: clip for horizontal carousel clipping; overflow-y: visible
       so card shadows are not clipped. Horizontal padding/margin to handle
       side-shadow overflow. */
    .fed-ind-carousel__window { overflow-x: clip; overflow-y: visible; padding: 0 20px; margin: 0 -20px; }
    .fed-ind-pills { margin-top: 8px; } /* pill gap: 8 + 8px (row-inner pad) = 16px */
    .fed-ind-pills__row-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
    /* margin-bottom: 0 so inter-row gap = padding-top(8) + padding-bottom(8) = 16px = grid gap */
    .fed-ind-pills__row { margin-bottom: 0 !important; }
    .fed-ind-card .fed-ind-card__title,
    .fed-ind-card:visited .fed-ind-card__title,
    .fed-ind-card:hover .fed-ind-card__title,
    .fed-ind-card:active .fed-ind-card__title,
    .fed-ind-pill .fed-ind-pill__title { font-size: 17px !important; }
    /* Push decorative border lower so wrapped titles don't overlap it */
    .fed-ind-card--image .fed-ind-card__inner::before { top: 28%; }
    .fed-ind-card__frame-img { clip-path: inset(28% 7.1% 5.4% 7.1% round 5px); }
    /* Hide nav arrow buttons — dots replace them.
       Specificity matches .fed-ind-carousel--has-nav .fed-ind-carousel__btn (0,2,0). */
    .fed-ind-carousel--has-nav .fed-ind-carousel__btn { display: none !important; }
    /* Bottom bar: dots left, toggle right */
    .fed-ind-bottom-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* 8px: last pill gap = 8(row-inner pad) + 0(row margin) + 8 = 16px;
           collapsed gap = 8(pills margin) + 0 + 8 = 16px */
        margin-top: 8px;
        padding: 0 0 0 5px;
    }
    .fed-ind-bottom-bar .fed-ind-toggle { padding: 0 !important; }
    /* Dots */
    .fed-ind-carousel__dots {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .fed-ind-carousel__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1181C4;
        opacity: .3;
        transition: opacity .2s;
        flex-shrink: 0;
    }
    .fed-ind-carousel__dot--active {
        opacity: 1;
    }
}

/* Phone — up to 639 px */
@media (max-width: 639px) {
    .fed-industries-section { padding: 24px 16px; }
    .fed-industries-section .fed-industries-title { font-size: 22px; margin-bottom: 20px; text-align: center !important; }
    .fed-ind-carousel { gap: 0; }
    /* Remove horizontal padding/margin — no hover shadow on mobile */
    .fed-ind-carousel__window { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    /* On touch screens: strip hover lift so there is no compositing-layer flicker */
    .fed-ind-card,
    .fed-ind-card:hover,
    .fed-ind-card:active {
        transition: none !important;
        transform: none !important;
        box-shadow: 0 4px 4px rgba(0,0,0,.25) !important;
        will-change: auto !important;
    }
    .fed-ind-card .fed-ind-card__title,
    .fed-ind-card:visited .fed-ind-card__title,
    .fed-ind-card:hover .fed-ind-card__title,
    .fed-ind-card:active .fed-ind-card__title,
    .fed-ind-pill .fed-ind-pill__title { font-size: 16px !important; }
    .fed-ind-pill { min-height: 70px; padding: 14px 16px !important; }
    .fed-ind-pills__row { margin-bottom: 0 !important; }
    /* minmax(0,1fr) prevents grid overflow when a parent has overflow:hidden */
    .fed-ind-pills__row-inner { gap: 12px !important; padding-top: 6px !important; padding-bottom: 6px !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* Small phone — up to 400 px */
@media (max-width: 400px) {
    .fed-ind-card .fed-ind-card__title,
    .fed-ind-card:visited .fed-ind-card__title,
    .fed-ind-card:hover .fed-ind-card__title,
    .fed-ind-card:active .fed-ind-card__title,
    .fed-ind-pill .fed-ind-pill__title { font-size: 14px !important; }
    .fed-ind-pills__row-inner { grid-template-columns: minmax(0, 1fr) !important; }
}