:root{
    --javo-bg:#ffffff;
    --javo-surface:#ffffff;
    --javo-border:#E9EEF5;
    --javo-text:#101828;
    --javo-text-light:#667085;
    --javo-primary:#0F5FFF;
    --javo-primary-light:#EDF4FF;
    --javo-radius:18px;
}
.javo-podcasters-page{
    margin:10px auto;
    padding:0 24px;
}
/* ===========================
        HERO
=========================== */
.javo-podcasters-hero{
    margin-bottom:22px;
    text-align:center;
}
.javo-podcasters-title{
    font-size:34px;
    font-weight:800;
    line-height:1.25;
    margin:0;
    display: none;
}
.javo-podcasters-count{
    max-width:720px;
    margin:10px auto 0;
    color:var(--javo-text-light);
    font-size:15px;
    display: none;
    line-height:1.8;
}
/* ===========================
        FILTERS
=========================== */
.javo-podcasters-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 auto 28px;
    padding:8px;
    width:fit-content;
    max-width:100%;
    background:#F7F9FC;
    border:1px solid #E7ECF3;
    border-radius:999px;
}
.javo-filter-button{
    appearance:none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background:transparent;
    color:#667085;
    padding:11px 20px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    will-change:transform, background-color, color, box-shadow;
    transform:translateZ(0);
    transition:all .05s cubic-bezier(.4,0,.2,1);
}
.javo-filter-button.active{
    background:#7ad5ff;
    color:#1F2937;
    border:1px solid #3CBFFF;
    box-shadow:
        0 4px 10px rgba(15,95,255,.10),
        0 0 0 3px rgba(122,213,255,.18);
    transform:translateY(-1px) scale(1.02);
}
/* ===========================
        SEARCH
=========================== */
.javo-podcasters-search{
    /* display:flex; */
    display:none;
    justify-content:center;
    margin:0 auto 38px;
}
#javo-podcaster-search{
    width:100%;
    max-width:700px;
    height:58px;
    padding:0 26px;
    font-size:15px;
    color:#111827;
    background:rgba(248,248,248,.29);
    
    border:1px solid rgba(255,255,255,.8);
    border-radius:35px;
    box-shadow:0 8px 32px rgba(31,38,135,.07);
    outline:none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}
#javo-podcaster-search::placeholder{
    color:#98A2B3;
}
#javo-podcaster-search:focus{
    border-color:#7AD5FF;
    background:rgba(255,255,255,.45);
    box-shadow:
        0 8px 32px rgba(31,38,135,.08),
        0 0 0 4px rgba(122,213,255,.16);
}
/* ===========================
        GRID
=========================== */
.javo-podcasters-grid{
    display:grid;
    grid-template-columns:100%;
    gap:15px;
}
/* ===================================================
                PODCASTER CARD
=================================================== */
.javo-podcaster-card{
 position: relative;
    transition:.18s ease;
}
.javo-podcaster-card:hover{
    transform:translateY(-2px);
    border-color:#DCE6F2;
    box-shadow:0 12px 32px rgba(15,23,42,.05);
}
.javo-podcasters-page .javo-podcaster-card.is-followed,
.javo-podcasters-page .javo-podcaster-card.is-followed:hover{
    border-color:#0202c326;
}
/* ===================================================
                    LINK
=================================================== */
.javo-podcaster-link{
    display:grid;
    grid-template-columns:120px 1fr 120px;
    align-items:center;
    min-height:165px;
    text-decoration:none;
    color:inherit;
}
/* ===================================================
                    RIGHT
=================================================== */
.javo-podcaster-media{
    height:100%;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    
}
.javo-podcaster-cover{
    position:relative;
    width:100px;
    height:100px;
    border-radius:20px;
    overflow:visible;
    flex-shrink:0;
    background:#F8FAFC;
    border:2px solid rgba(255,255,255,.9);
    box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.javo-podcaster-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    vertical-align:middle;
    border-radius:inherit;
}
.javo-podcasters-page .javo-podcaster-new-badge{
    position:absolute;
    inset-block-start:2px;
    inset-inline-start:-4px;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:24px;
    padding-inline:8px;
    color:#fff;
    background:#FF5C00;
    border:2px solid rgba(255,255,255,0.95);
    border-radius:999px;
    box-shadow:0 2px 6px rgba(24,49,111,0.18);
    font-size:0.61rem;
    font-weight:800;
    line-height:1;
    letter-spacing:0.07em;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}
