/* ==========================================================================
   Arbor Law — Portable carousel styles
   Class-based so any cloned/copied carousel section works on any page.
   ========================================================================== */

/* ---------- Shared carousel nav arrow sizing ----------
   Pins all carousel nav icons (Key Contacts, News & Insights, Testimonials)
   to the same 44×44 box with a 16px SVG so they render identically across
   sections regardless of the widget's own size/padding settings.
   ---------------------------------------------------- */
.al-kc-nav .elementor-icon,
.al-news-nav .elementor-icon,
.al-testimonial-nav .elementor-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 16px !important;
    border-width: 1px !important;
    border-style: solid !important;
    cursor: pointer;
}
.al-kc-nav .elementor-icon svg,
.al-news-nav .elementor-icon svg,
.al-testimonial-nav .elementor-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}
.al-kc-nav .elementor-icon-wrapper,
.al-news-nav .elementor-icon-wrapper,
.al-testimonial-nav .elementor-icon-wrapper {
    line-height: 0;
}

/* Testimonial nav — softer 1px border on dark bg, brightens on hover */
.al-testimonial-nav .elementor-icon {
    border-color: rgba(255, 255, 255, 0.15) !important;
    transition: border-color 0.2s, background-color 0.2s;
}
.al-testimonial-nav .elementor-icon:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Hide built-in Swiper pagination dots in any cloned testimonial carousel */
.al-people-testimonial .swiper-pagination,
.al-people-testimonial .elementor-pagination {
    display: none !important;
}

/* ---------- Key Contacts (team) carousel ---------- */

/* Hide built-in Swiper pagination dots */
.al-kc-carousel .swiper-pagination,
.al-kc-carousel .elementor-pagination {
    display: none !important;
}

/* Header row: title block fills, nav arrows hug right and align to bottom */
.al-kc-header-row {
    align-items: flex-end !important;
}
.al-kc-header-row > .al-kc-title-block {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}
.al-kc-header-row > .al-kc-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
}

/* Nav arrows — softer thin border, hover state */
.al-kc-nav .elementor-icon {
    border-width: 1px !important;
    transition: border-color 0.2s, background-color 0.2s;
    border-color: rgba(31,35,40,0.18) !important;
}
.al-kc-nav .elementor-icon:hover {
    border-color: rgba(31,35,40,0.45) !important;
}

/* "Meet our full team →" link — subtle hover */
.al-kc-title-block .elementor-widget-heading a:hover {
    opacity: 0.8;
}

/* Team card image — uniform crop, any upload aspect ratio */
.al-kc-carousel .elementor-widget-image .elementor-widget-container {
    overflow: hidden;
    border-radius: 4px;
}
.al-kc-carousel .elementor-widget-image img {
    width: 100% !important;
    height: 360px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block;
}
@media (max-width: 1024px) {
    .al-kc-carousel .elementor-widget-image img {
        height: 340px !important;
    }
}
@media (max-width: 767px) {
    .al-kc-carousel .elementor-widget-image img {
        height: 320px !important;
    }
}


/* ---------- News & Insights carousel ---------- */

/* Section: relative + overflow hidden so spill + fades behave */
.al-news-section {
    position: relative;
    overflow: hidden;
}
.al-news-section > .e-con-inner {
    padding: 0;
}

