/* ==============================================
   Enhanced Repeater - Card Display Mode Styles
   Single CSS file for all card display modes
   used by the EnhancedRepeater widget.
   ============================================== */

/* ===== RELATED POST CARD ===== */

.RelatedPostCardStyle-module__main_card {
    background-color: #FFFFFF;
    width: 100%;
}

.RelatedPostCardStyle-module__section_card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    /*padding: 24px 0;*/
}

.RelatedPostCardStyle-module__section_card_img {
    width: 132px;
    height: 132px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.RelatedPostCardStyle-module__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.RelatedPostCardStyle-module__eyebrow {
    font-size: 16px;
    line-height: 24px;
    color: #868F98;
}

.RelatedPostCardStyle-module__title {
    font-size: 18px;
    line-height: 26px;
    color: #0053A5;
    display: block;
}

.RelatedPostCardStyle-module__title:hover {
    text-decoration: underline !important;
}

.RelatedPostCardStyle-module__meta_row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.RelatedPostCardStyle-module__meta_date {
    font-size: 16px;
    line-height: 24px;
    color: #3C5567;
}

.RelatedPostCardStyle-module__meta_read {
    font-size: 16px;
    line-height: 24px;
    color: #868F98;
}

/* ===== TIER 3 CONTENT CARD ===== */

/* Green variant (default) */
.Tier3ContentCard-module__flex_card {
    background-color: #DBEAB9;
    border-radius: 16px;
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.04);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    transition: transform 0.3s ease;
}

.Tier3ContentCard-module__flex_card:hover {
    transform: translateY(-5px);
}

/* Blue variant */
.Tier3ContentCard-module__card--blue {
    background-color: #0053A5;
}

/* Eyebrow */
.Tier3ContentCard-module__eyebrow_wrapper {
    border-left: 2px solid #0053A5;
    padding: 6px 24px 6px 20px;
}

.Tier3ContentCard-module__card--blue .Tier3ContentCard-module__eyebrow_wrapper {
    border-left-color: #FFFFFF;
}

.Tier3ContentCard-module__eyebrow_text {
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0053A5;
}

.Tier3ContentCard-module__card--blue .Tier3ContentCard-module__eyebrow_text {
    color: #FFFFFF;
}

/* Title */
.Tier3ContentCard-module__title_text {
    font-size: 22px;
    line-height: 30px;
    color: #0053A5;
    text-transform: capitalize;
}

.Tier3ContentCard-module__card--blue .Tier3ContentCard-module__title_text {
    color: #FFFFFF;
}

/* Footer / CTA */
.Tier3ContentCard-module__footer {
    margin-top: auto;
}

.Tier3ContentCard-module__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.Tier3ContentCard-module__link_text {
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
    color: #0053A5;
}

.Tier3ContentCard-module__card--blue .Tier3ContentCard-module__link_text {
    color: #FFFFFF;
}

.Tier3ContentCard-module__link_arrow {
    font-size: 18px;
    color: #0053A5;
}

.Tier3ContentCard-module__card--blue .Tier3ContentCard-module__link_arrow {
    color: #FFFFFF;
}

/* ===== RELATED CONTENT CARD ===== */

/* Desktop (Huge variant) */
.RelatedContentCardStyle-module__card {
    background-color: #FFFFFF;
    border-radius: 32px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
}

.RelatedContentCardStyle-module__eyebrow_wrapper {
    border-left: 2px solid #0053A5;
    padding: 6px 24px 6px 20px;
}

.RelatedContentCardStyle-module__eyebrow_text {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0053A5;
}

.RelatedContentCardStyle-module__title_text {
    font-size: 34px;
    line-height: 48px;
    color: #0053A5;
    text-transform: capitalize;
    display: block;
}

.RelatedContentCardStyle-module__title_text:hover {
    text-decoration: underline !important;
}

.RelatedContentCardStyle-module__footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
}

.RelatedContentCardStyle-module__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.RelatedContentCardStyle-module__link_text {
    font-size: 22px;
    line-height: 30px;
    font-weight: 300;
    text-transform: capitalize;
    color: #006778;
}

.RelatedContentCardStyle-module__link_arrow {
    font-size: 18px;
    color: #006778;
}

/* ===== TIER 2 CONTENT CARD ===== */

/* Add spacing between cards when displayed in multi-column layouts */
.repeater-tier2contentcard .row {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}

/* Desktop: vertical layout - image on top, text below */
.Tier2ContentCardStyle-module__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.Tier2ContentCardStyle-module__card_img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
}

.Tier2ContentCardStyle-module__card_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.Tier2ContentCardStyle-module__card_title {
    font-size: 20px;
    line-height: 28px;
    color: #0053A5;
    display: block;
}