.javo-podcasters-page .javo-podcaster-new-badge .javo-saved-podcaster-new-icon{
    display:block;
    flex:0 0 auto;
    width:9px;
    height:9px;
    color:#fff;
}
.javo-podcasters-page .javo-podcaster-new-badge .javo-saved-podcaster-new-text{
    direction:ltr;
    line-height:1;
    unicode-bidi:isolate;
}
.javo-podcaster-category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    color:#ffffff;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    line-height:1.2;
}
/* ===================================================
                    CENTER
=================================================== */
.javo-podcaster-body{
    height:100%;
    padding:20px 32px 20px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.javo-podcaster-name{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#ffffff;
    line-height:1.4;
}
.javo-podcaster-description{
    margin-top:12px;
    width:100%;
    color:#ffffff;
    font-size:14px;
    line-height:1.95;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height:56px;
    max-height:56px;
    flex:1;
}
/* ===================================================
                    LEFT
=================================================== */
.javo-podcaster-action{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:26px;
    
}
.javo-podcaster-stats{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
}
.javo-podcaster-stats span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:#667085;
    font-size:13px;
    font-weight:500;
}
.javo-podcaster-stats span::first-line{
    font-size:22px;
    font-weight:700;
    color:#111827;
}
/* ===========================
    EMPTY
=========================== */
.javo-empty-state{
    grid-column:1/-1;
    padding:80px 20px;
    text-align:center;
    border:1px dashed var(--javo-border);
    border-radius:20px;
}
/* =========================================================
   JAVO PODCASTERS LIST — MOBILE
   Mobile only: 0px to 767px
========================================================= */

@media (max-width: 767px) {

    /* ===========================
            PAGE
    =========================== */

    .javo-podcasters-page {
        width: 100%;
        max-width: 100%;
        margin: 5px auto;
        padding: 0 1px;
    }
    /* ===========================
            HERO
    =========================== */

    .javo-podcasters-hero {
        margin-bottom: 16px;
        padding-inline: 4px;
        text-align: center;
    }

    .javo-podcasters-title {
        margin: 0;

        color: var(--javo-text);

        font-size: 25px;
        font-weight: 800;
        line-height: 1.4;
    }

    .javo-podcasters-count {
        max-width: 100%;

        margin: 7px auto 0;

        color: var(--javo-text-light);

        font-size: 12.5px;
        line-height: 1.8;
    }


    /* ===========================
        FILTERS — MOBILE
=========================== */

.javo-podcasters-filters {
    display: flex;
    align-items: center;
    justify-content: stretch;
    flex-wrap: nowrap;

    width: 100%;
    max-width: 100%;

    gap: 3px;
    margin: 0 auto 20px;
    padding: 6px;

    overflow: hidden;

    background: #F7F9FC;

    border: 1px solid #E7ECF3;
    border-radius: 999px;
}

.javo-podcasters-filters::-webkit-scrollbar {
    display: none;
}

.javo-filter-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 8px 3px;
    color: #667085;
    background: transparent;
    border: none;
    border-radius: 999px;
    font-size: clamp(8px, 2.35vw, 11px);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    will-change:
        transform,
        background-color,
        color,
        box-shadow;

    transform: translateZ(0);
    transition: all .05s cubic-bezier(.4, 0, .2, 1);
}
.javo-filter-button {
    position: relative;
}

