/* SCD — Multimedia Listing page styles.
 *
 * Same architecture as contributors-listing.css: independent Sitefinity
 * widgets, each self-including this sheet; desktop/mobile variants both
 * render and are viewport-gated (≤768px → mobile). Sections appended as
 * their widgets land.
 */

/* =================================================================
   Hero — viewport gates
   ================================================================= */
.ml-hero--desktop { display: block; }
.ml-hero--mobile  { display: none; }
@media (max-width: 768px) {
    .ml-hero--desktop { display: none; }
    .ml-hero--mobile  { display: flex; }
}

/* =================================================================
   Hero — shared (Figma 1521:14691)
   ================================================================= */
.ml-hero { background: #FFFFFF; }
.ml-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #2FB8A9;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}
.ml-hero__eyebrow-icon { width: 28px; height: 28px; display: block; }
.ml-hero__heading {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: #000000;
}
.ml-hero__lead {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    color: #595959;
}
.ml-hero__ctas { display: flex; gap: 12px; }
.ml-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.ml-hero__cta--primary {
    background: #465DA6;
    border-color: #465DA6;
    color: #FFFFFF;
}
.ml-hero__cta--primary:hover { background: #38489E; color: #FFFFFF; }

/* =================================================================
   Hero — DESKTOP (Figma 1521:14691): px112 py48, 639 copy column,
   space-between, 519×301 illustration; centered 1440 content.
   ================================================================= */
.ml-hero--desktop { padding: 48px 0; }
.ml-hero--desktop .ml-hero__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.ml-hero--desktop .ml-hero__copy {
    width: 639px;
    max-width: 639px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ml-hero--desktop .ml-hero__illustration { flex: 0 0 auto; width: 520px; }
.ml-hero--desktop .ml-hero__illustration-img {
    display: block;
    width: 520px;
    height: auto;
}
@media (max-width: 1280px) {
    .ml-hero--desktop .ml-hero__container { padding: 0 48px; }
    .ml-hero--desktop .ml-hero__copy { width: 560px; max-width: 560px; }
    .ml-hero--desktop .ml-hero__illustration,
    .ml-hero--desktop .ml-hero__illustration-img { width: 440px; }
}

/* Hero — MOBILE. NOTE: do NOT set `display` here — the viewport gate
   above owns it (none >768px, flex ≤768px). Setting display:flex here
   would override the gate's display:none and leak onto desktop. */
.ml-hero--mobile {
    padding: 24px 16px 32px;
    flex-direction: column;
    gap: 24px;
}
.ml-hero--mobile .ml-hero__copy { display: flex; flex-direction: column; gap: 8px; }
.ml-hero--mobile .ml-hero__eyebrow { font-size: 12px; line-height: 20px; gap: 8px; }
.ml-hero--mobile .ml-hero__eyebrow-icon { width: 16px; height: 16px; }
.ml-hero--mobile .ml-hero__heading { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: 0; color: #262626; }
.ml-hero--mobile .ml-hero__lead { font-size: 14px; line-height: 22px; }
/* Figma 1410:11191 — 173-wide button, left-aligned (not full width). */
.ml-hero--mobile .ml-hero__ctas { display: flex; }
.ml-hero--mobile .ml-hero__cta {
    flex: 0 0 auto;
    min-width: 173px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}
/* copy→ctas is the 24px column gap; ctas→illustration is 32px. */
.ml-hero--mobile .ml-hero__illustration { width: 100%; margin-top: 8px; }
.ml-hero--mobile .ml-hero__illustration-img { display: block; width: 100%; height: auto; }

/* =================================================================
   Section scaffold (Trending / All Content / Experts) + viewport gates
   ================================================================= */
.ml-section--desktop { display: block; }
.ml-section--mobile  { display: none; }
.ml-cta--desktop { display: block; }
.ml-cta--mobile  { display: none; }
@media (max-width: 768px) {
    .ml-section--desktop { display: none; }
    .ml-section--mobile  { display: block; }
    .ml-cta--desktop { display: none; }
    .ml-cta--mobile  { display: block; }
}

.ml-section { background: #FFFFFF; }
.ml-section--desktop { padding: 48px 0; }
.ml-section--mobile  { padding: 24px 0; }
.ml-section__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 112px;
}
.ml-section--mobile .ml-section__container { padding: 0 16px; }
.ml-section__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
}
.ml-section--mobile .ml-section__header { gap: 8px; margin: 0 16px 20px; }
.ml-section__title {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
.ml-section--mobile .ml-section__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.ml-section__subtitle {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    color: #595959;
}
.ml-section--mobile .ml-section__subtitle { font-size: 14px; line-height: 20px; }
.ml-empty { color: #595959; font-size: 16px; padding: 8px 0; }
.ml-loading { text-align: center; color: #6B7280; font-size: 14px; margin: 12px 0 0; }

/* ---- Media card (Figma 1521:14740) ---- */
.ml-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.ml-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ml-card__media {
    position: relative;
    display: block;
    height: 282px;
    border-radius: 8px;
    overflow: hidden;
    background: #EEF1F6;
}
.ml-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-card__media-ph { display: block; width: 100%; height: 100%; background: #EEF1F6; }
.ml-card__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    background: #EAF8F6;
    color: #269387;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 16px;
}
.ml-card__chip {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(28, 37, 66, 0.85);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}
.ml-card__chip svg { display: block; }
.ml-card__title { margin: 0; }
.ml-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1C1C1C;
    text-decoration: none;
}
.ml-card__title a:hover { color: #465DA6; }
.ml-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
}
.ml-card__author { color: #000000; }
.ml-card__org { color: rgba(0, 0, 0, 0.45); }
.ml-card__dot { width: 2px; height: 2px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); flex: 0 0 auto; }

/* ---- All Content layout (Figma 1521:14780) ---- */
.ml-all__layout { display: flex; align-items: flex-start; gap: 52px; }
.ml-all__main { flex: 1 1 0; min-width: 0; }
.ml-all__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.ml-all [data-ml-all-container].is-loading { opacity: 0.55; transition: opacity 120ms; }
.ml-filter { width: 240px; flex: 0 0 240px; }
.ml-filter__heading { margin: 0 0 28px; font-size: 16px; line-height: 24px; font-weight: 600; color: #8C8C8C; }
.ml-filter__group { margin-bottom: 28px; }
.ml-filter__group-title { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: #000000; }
.ml-filter__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-size: 16px;
    line-height: 24px;
    color: #414651;
    cursor: pointer;
}
.ml-filter__opt input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #465DA6; }
.ml-filter__opt--disabled { opacity: 0.45; cursor: default; }
.ml-sortbar { display: inline-flex; align-items: center; gap: 8px; }
.ml-sortbar__label { font-size: 16px; line-height: 24px; color: #8C8C8C; }
.ml-sortbar__select {
    appearance: auto;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #1C1C1C;
    cursor: pointer;
}
.ml-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 32px;
}
.ml-pager__num, .ml-pager__nav {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid #D5D7DA;
    background: #FFFFFF;
    border-radius: 8px;
    color: #414651;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ml-pager__num.is-active { background: #EBF1FF; border-color: #465DA6; color: #465DA6; }
.ml-pager__num:disabled, .ml-pager__nav:disabled { opacity: 0.4; cursor: default; }
.ml-pager__gap { padding: 0 4px; color: #8C8C8C; }

/* ---- Experts (Figma 1521:14914) ---- */
.ml-experts__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
.ml-expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);
    min-width: 0;
}
.ml-expert__avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #F4F4F4; }
.ml-expert__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.ml-expert__avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #EEF1FB; color: #465DA6; font-weight: 600; font-size: 20px;
}
.ml-expert__verified { position: absolute; right: -6px; bottom: -7px; width: 26px; height: 26px; line-height: 0; }
.ml-expert__verified svg { width: 26px; height: 26px; }
.ml-expert__name { font-size: 16px; line-height: 24px; font-weight: 600; color: #000000; text-decoration: none; }
.ml-expert__name:hover { color: #465DA6; }
.ml-expert__org { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 14px; line-height: 22px; color: #262626; max-width: 100%; }
.ml-expert__org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-expert__org-icon { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.ml-expert__role { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: #8C8C8C; }
.ml-expert__tag {
    margin-top: 4px; background: #EBF1FF; color: #465DA6;
    font-size: 14px; line-height: 20px; font-weight: 500;
    padding: 4px 12px; border-radius: 16px;
}

/* ---- CTA (Figma 1521:14986) ---- */
.ml-cta { background: #F6F9FF; }
.ml-cta__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.ml-cta__title { margin: 0; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; color: #000000; }
.ml-cta__sub { margin: 0; font-size: 18px; line-height: 27px; color: #595959; }
.ml-cta__btn {
    margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; border-radius: 8px;
    background: #465DA6; color: #FFFFFF;
    font-size: 16px; line-height: 24px; font-weight: 600;
    text-decoration: none; box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}
.ml-cta__btn:hover { background: #38489E; color: #FFFFFF; }
.ml-cta--mobile .ml-cta__inner { padding: 40px 16px; }
.ml-cta--mobile .ml-cta__title { font-size: 26px; line-height: 34px; }
.ml-cta--mobile .ml-cta__sub { font-size: 15px; line-height: 22px; }

/* ---- Shimmer skeletons ---- */
@keyframes ml-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.ml-skel {
    display: block;
    background-color: #eef0f6;
    background-image: linear-gradient(90deg, #eef0f6 0%, #f7f8fb 50%, #eef0f6 100%);
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: ml-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
}
.ml-skel--media { width: 100%; height: 282px; border-radius: 8px; }
.ml-skel--avatar { width: 56px; height: 56px; border-radius: 50%; }
.ml-skel--line { height: 12px; margin: 8px 0; }
.ml-skel--w40 { width: 40%; } .ml-skel--w50 { width: 50%; }
.ml-skel--w70 { width: 70%; } .ml-skel--w80 { width: 80%; }
.ml-card--skeleton { gap: 8px; pointer-events: none; }
.ml-expert--skeleton { align-items: center; }
.ml-grid--skeleton .ml-skel--media { height: 282px; }

/* =================================================================
   MOBILE — Trending / All Content / Experts reflow (Figma 1410:11180)
   ================================================================= */
@media (max-width: 768px) {
    /* Trending + Experts → horizontal scrollers */
    .ml-section--mobile .ml-grid {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 16px;
    }
    .ml-section--mobile .ml-grid::-webkit-scrollbar { display: none; }
    .ml-section--mobile .ml-grid > * {
        flex: 0 0 auto;
        width: 239px;
        scroll-snap-align: start;
    }
    /* Figma 1410:11197 — mobile media card: 239 wide, image 158,
       title 14/22, meta 12/20, badge 12/20 (px8 py2). */
    .ml-section--mobile .ml-card__media { height: 158px; }
    .ml-section--mobile .ml-card__title a { font-size: 14px; line-height: 22px; }
    .ml-section--mobile .ml-card__meta { font-size: 12px; line-height: 20px; }
    .ml-section--mobile .ml-card__badge { font-size: 12px; line-height: 20px; padding: 2px 8px; }
    .ml-section--mobile .ml-card__chip { font-size: 10px; line-height: 16px; padding: 2px 6px; }

    /* Figma 1410:11341 — Experts: 212-wide cards in a scroller,
       56 avatar, name 14/22, org+role 12/20, smaller pill. */
    .ml-section--mobile .ml-experts__row {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 16px;
    }
    .ml-section--mobile .ml-experts__row::-webkit-scrollbar { display: none; }
    .ml-section--mobile .ml-experts__row > * { flex: 0 0 auto; width: 212px; }
    .ml-section--mobile .ml-expert__name { font-size: 14px; line-height: 22px; }
    .ml-section--mobile .ml-expert__org,
    .ml-section--mobile .ml-expert__role { font-size: 12px; line-height: 20px; }
    .ml-section--mobile .ml-expert__tag { font-size: 12px; line-height: 18px; padding: 2px 8px; }

    /* Figma 1410:11228 — All Content mobile: single full-width column,
       image 210, collapsible filter, Filter + Sort toolbar. */
    .ml-all--mobile .ml-section__title { margin: 0 16px 16px; }
    .ml-all--mobile .ml-all__layout { flex-direction: column; gap: 16px; padding: 0 16px; }
    .ml-all--mobile .ml-all__toolbar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .ml-all--mobile .ml-all__filter-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 9px 14px; border: 1px solid #D5D7DA; border-radius: 8px;
        background: #FFFFFF; color: #414651; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .ml-all--mobile .ml-filter { width: 100%; flex: none; }
    .ml-all--mobile .ml-grid--2 {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        padding: 0;
        gap: 24px;
    }
    .ml-all--mobile .ml-grid--2 > * { width: auto; }
    .ml-all--mobile .ml-card__media { height: 210px; }
    .ml-all--mobile .ml-pager { flex-wrap: wrap; }
}