.Tier2ContentCardStyle-module__card_title:hover {
    text-decoration: underline !important;
}

.Tier2ContentCardStyle-module__card_description {
    font-size: 14px;
    line-height: 22px;
    color: #3C5567;
    margin-bottom: -8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* No min-height: short descriptions (1-2 lines) used to reserve a full
       3-line box, leaving dead space above the date. Clamp still caps at 3
       lines; the box now takes only the height the text needs. */
}

.Tier2ContentCardStyle-module__card_meta {
    display: flex;
    gap: 16px;
    align-items: center;
}

.Tier2ContentCardStyle-module__card_date {
    font-size: 14px;
    line-height: 20px;
    color: #3C5567;
}

.Tier2ContentCardStyle-module__card_read {
    font-size: 14px;
    line-height: 20px;
    color: #868F98;
}

/* ===== EVENT CARD - LEARN MORE BUTTON ===== */

.eventcard-btn {
    display: inline-block;
    background-color: #fff;
    color: #000;
    font-family: "Open Sans", Helvetica, Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 100%;
    padding: 1rem 1rem 1rem 30px !important;
    border-radius: 30px !important;
    cursor: pointer;
    box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.15);
    text-align: center;
    white-space: nowrap;
}
.eventcard-btn i {
    margin-left: 5px;
}

.EventCardStyle-module__description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 22px;
    opacity: 0.85;
}

/* ===== EVENT SPEAKER CARD ===== */

.EventSpeakerCard-module__main_card {
    width: 100%;
    max-width: 400px;
    padding: 16px;
}

.EventSpeakerCard-module__section_card {
    background-color: #E9F0F4;
    border-radius: 24px;
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.04);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.EventSpeakerCard-module__section_card:hover {
    box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.1);
}

.EventSpeakerCard-module__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
}

.EventSpeakerCard-module__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 16px;
    flex: 0 0 auto;
}

.EventSpeakerCard-module__info {
    text-align: left;
    flex: 1;
    min-width: 0;
}

.EventSpeakerCard-module__name {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #262D61;
    margin-bottom: 4px;
}

.EventSpeakerCard-module__name:hover {
    text-decoration: underline !important;
}

.EventSpeakerCard-module__subtitle {
    font-size: 16px;
    line-height: 24px;
    color: #262D61;
    font-weight: 300;
}

.EventSpeakerCard-module__arrow {
    flex-shrink: 0;
    padding-left: 12px;
    cursor: pointer;
    align-self: flex-end;
}

/* ===== TITLE & DESCRIPTION CARD ===== */

.repeater-titledescription .row {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}

