/*Path of this file: \wp-content\plugins\coursemap-main\assets\course-grid-styles.css*/
/* Layout & heading */
.ft-cpt-cards{position:relative;margin:0}
.ft-cpt-cards__heading{margin:80px 0px 20px 0px; text-align: center;}

/* Track */
.ft-carousel__track{overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.ft-carousel__track::-webkit-scrollbar{display:none}

/* Horizontal list */
.ft-carousel__list{margin:0 !important;padding:0 !important;display:flex;gap:10px;align-items:stretch}
.ft-carousel__list > .ld_course_grid{flex:0 0 auto;width:200px;max-width:200px;scroll-snap-align:start;padding:0;float:none}

/* Round prev/next buttons with larger icons */
.ft-carousel__btn{position:absolute;top:60%;transform:translateY(-50%);width:41px;height:41px;border-radius:9999px;border:0;background:#00000069;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;z-index:2;transition:0.3s ease-in-out}
.ft-carousel__btn:hover{cursor:pointer}
.ft-carousel__btn--prev{left:-20px}
.ft-carousel__btn--next{right:-20px}
.ft-carousel__btn .ft-icon{ width:20px; height:20px; flex:0 0 auto; display:block }
.ft-carousel__btn .ft-icon path{ stroke-width:2.25 }

@media (max-width:820px){
    .ft-carousel__btn{width:48px;height:48px}
    .ft-carousel__btn .ft-icon{width:26px !important;height:26px !important}
    .ft-carousel__btn--prev{left:-15px}
    .ft-carousel__btn--next{right:-15px}
}

/* ---------- Course Grid in carousel context ---------- */
/* Card width is viewport-relative (vw), NOT container-relative. When the
   global flyout docks and adds padding to the content container, the cards
   keep their size and simply overflow into the horizontally-scrollable
   track — the last card is pushed right instead of every card shrinking
   on the left. */
.ft-carousel__track .ld-course-list-items .ld_course_grid {
    flex: 0 0 30vw;
}
@media only screen and (max-width: 1200px) {
    .ft-carousel__track .ld-course-list-items .ld_course_grid { flex: 0 0 44vw; }
}
@media only screen and (max-width: 820px) {
    .ft-carousel__track .ld-course-list-items .ld_course_grid { flex: 0 0 86vw; }
}

/* ---------- Grid Modal — "cards" list variant (course/lesson cards) ----------
   Used only by this plugin's Course Map "See all" modals (item.php's own
   modal is the "categories" variant which lives in the theme). When this
   plugin is disabled none of these classes appear in the DOM. */
/* Fixed column counts: ≥1201px → 3, 821–1200px → 2, ≤820px → 1. Cards in
   the same row stretch to the tallest card's height so titles, categories
   and Read buttons line up; the flex chain (.ld_course_grid → article →
   .caption all flex columns with flex:1 1 auto) makes the caption fill
   the article and anchors the Read button to the bottom. */
/* Shared cards-grid layout: the See-all modal "cards" list AND the
   Course Map grid view (.ldcm-grid in modules/grid-view.php) use the
   same 1 / 2 / 3 column responsive grid with identical gaps. Defined
   once here so the rule has a single source. */
.ft-grid-modal__list-inner.ft-grid-modal__list--cards,
.ldcm-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 24px;
    align-items: stretch;
}
@media only screen and (min-width: 821px) {
    .ft-grid-modal__list-inner.ft-grid-modal__list--cards,
    .ldcm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (min-width: 1201px) {
    .ft-grid-modal__list-inner.ft-grid-modal__list--cards,
    .ldcm-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ft-grid-modal__list--cards .ld_course_grid {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    overflow: hidden;
    border: 1px solid #e2e7ed;
    border-radius: 5px;
    background: #fff;
}
/* Override the global `body .ld-course-list-items …` rule that hard-codes
   height:100% on article + caption. In a flex column with siblings, that
   percentage height collapses caption to near-zero in some browsers and
   hides the categories + Read button. Replace with flex sizing. */
.ft-grid-modal__list--cards .ld_course_grid > article.thumbnail.course {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    width: 100% !important;
}
.ft-grid-modal__list--cards .ld_course_grid > article.thumbnail.course > .caption {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    justify-content: space-between !important;
    padding: 12px !important;
}
.ft-grid-modal__list--cards .ld_course_grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px 5px 0 0;
}
/* In-modal cards inherit the universal .course-categories layout
   (nowrap + mask-fade clip + persistent per-card "See all" trigger from
   learndash-overrides.css) — no overrides here. The per-card "See all"
   link now drills into the per-card categories modal even from inside
   the coursemap's See-all modal. */

/* Fallback list rendering for when LD course-grid constants aren't
   available — ft_grid_modal_render_course_cards() emits a plain link
   list inside .ft-grid-modal__fallback-list. */
.ft-grid-modal__item {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 0.95em;
    color: #333;
}
.ft-grid-modal__fallback-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media only screen and (max-width: 820px) {
    .ft-grid-modal__list-inner.ft-grid-modal__list--cards {
        column-gap: 16px;
        row-gap: 16px;
    }
}