.javo-filter-button:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: -2px;
    top: 50%;
    width: 1px;
    height: 16px;
    background: rgba(102, 112, 133, 0.18);
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
}
.javo-filter-button.active {
    color: #1F2937;
    background: #7ad5ff;
    border: 0.5px solid #3CBFFF;
    box-shadow:
        0 3px 8px rgba(15, 95, 255, .10),
        0 0 0 2px rgba(122, 213, 255, .16);
    transform:
        translateY(-1px)
        scale(1.01);
}
    /* ===========================
            GRID
    =========================== */
    .javo-podcasters-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 8px;
    }
    /* ===================================================
                    PODCASTER CARD
    =================================================== */
    .javo-podcaster-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    /* ===================================================
                    CARD LINK
    =================================================== */

    .javo-podcaster-link {
        display: grid;

        /*
         * ستون راست: تصویر و دسته‌بندی
         * ستون وسط: عنوان و توضیحات
         * ستون چپ: آمار
         *
         * ستون وسط بیشترین فضای کارت را دریافت می‌کند.
         */
        grid-template-columns:
            68px
            minmax(0, 1fr)
            54px;

        align-items: stretch;
        width: 100%;
        min-width: 0;
        min-height: 148px;
        color: inherit;
        text-decoration: none;
    }
    /* ===================================================
                    RIGHT — MEDIA
    =================================================== */

    .javo-podcaster-media {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 100%;
        gap: 7px;
        padding: 10px 5px;
        
    }
    .javo-podcaster-cover {
        width: 54px;
        height: 54px;
        min-width: 54px;
        flex-shrink: 0;

        overflow: visible;

        background: #F8FAFC;

        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 16px;

        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
    }

    .javo-podcaster-cover img {
        display: block;

        width: 100%;
        height: 100%;
        max-width: none;

        object-fit: cover;
        object-position: center;
        vertical-align: middle;
        border-radius: inherit;
    }

    .javo-podcasters-page .javo-podcaster-new-badge {
        position: absolute;
        inset-block-start: 1px;
        inset-inline-start: -3px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 21px;
        padding-inline: 6px;
        color: #fff;
        background: #FF5C00;
        border: 1.5px solid rgba(255, 255, 255, 0.95);
        border-radius: 999px;
        box-shadow: 0 2px 5px rgba(24, 49, 111, 0.16);
        font-size: 0.55rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.07em;
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
    }

    .javo-podcasters-page .javo-podcaster-new-badge .javo-saved-podcaster-new-icon {
        display: block;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        color: #fff;
    }

    .javo-podcasters-page .javo-podcaster-new-badge .javo-saved-podcaster-new-text {
        direction: ltr;
        line-height: 1;
        unicode-bidi: isolate;
    }

    .javo-podcaster-category {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        padding: 3px 3px;
        overflow: hidden;
        color: #ffffff;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.3;

        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* ===================================================
                    CENTER — CONTENT
    =================================================== */

    .javo-podcaster-body {
        display: flex;
        flex-direction: column;
        justify-content: center;

        width: 100%;
        min-width: 0;
        height: 100%;

        padding:
            14px
            13px
            14px
            10px;

        overflow: hidden;
    }

    .javo-podcaster-name {
        display: -webkit-box;

        width: 100%;
        min-width: 0;
        margin: 0;
        overflow: hidden;

        color: #ffffff;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.55;

        white-space: normal;
        overflow-wrap: anywhere;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .javo-podcaster-description {
        display: -webkit-box;
        flex: 0 0 auto;

        width: 100%;
        min-width: 0;
        min-height: auto;
        max-height: none;

        margin: 7px 0 0;
        overflow: hidden;

        color: #667085;

        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;

        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }


    /* ===================================================
                    LEFT — STATS
    =================================================== */

    .javo-podcaster-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 100%;
        gap: 12px;
        padding: 10px 3px;

    }

    .javo-podcaster-stats {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        gap: 13px;
    }

    .javo-podcaster-stats span {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;
        gap: 2px;

        overflow: hidden;

        color: #667085;

        font-size: 9.5px;
        font-weight: 500;
        line-height: 1.4;

        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .javo-podcaster-stats span::first-line {
        color: #111827;

        font-size: 16px;
        font-weight: 700;
    }


    /* ===========================
            EMPTY STATE
    =========================== */

    .javo-empty-state {
        grid-column: 1 / -1;

        padding: 52px 16px;

        text-align: center;

        border: 1px dashed var(--javo-border);
        border-radius: 20px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   320px to 359px
========================================================= */

@media (max-width: 359px) {

    .javo-podcasters-page {
        padding-inline: 8px;
    }

    .javo-podcasters-title {
        font-size: 22px;
    }

    .javo-podcasters-count {
        font-size: 11.5px;
    }

    .javo-podcasters-filters {
        gap: 4px;
        padding: 5px;
    }

    .javo-filter-button {
        min-height: 34px;
        padding: 7px 9px;

        font-size: 10.5px;
    }

    .javo-podcaster-link {
        grid-template-columns:
            60px
            minmax(0, 1fr)
            46px;

        min-height: 142px;
    }

    .javo-podcaster-media {
        gap: 6px;
        padding-inline: 4px;
    }

    .javo-podcaster-cover {
        width: 48px;
        height: 48px;
        min-width: 48px;

        border-radius: 14px;
    }

    .javo-podcaster-category {
        font-size: 8px;
    }

    .javo-podcaster-body {
        padding:
            12px
            9px
            12px
            7px;
    }

    .javo-podcaster-name {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .javo-podcaster-description {
        margin-top: 6px;

        font-size: 10.8px;
        line-height: 1.7;

        -webkit-line-clamp: 3;
    }

    .javo-podcaster-action {
        padding-inline: 2px;
    }

    .javo-podcaster-stats {
        gap: 11px;
    }

    .javo-podcaster-stats span {
        font-size: 8px;
    }

    .javo-podcaster-stats span::first-line {
        font-size: 14px;
    }
}


/* =========================================================
   STANDARD MOBILE
   360px to 430px
========================================================= */

@media (min-width: 360px) and (max-width: 430px) {

    .javo-podcaster-link {
        grid-template-columns:
            66px
            minmax(0, 1fr)
            52px;
    }

    .javo-podcaster-cover {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .javo-podcaster-body {
        padding:
            14px
            12px
            14px
            9px;
    }
}


/* =========================================================
   LARGE MOBILE
   431px to 767px
========================================================= */

@media (min-width: 431px) and (max-width: 767px) {

    .javo-podcasters-page {
        padding-inline: 16px;
    }

    .javo-podcasters-title {
        font-size: 28px;
    }

    .javo-podcasters-count {
        font-size: 13.5px;
    }

    .javo-filter-button {
        min-height: 40px;
        padding-inline: 15px;

        font-size: 13px;
    }

    .javo-podcasters-grid {
        gap: 8px;
    }

    .javo-podcaster-link {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            62px;

        min-height: 154px;
    }

    .javo-podcaster-cover {
        width: 64px;
        height: 64px;
        min-width: 64px;

        border-radius: 18px;
    }

    .javo-podcaster-category {
        font-size: 9.5px;
    }

    .javo-podcaster-body {
        padding:
            16px
            16px
            16px
            12px;
    }

    .javo-podcaster-name {
        font-size: 16px;
    }

    .javo-podcaster-description {
        margin-top: 8px;

        font-size: 12.5px;
        line-height: 1.8;
    }

    .javo-podcaster-stats span {
        font-size: 10px;
    }

    .javo-podcaster-stats span::first-line {
        font-size: 17px;
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (max-width: 767px) and (hover: none) and (pointer: coarse) {

    .javo-podcaster-card:hover {
        transform: none;

        border-color: rgba(255, 255, 255, 0.8);

        box-shadow:
            0 8px 32px 0 rgba(31, 38, 135, 0.07);
    }

    .javo-podcaster-link,
    .javo-filter-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .javo-podcaster-link:active {
        opacity: 0.94;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

    .javo-podcaster-card,
    .javo-filter-button,
    #javo-podcaster-search {
        transition-duration: 1ms;
    }
}
/* =========================================================
   PODCASTER CARD — REDUCE MOBILE VERTICAL SPACING
========================================================= */

@media (max-width: 767px) {

    .javo-podcaster-link {
        min-height: 128px;
    }

    .javo-podcaster-media {
        padding-block: 6px;
        gap: 5px;
    }

    .javo-podcaster-body {
        padding-block: 8px;
    }

    .javo-podcaster-description {
        margin-top: 5px;
    }

    .javo-podcaster-action {
        padding-block: 6px;
        gap: 8px;
    }

    .javo-podcaster-stats {
        gap: 9px;
    }
}
/* =========================================================
   Podcaster Card — Soft Center Divider
========================================================= */

.javo-podcaster-card {
    position: relative;
    overflow: visible;
}

.javo-podcaster-card::after {
    content: "";
    position: absolute;
    inset-inline-start: 5%;
    inset-inline-end: 5%;
    inset-block-end: -8px;
    height: 1px;
    background: linear-gradient(
        to left,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 12%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.05) 88%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}
/* =========================================================
   Mobile
========================================================= */
@media (max-width: 767px) {

    .javo-podcaster-card {
        overflow: visible;
    }

    .javo-podcaster-card::after {
        inset-inline-start: 4%;
        inset-inline-end: 4%;
        inset-block-end: -4px;

        background: linear-gradient(
            to left,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 8%,
            rgba(255, 255, 255, 0.14) 50%,
            rgba(255, 255, 255, 0.04) 92%,
            transparent 100%
        );
    }

}