/* connor_news_carousel — visual styling
 *
 * 1-up hero layout: featured image on the left, dark translucent teal card
 * on the right, slightly overlapping the image. CTA is a green pill button.
 * Matches the legacy DSM "In the News" Supreme Card Carousel.
 *
 * Brand values pulled from the existing DSM module:
 *   - Card background: rgba(26, 48, 47, 0.92)
 *   - CTA background: #009c65
 *   - CTA text:       #FFFFFF
 *   - Font:           Montserrat (assumed loaded by the theme; falls back gracefully)
 *
 * Override these by setting CSS custom properties on .ccn-news-carousel.
 *
 * Markup contract (from templates/carousel.php):
 *
 *   .ccn-news-carousel              — outer wrap, contains arrows + pagination
 *     .ccn-news-carousel__viewport  — the .swiper container, clips slides
 *       .swiper-wrapper
 *         .swiper-slide.ccn-news-carousel__slide
 *           .ccn-news-carousel__slide-inner — flex row: media + card
 *     .ccn-news-carousel__nav--prev / --next — absolute, OUTSIDE the viewport
 *     .swiper-pagination — below the viewport
 */

.ccn-news-carousel {
    position: relative;
    margin: 0 auto;
    padding: 0 64px; /* leaves space for absolute-positioned arrows */
    max-width: 1200px;
    box-sizing: border-box;

    --ccn-card-bg: rgba(26, 48, 47, 0.92);
    --ccn-card-text: #ffffff;
    --ccn-card-muted: rgba(255, 255, 255, 0.78);
    --ccn-cta-bg: #009c65;
    --ccn-cta-text: #ffffff;
    --ccn-cta-radius: 25px;
    --ccn-cta-font: 'Montserrat', Helvetica, Arial, 'Lucida Sans Unicode', sans-serif;
    --ccn-arrow-bg: rgba(255, 255, 255, 0.85);
    --ccn-arrow-bg-hover: #ffffff;
    --ccn-arrow-fg: #1a302f;
    --ccn-arrow-size: 52px;

    /* Hero slide proportions */
    --ccn-image-width: 60%;
    --ccn-card-width: 45%;
    --ccn-card-overlap: 5%;
    --ccn-min-height: 400px;
}

/* --- Viewport (the actual .swiper container that clips slides) --- */

.ccn-news-carousel__viewport {
    width: 100%;
    /* Swiper's bundle CSS sets overflow: hidden on .swiper. Keep that. */
}

/* --- Slide --- */

.ccn-news-carousel__slide {
    height: auto;
    box-sizing: border-box;
}

/* Fixed height (not min-height) so every slide is visually identical and the
 * carousel doesn't jump as you swipe between articles with different excerpt
 * lengths. Title and excerpt below get -webkit-line-clamp to truncate gracefully
 * when content overflows. On stacked mobile the height switches back to auto
 * because the layout is column-major and naturally consistent.
 */
.ccn-news-carousel__slide-inner {
    display: flex;
    align-items: stretch;
    position: relative;
    height: var(--ccn-min-height);
    width: 100%;
}

/* --- Media --- */

.ccn-news-carousel__media {
    flex: 0 0 var(--ccn-image-width);
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
}

.ccn-news-carousel__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Card ---
 * flex-basis 45% with a -5% margin-left gives an outer footprint of 40%,
 * so total layout width is 60% (media) + 40% (card outer) = 100% — fits
 * exactly inside the viewport with no horizontal bleed. The visual overlap
 * comes from the negative margin shifting the card 5% over the image.
 */

.ccn-news-carousel__card {
    flex: 0 0 var(--ccn-card-width);
    margin-left: calc(var(--ccn-card-overlap) * -1);
    background: var(--ccn-card-bg);
    color: var(--ccn-card-text);
    padding: 36px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    align-self: stretch;
    box-sizing: border-box;
    font-family: var(--ccn-cta-font);
}

.ccn-news-carousel__source {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ccn-card-muted);
}

/* Title sizing notes:
 *   - Smaller font + tighter clamp budget so a 9-word title (e.g. "The Connor
 *     Group Earns 2026 USA TODAY Top Workplaces Award") still lays out cleanly
 *     in the 45%-wide card.
 *   - line-height 1.3 (not 1.2) plus padding-bottom: 0.15em is a workaround for
 *     a long-standing WebKit/Blink bug where -webkit-line-clamp clips
 *     descenders on the final visible line. The padding gives the descenders
 *     a few extra pixels of breathing room without measurably shifting layout.
 */
