/* Opt-in Classor carousel models. No selectors escape the two owned widget instances. */
.classor-content-carousel {
    --classor-carousel-padding: var(--jds-space-5);
    --classor-carousel-gap: var(--jds-space-3);
    --classor-carousel-radius: var(--jds-radius-card);
    --classor-carousel-media-radius: var(--jds-radius-media);
    --classor-carousel-surface: var(--jds-color-surface);
    --classor-carousel-title: var(--jds-color-text);
    --classor-carousel-text: var(--jds-color-muted);
    --classor-carousel-border: var(--jds-color-border);
    --classor-carousel-overlay-surface: #10212e;
    --classor-carousel-overlay-text: #fff;
    --classor-carousel-title-lines: 3;
    inline-size: 100%;
    min-inline-size: 0;
    color: var(--jds-color-text);
}
.classor-content-carousel .posts-section-header { gap: var(--jds-space-4); flex-wrap: wrap; }
.classor-content-carousel .posts-wrapper-slider-shkrn { inline-size:100%; min-inline-size:0; padding-block:var(--jds-space-2) var(--jds-space-10); }
.classor-content-carousel .swiper-wrapper { align-items:stretch; }
.classor-content-carousel .classor-carousel-card {
    min-inline-size:0; height:auto; padding:0; position:relative;
    display:flex; flex-direction:column; gap:0; overflow:hidden;
    background:var(--classor-carousel-surface); color:var(--classor-carousel-text);
    border:1px solid var(--classor-carousel-border); border-radius:var(--classor-carousel-radius);
    box-shadow:var(--jds-shadow-card); text-align:start;
    transition:box-shadow var(--jds-duration-fast) var(--jds-ease), border-color var(--jds-duration-fast) var(--jds-ease);
}
.classor-content-carousel .classor-carousel-card:hover { transform:none; border-color:var(--jds-color-primary); box-shadow:var(--jds-shadow-raised); }
.classor-content-carousel .classor-carousel-card:focus-within { outline:var(--jds-focus-width) solid var(--jds-focus-color,var(--jds-color-primary)); outline-offset:var(--jds-focus-offset); }
.classor-content-carousel .classor-carousel-card-link,
.classor-content-carousel .course-openner-link-box-shkrn {
    display:flex; flex-direction:column; gap:0; flex:1; min-inline-size:0; height:auto;
    color:inherit; text-decoration:none;
}
.classor-content-carousel .classor-carousel-media { display:block; position:relative; overflow:hidden; flex:none; aspect-ratio:var(--classor-carousel-ratio,16/9); background:var(--jds-color-surface-soft); }
.classor-content-carousel .classor-carousel-image,
.classor-content-carousel .course-openner-link-box-shkrn > img {
    display:block; inline-size:100%; block-size:100%; margin:0; border-radius:0;
    object-fit:cover; object-position:var(--classor-carousel-image-position,center);
    aspect-ratio:var(--classor-carousel-ratio,16/9);
}
.classor-content-carousel .classor-carousel-image--placeholder { object-fit:contain; }
.classor-content-carousel .classor-carousel-card-body {
    display:flex; flex-direction:column; align-items:stretch; gap:var(--classor-carousel-gap);
    min-inline-size:0; padding:var(--classor-carousel-padding); flex:1;
}
.classor-content-carousel .classor-carousel-card-title {
    color:var(--classor-carousel-title); font-family:var(--jds-font-heading);
    font-size:var(--jds-type-card-title); font-weight:var(--jds-weight-heading);
    line-height:var(--jds-leading-heading); padding:0; margin:0; text-align:start;
    overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:var(--classor-carousel-title-lines); overflow:hidden;
}
.classor-content-carousel .classor-carousel-summary {
    color:var(--classor-carousel-text); font-size:var(--jds-type-small); line-height:var(--jds-leading-body);
    margin:0; padding:0; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.classor-content-carousel .classor-carousel-eyebrow {
    color:var(--jds-color-accent-text); align-self:flex-start;
    padding:var(--jds-space-1) var(--jds-space-2); border-radius:var(--jds-radius-pill);
    background:var(--jds-color-primary-soft); font-size:var(--jds-type-caption); font-weight:var(--jds-weight-label);
    max-inline-size:100%; overflow-wrap:anywhere;
}
.classor-content-carousel .classor-carousel-meta {
    display:flex; flex-wrap:wrap; gap:var(--jds-space-2) var(--jds-space-4); color:var(--classor-carousel-text);
    font-size:var(--jds-type-caption); line-height:var(--jds-leading-body); margin-block-start:auto;
}
.classor-content-carousel .classor-carousel-action,
.classor-content-carousel .classor-carousel-card > :is(.button,.btn-more-course-shkrn,.jaygah-reference-button) {
    display:flex; align-items:center; justify-content:center; gap:var(--jds-space-2);
    min-block-size:var(--jds-touch-target); min-inline-size:var(--jds-touch-target);
    box-sizing:border-box; padding:var(--jds-space-2) var(--jds-space-4);
    border-radius:var(--jds-radius-control); text-align:center; line-height:var(--jds-leading-heading);
    background:var(--classor-carousel-action,var(--jds-action-background));
    color:var(--classor-carousel-action_text,var(--jds-action-text));
    margin:0; font-weight:var(--jds-weight-label); font-size:var(--jds-type-small);
}
.classor-content-carousel .classor-carousel-action { margin-block-start:auto; }
.classor-content-carousel .classor-carousel-action > svg { flex:none; }
.classor-content-carousel .classor-carousel-card > :is(.button,.btn-more-course-shkrn,.jaygah-reference-button) { margin:0 var(--classor-carousel-padding) var(--classor-carousel-padding); }
.classor-content-carousel .classor-carousel-card:hover .classor-carousel-action { background:var(--classor-carousel-action,var(--jds-action-background)); color:var(--classor-carousel-action_text,var(--jds-action-text)); }
.classor-content-carousel .classor-carousel-card :is(.course-item-row-detail,.course-teacher-shkrn,.price) { min-inline-size:0; max-inline-size:100%; overflow-wrap:anywhere; }
.classor-content-carousel .course-item-row-detail { font-size:var(--jds-type-meta); gap:var(--jds-space-2); margin:0; }
.classor-content-carousel .course-teacher-shkrn { flex:1; align-items:flex-start; }
.classor-content-carousel .course-teacher-shkrn > svg { flex:none; margin-block-start:var(--jds-space-1); }
.classor-content-carousel .classor-carousel-card-body .price { display:flex; flex-wrap:wrap; align-items:center; gap:var(--jds-space-2); margin-inline-start:auto; }
.classor-content-carousel .badge-darsad { inset-block-start:var(--jds-space-3); inset-inline-end:var(--jds-space-3); inset-inline-start:auto; max-inline-size:calc(100% - var(--jds-space-6)); background:var(--jds-action-background); color:var(--jds-action-text); border-radius:var(--jds-radius-control); font-size:var(--jds-type-caption); line-height:var(--jds-leading-heading); }
.classor-content-carousel .product-counter-shkrn:empty { display:none; }
.classor-content-carousel .classor-carousel-empty { inline-size:100%; padding:var(--jds-space-10) var(--jds-space-5); text-align:center; color:var(--jds-color-muted); border:1px dashed var(--jds-color-border); border-radius:var(--jds-radius-card); background:var(--jds-color-surface); }
.classor-content-carousel[data-classor-hide-meta] :is(.course-teacher-shkrn,.buyers-of-course-shkrn,.rate) { display:none; }
.classor-content-carousel[data-classor-hide-cta] .classor-carousel-card > :is(.button,.btn-more-course-shkrn,.jaygah-reference-button) { display:none; }
/* Stripe-inspired editorial cover: framed image, category and full-width action. */
.classor-content-carousel--editorial .classor-carousel-media { inline-size:calc(100% - var(--jds-space-6)); margin:var(--jds-space-3) var(--jds-space-3) 0; border-radius:var(--classor-carousel-media-radius); }
.classor-content-carousel--editorial .classor-carousel-card-body { padding-block-start:var(--jds-space-4); }
/* Linear-inspired digest: image and text share a horizontal, compact reading row. */
.classor-content-carousel--digest .classor-carousel-card-link { display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); }
.classor-content-carousel--digest .classor-carousel-media { aspect-ratio:auto; min-block-size:100%; }
.classor-content-carousel--digest .classor-carousel-image { position:absolute; inset:0; aspect-ratio:auto; }
.classor-content-carousel--digest .classor-carousel-action { align-self:flex-start; padding-inline:0; justify-content:flex-start; background:transparent; color:var(--jds-color-accent-text); }
.classor-content-carousel--digest .classor-carousel-card:hover .classor-carousel-action { background:transparent; color:var(--jds-color-accent-text); }
/* Apple Newsroom-inspired story: stable cover with a dark reading scrim. */
.classor-content-carousel--story .classor-carousel-card-link { position:relative; aspect-ratio:var(--classor-carousel-ratio,4/5); justify-content:flex-end; background:var(--classor-carousel-overlay-surface); }
.classor-content-carousel--story .classor-carousel-media { position:absolute; inset:0; aspect-ratio:auto; }
.classor-content-carousel--story .classor-carousel-card-link::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 5%,color-mix(in srgb,var(--classor-carousel-overlay-surface) 80%,transparent) 45%,var(--classor-carousel-overlay-surface)); }
.classor-content-carousel--story .classor-carousel-card-body { position:relative; z-index:1; flex:0 0 auto; padding-block-start:var(--jds-space-12); }
.classor-content-carousel--story :is(.classor-carousel-card-title,.classor-carousel-summary,.classor-carousel-meta) { color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--story .classor-carousel-eyebrow { background:color-mix(in srgb,var(--classor-carousel-overlay-surface) 88%,transparent); color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--story .classor-carousel-action { border:1px solid color-mix(in srgb,var(--classor-carousel-overlay-text) 65%,transparent); background:transparent; color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--story .classor-carousel-card:hover .classor-carousel-action { background:color-mix(in srgb,var(--classor-carousel-overlay-text) 12%,transparent); color:var(--classor-carousel-overlay-text); }
/* Coursera-inspired catalog: image, instructor/reputation, price and separate enrollment action. */
.classor-content-carousel--catalog .course-openner-link-box-shkrn > img { margin:var(--jds-space-3) var(--jds-space-3) 0; inline-size:calc(100% - var(--jds-space-6)); block-size:auto; border-radius:var(--classor-carousel-media-radius); }
.classor-content-carousel--catalog .classor-carousel-card-body { padding-block-start:var(--jds-space-4); }
/* MasterClass-inspired cinematic poster; commerce remains below the poster, outside its link. */
.classor-content-carousel--cinematic .course-openner-link-box-shkrn { position:relative; aspect-ratio:var(--classor-carousel-ratio,3/4); justify-content:flex-end; flex:1 0 auto; background:var(--classor-carousel-overlay-surface); }
.classor-content-carousel--cinematic .course-openner-link-box-shkrn > img { position:absolute; inset:0; aspect-ratio:auto; }
.classor-content-carousel--cinematic .course-openner-link-box-shkrn::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 10%,color-mix(in srgb,var(--classor-carousel-overlay-surface) 85%,transparent) 55%,var(--classor-carousel-overlay-surface)); }
.classor-content-carousel--cinematic .classor-carousel-card-body { z-index:1; position:relative; flex:0 0 auto; padding-block-start:var(--jds-space-12); color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--cinematic .classor-carousel-card-title { color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--cinematic .classor-carousel-card-body :is(.course-teacher-shkrn,.buyers-of-course-shkrn,.price,.price del,.rate) { color:var(--classor-carousel-overlay-text); }
.classor-content-carousel--cinematic .classor-carousel-card > :is(.button,.btn-more-course-shkrn,.jaygah-reference-button) { margin-block-start:var(--classor-carousel-padding); }
/* Coursera list-inspired compact course: image thumbnail, complete learning details, action below. */
.classor-content-carousel--compact .course-openner-link-box-shkrn { display:grid; grid-template-columns:minmax(0,32%) minmax(0,1fr); align-items:stretch; }
.classor-content-carousel--compact .course-openner-link-box-shkrn > img { block-size:100%; min-block-size:100%; aspect-ratio:auto; object-fit:cover; }
.classor-content-carousel--compact .classor-carousel-card-body { padding:var(--classor-carousel-padding); }
.classor-content-carousel--compact .classor-carousel-card > :is(.button,.btn-more-course-shkrn,.jaygah-reference-button) { margin-block-start:var(--jds-space-2); }
.classor-content-carousel--compact .course-item-row-detail { flex-direction:row; align-items:center; }
@media(max-width:599px) {
    .classor-content-carousel { --classor-carousel-padding:var(--jds-space-4); }
    .classor-content-carousel .posts-section-header > * { max-inline-size:100%; }
    .classor-content-carousel .more-button-section-shkrn { min-block-size:var(--jds-touch-target); }
    .classor-content-carousel--digest .classor-carousel-card-link { grid-template-columns:minmax(0,30%) minmax(0,1fr); }
    .classor-content-carousel--compact .course-openner-link-box-shkrn { grid-template-columns:minmax(0,28%) minmax(0,1fr); }
    .classor-content-carousel--compact .classor-carousel-card-body { gap:var(--jds-space-2); }
    .classor-content-carousel--compact .course-item-row-detail { flex-direction:column; align-items:flex-start; }
    .classor-content-carousel--compact .classor-carousel-card-body .price { margin-inline:0; }
}
@media(prefers-reduced-motion:reduce) { .classor-content-carousel .classor-carousel-card { transition:none; } }
body.jaygah-reduced-motion .classor-content-carousel .classor-carousel-card { transition:none; }

/* Navigation gets its own row; 44px pagination targets do not cover card content. */
.classor-content-carousel .classor-carousel-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--jds-space-2);padding-block-start:var(--jds-space-5)}
.classor-content-carousel .classor-carousel-controls :is(.swiper-button-prev,.swiper-button-next){position:static;inset:auto;flex:0 0 var(--jds-touch-target);margin:0;transform:none}
.classor-content-carousel .classor-carousel-controls .swiper-pagination{position:static;inline-size:auto;max-inline-size:100%;display:flex;flex-wrap:wrap;justify-content:center}
.classor-content-carousel .classor-carousel-controls .swiper-pagination-bullet{inline-size:var(--jds-touch-target);block-size:var(--jds-touch-target);display:grid;place-items:center;background:transparent;opacity:1;margin:0;border-radius:var(--jds-radius-control)}
.classor-content-carousel .classor-carousel-controls .swiper-pagination-bullet::before{content:"";inline-size:var(--jds-space-2);block-size:var(--jds-space-2);border-radius:var(--jds-radius-pill);background:var(--jds-color-control-border)}
.classor-content-carousel .classor-carousel-controls .swiper-pagination-bullet-active::before{inline-size:var(--jds-space-5);background:var(--jds-color-accent-text)}

/* Keep long story copy readable even when the chosen cover is completely white. */
.classor-content-carousel--story .classor-carousel-card-body,.classor-content-carousel--cinematic .classor-carousel-card-body{background:linear-gradient(180deg,color-mix(in srgb,var(--classor-carousel-overlay-surface) 92%,transparent),var(--classor-carousel-overlay-surface))}