.repeater-titledescription .title-description-item {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.repeater-titledescription .title-description-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ===== MOBILE RESPONSIVE ===== */

@media only screen and (max-width: 768px) {

    /* Related Post Card - Mobile */
    .RelatedPostCardStyle-module__section_card {
        /*padding: 24px 0;*/
        align-items: center;
    }

    .RelatedPostCardStyle-module__section_card_img {
        width: 103px;
        height: 103px;
    }

    .RelatedPostCardStyle-module__content {
        gap: 8px;
    }

    .RelatedPostCardStyle-module__eyebrow {
        font-size: 14px;
        line-height: 22px;
    }

    .RelatedPostCardStyle-module__title {
        font-size: 16px;
        line-height: 24px;
    }

    .RelatedPostCardStyle-module__meta_date {
        font-size: 14px;
        line-height: 22px;
    }

    .RelatedPostCardStyle-module__meta_read {
        font-size: 14px;
        line-height: 22px;
    }

    /* Related Content Card - Mobile (Medium variant) */
    .RelatedContentCardStyle-module__card {
        border-radius: 24px;
        padding: 32px;
        justify-content: space-between;
    }

    .RelatedContentCardStyle-module__eyebrow_text {
        font-size: 14px;
        line-height: 16px;
    }

    .RelatedContentCardStyle-module__title_text {
        font-size: 24px;
        line-height: 34px;
    }

    .RelatedContentCardStyle-module__footer {
        display: none;
    }

    /* Event Speaker Card - Mobile */
    .EventSpeakerCard-module__main_card {
        padding: 12px;
    }

    .EventSpeakerCard-module__section_card {
        padding: 16px;
        border-radius: 20px;
    }

    .EventSpeakerCard-module__name {
        font-size: 18px;
        line-height: 26px;
    }

    .EventSpeakerCard-module__subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    /* Title & Description Card - Mobile */
    .repeater-titledescription .title-description-item {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .repeater-titledescription .title-description-item h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .repeater-titledescription .title-description-item p {
        font-size: 14px;
        line-height: 22px;
    }

    /* Tier 2 Content Card - Mobile: horizontal layout */
    .Tier2ContentCardStyle-module__card {
        flex-direction: row;
        align-items: flex-start;
    }

    .Tier2ContentCardStyle-module__card_img {
        width: 133px;
        height: 133px;
        flex-shrink: 0;
    }

    .Tier2ContentCardStyle-module__card_content {
        gap: 16px;
        justify-content: center;
    }

    .Tier2ContentCardStyle-module__card_title {
        font-size: 16px;
        line-height: 24px;
    }

    .Tier2ContentCardStyle-module__card_date {
        font-size: 14px;
        line-height: 22px;
    }

    .Tier2ContentCardStyle-module__card_read {
        font-size: 14px;
        line-height: 22px;
    }
}

/* =====================================================
   EQUAL-HEIGHT CARDS (all display modes)
   --------------------------------------------------------
   Bootstrap rows already stretch their columns to the
   tallest column. These rules propagate that height down
   the wrapper chain (col → editor wrapper → card root) so
   every card fills its column, and pin known footer/CTA
   rows to the bottom via flex auto-margin so CTAs align.
   Single source of truth — no JS edits needed per card.
   ===================================================== */

/* Make the col itself a column flex container so its child stretches. */
.repeater-items > .row > [class*="col-"],
.repeater-items > .row > .col {
    display: flex;
    flex-direction: column;
}

/* The wrapper inside each col carries the editor's "Item CSS Class"
   (often empty). Force it to fill the col. */
.repeater-items > .row > [class*="col-"] > *,
.repeater-items > .row > .col > * {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Stretch every known card root to fill the wrapper. */
.repeater-items .RelatedPostCardStyle-module__main_card,
.repeater-items .RelatedContentCardStyle-module__card,
.repeater-items .Tier2ContentCardStyle-module__card,
.repeater-items .Tier3ContentCard-module__flex_card,
.repeater-items .EventSpeakerCard-module__main_card,
.repeater-items .EventCardStyle-module__main_card,
.repeater-items .Tier4ContentCard-module__section_card,
.repeater-items .title-description-item,
.repeater-items .document-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Inner content panels (image-on-top cards) — let the content area stretch so
   meta/footer can be pinned to the bottom via mt-auto. Only target panels
   that ALREADY use flex-column internally; cards with row-style bodies (e.g.
   EventSpeakerCard's info+arrow row) are left alone — their existing CSS
   already gives them flex:1 within a column-flex parent. */
.repeater-items .RelatedPostCardStyle-module__content {
    flex: 1 1 auto;
}

/* Pin CTA/footer rows to the bottom of the card body.
   Tier2ContentCard is deliberately excluded: it's an image-on-top blog card
   with no background or bottom CTA, so pinning its date row to the bottom of
   an equal-height column only opens a gap below the description. Its meta sits
   directly under the description instead. */
.repeater-items .RelatedContentCardStyle-module__footer,
.repeater-items .RelatedPostCardStyle-module__meta_row,
.repeater-items .Tier3ContentCard-module__footer {
    margin-top: auto;
}

/* =====================================================
   SEARCH BAR + SORT DROPDOWN — mobile-friendly overrides
   --------------------------------------------------------
   The widget reuses MemberSearchAllCompanies styles, which
   were designed for two side-by-side dropdowns. Here there's
   only one (Sort). These rules cap its width on desktop,
   stretch it across rows on mobile, and prevent the closed
   select from overflowing when the chosen label is long.
   ===================================================== */

/* Don't let the lone dropdown stretch to fill all leftover space on
   wide screens — it makes the search bar look unbalanced. */
.repeater-widget .ms-dropdowns {
    flex: 0 1 auto;
    align-items: center;
}

.repeater-widget .ms-dropdowns .ms-select-wrapper {
    min-width: 220px;
}

/* Closed-state text: truncate with ellipsis instead of clipping or
   pushing the chevron offscreen on narrow widths. */
.repeater-widget .ms-select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Mobile: stack search bar vertically and let the dropdown go full width
   so the chevron + chosen label both stay inside the visible box. */
@media (max-width: 767.98px) {
    .repeater-widget .ms-search-bar {
        flex-direction: column;
        gap: 16px;
    }
    .repeater-widget .ms-search-input-group {
        width: 100%;
        height: 44px;
    }
    .repeater-widget .ms-dropdowns {
        width: 100%;
        gap: 12px;
    }
    .repeater-widget .ms-dropdowns .ms-select-wrapper {
        min-width: 0;
        flex: 1 1 100%;
    }
    .repeater-widget .ms-select {
        font-size: 15px;
        line-height: 22px;
        height: 44px;
        padding: 8px 44px 8px 14px;
        background-size: 22px 22px;
        background-position: right 12px center;
    }
    .repeater-widget .ms-search-btn {
        font-size: 15px;
        line-height: 22px;
        padding: 8px 20px;
    }
}