.ccn-news-carousel__title {
    font-family: var(--ccn-cta-font);
    font-size: clamp(17px, 2vw, 24px);
    line-height: 1.3;
    margin: 0;
    padding-bottom: 0.15em;
    color: var(--ccn-card-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ccn-news-carousel__excerpt {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    color: var(--ccn-card-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ccn-news-carousel__date {
    font-size: 12px;
    color: var(--ccn-card-muted);
    letter-spacing: 0.04em;
}

.ccn-news-carousel__cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
    background: var(--ccn-cta-bg);
    color: var(--ccn-cta-text);
    padding: 12px 28px;
    border-radius: var(--ccn-cta-radius);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--ccn-cta-font);
    text-decoration: none;
    line-height: 1;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ccn-news-carousel__cta:hover,
.ccn-news-carousel__cta:focus-visible {
    background: color-mix(in srgb, var(--ccn-cta-bg) 88%, #000);
    color: var(--ccn-cta-text);
    transform: translateY(-1px);
    text-decoration: none;
}

.ccn-news-carousel__cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* --- Navigation arrows ---
 * Absolute-positioned children of the outer .ccn-news-carousel wrap (NOT the
 * viewport), so they sit in the wrap's left/right padding zone — outside the
 * slide content and not subject to the viewport's overflow:hidden clipping.
 */

.ccn-news-carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: var(--ccn-arrow-size);
    height: var(--ccn-arrow-size);
    margin-top: calc(var(--ccn-arrow-size) / -2);
    background: var(--ccn-arrow-bg);
    color: var(--ccn-arrow-fg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ccn-news-carousel__nav:hover,
.ccn-news-carousel__nav:focus-visible {
    background: var(--ccn-arrow-bg-hover);
    transform: scale(1.05);
}

.ccn-news-carousel__nav:focus-visible {
    outline: 2px solid var(--ccn-cta-bg);
    outline-offset: 3px;
}

.ccn-news-carousel__nav[aria-disabled="true"],
.ccn-news-carousel__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.ccn-news-carousel__nav--prev {
    left: 6px;
}

.ccn-news-carousel__nav--next {
    right: 6px;
}

.ccn-news-carousel__nav-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* --- Pagination dots ---
 * Render below the viewport, in normal flow, on the section background.
 */

.ccn-news-carousel .swiper-pagination {
    position: relative;
    margin-top: 18px;
    text-align: center;
}

.ccn-news-carousel .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    margin: 0 4px;
}

.ccn-news-carousel .swiper-pagination-bullet-active {
    background: var(--ccn-cta-bg);
}

/* --- Responsive: tablet --- */

@media (max-width: 900px) {
    .ccn-news-carousel {
        --ccn-image-width: 55%;
        --ccn-card-width: 50%;
        --ccn-card-overlap: 5%;
        --ccn-min-height: 380px;
        --ccn-arrow-size: 44px;
        padding-left: 52px;
        padding-right: 52px;
    }

    .ccn-news-carousel__card {
        padding: 28px 24px;
    }
}

/* --- Responsive: mobile (stack vertically, keep arrows) ---
 * Slide stacks (image on top, card below). Strict line-clamps on the title and
 * excerpt above keep card heights consistent slide-to-slide, so we drop the
 * fixed desktop height back to auto rather than fighting the column layout.
 *
 * Arrows stay visible (smaller, still translucent white) — comms feedback was
 * that without them the mobile carousel reads as a static card. The buttons
 * sit just inside the carousel edges, vertically centered over the image area.
 */

@media (max-width: 640px) {
    .ccn-news-carousel {
        padding: 0 16px;
        --ccn-arrow-size: 36px;
    }

    .ccn-news-carousel__slide-inner {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .ccn-news-carousel__media {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
        position: relative;
    }

    .ccn-news-carousel__card {
        flex: none;
        width: 100%;
        margin-left: 0;
        padding: 24px 20px;
    }

    /* Position arrows in the upper third of the slide so they sit over the
     * image, where the white circle has the most contrast and won't overlap
     * the title/excerpt below. */
    .ccn-news-carousel__nav {
        top: 28%;
        margin-top: 0;
        transform: translateY(-50%);
    }

    .ccn-news-carousel__nav:hover,
    .ccn-news-carousel__nav:focus-visible {
        transform: translateY(-50%) scale(1.05);
    }

    .ccn-news-carousel__nav--prev {
        left: 4px;
    }

    .ccn-news-carousel__nav--next {
        right: 4px;
    }
}