/* Header aligned to boxed content edges on both sides */
.al-news-header-row {
    padding-left: calc((100vw - 1140px) / 2) !important;
    padding-right: calc((100vw - 1140px) / 2) !important;
}
.al-news-carousel {
    padding-left: calc((100vw - 1140px) / 2) !important;
    padding-right: 0 !important;
    overflow: visible;
}
@media (max-width: 1140px) {
    .al-news-header-row {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .al-news-carousel { padding-left: 40px !important; }
}
@media (max-width: 767px) {
    .al-news-header-row {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .al-news-carousel { padding-left: 24px !important; }
}

/* Force 380px card width + allow slides to spill past viewport right edge */
.al-news-carousel .swiper,
.al-news-carousel .elementor-swiper {
    overflow: visible !important;
}
.al-news-carousel .swiper-slide {
    width: 380px !important;
    max-width: 380px !important;
    flex-shrink: 0;
    height: auto;
}
@media (max-width: 460px) {
    .al-news-carousel .swiper-slide {
        width: calc(100vw - 48px) !important;
        max-width: none !important;
    }
}

/* Right fade — covers the off-canvas spill */
/* Specificity bump (.e-con.al-news-section) beats Elementor's .e-con:before/.e-con:after rules. */
.e-con.al-news-section::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 180px !important;
    height: auto !important;
    background: linear-gradient(90deg, rgba(31,35,40,0) 0%, var(--e-global-color-secondary, #1F2328) 75%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    display: block !important;
}
@media (max-width: 767px) {
    .e-con.al-news-section::after { width: 40px !important; }
}

/* Left fade — mirror */
.e-con.al-news-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: 180px !important;
    height: auto !important;
    background: linear-gradient(90deg, var(--e-global-color-secondary, #1F2328) 25%, rgba(31,35,40,0) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    display: block !important;
    opacity: 1 !important;
}
@media (max-width: 767px) {
    .e-con.al-news-section::before { width: 40px !important; }
}

/* Nav sits above the fade */
.al-news-nav {
    position: relative;
    z-index: 4;
}
.al-news-nav .elementor-icon {
    border-color: rgba(255,255,255,0.15) !important;
    border-width: 1px !important;
    transition: border-color 0.2s, background-color 0.2s;
}
.al-news-nav .elementor-icon:hover {
    border-color: rgba(255,255,255,0.45) !important;
}

/* Card layout: flex column with read-more pinned to bottom */
.al-news-card {
    display: flex;
    flex-direction: column;
}
.al-news-card > * { flex-shrink: 0; }

/* Excerpt — 2-line clamp */
.al-news-card-excerpt {
    overflow: hidden;
}
.al-news-card-excerpt p,
.al-news-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}

/* Card title — 2-line clamp for consistent card heights */
.al-news-card-title .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
}

/* Hide pagination dots */
.al-news-section .swiper-pagination,
.al-news-section .elementor-pagination { display: none !important; }

/* Read-more bar hover: bg → accent (Sage), text → White */
.al-news-readmore-bar {
    position: relative;
    transition: background-color 0.25s ease;
    cursor: pointer;
}
.al-news-readmore-bar .al-news-readmore .elementor-heading-title {
    transition: color 0.25s ease;
    display: block;
    width: 100%;
}
.al-news-readmore-bar .al-news-readmore .elementor-heading-title a {
    color: inherit !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
}
.al-news-readmore-bar .al-news-readmore .elementor-heading-title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
.al-news-readmore-bar:hover,
.e-loop-item:hover .al-news-readmore-bar {
    background-color: var(--e-global-color-accent) !important;
}
.al-news-readmore-bar:hover .al-news-readmore .elementor-heading-title,
.al-news-readmore-bar:hover .al-news-readmore .elementor-heading-title a,
.e-loop-item:hover .al-news-readmore-bar .al-news-readmore .elementor-heading-title,
.e-loop-item:hover .al-news-readmore-bar .al-news-readmore .elementor-heading-title a {
    color: var(--e-global-color-cc45519) !important;
}

/* News card image — uniform 220px crop, any upload aspect ratio */
.al-news-card .elementor-widget-image,
.al-news-card .elementor-widget-image > .elementor-widget-container,
.al-news-card .elementor-widget-image a,
.al-news-card .elementor-widget-image .elementor-image {
    width: 100% !important;
    display: block;
}
.al-news-card .elementor-widget-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
    max-width: none;
}
@media (max-width: 767px) {
    .al-news-card .elementor-widget-image img {
        height: 200px !important;
    }
}