/**
 * @file
 * Page liste certifications — cartes alignées sur le bloc « Popular certifications » (accueil).
 */

/* -------------------------------------------------------------------------- */
/* Variables (même palette que .view-certs-by-category)                       */
/* -------------------------------------------------------------------------- */
.certification-list.item-list ul {
    margin: 0;
    padding: 0;
}

.certification-list {
    --cp-certs-accent: #1a3b66;
    --cp-certs-accent-hover: #153052;
    --cp-certs-border: #d8dde4;
    --cp-certs-muted: #6b6f76;
    --cp-certs-card-radius: 12px;
    --cp-certs-card-stack: 0.5rem;
    --cp-certs-card-stack-relaxed: 0.75rem;
    --cp-certs-sim-bg: #8d83a0;
    --cp-certs-sim-bg-hover: #7a708c;
    --cp-certs-sim-border: #a09baa;
}

/* -------------------------------------------------------------------------- */
/* En-tête de vue                                                             */
/* -------------------------------------------------------------------------- */
.certification-list .view-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 32px;
}

.certification-list .view-header h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px;
}

.certification-list .view-header h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 12px auto 0;
    background: #2b62f5;
    border-radius: 2px;
}

.certification-list .view-header p {
    color: #6b6f76;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Grille Bootstrap : éviter marges négatives qui cassent l’alignement         */
/* -------------------------------------------------------------------------- */
.certification-list .course-list.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-left: 0;
    margin-right: 0;
}

.certification-list .course-list>li.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    list-style: none;
    /* border: 1px solid var(--cp-certs-border);
  border-radius: var(--cp-certs-card-radius); */
    background: #fff;
    /* box-shadow: 0 1px 3px rgba(26, 59, 102, 0.06); */
    overflow: hidden;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    outline: 1px solid #d8dde4;
    outline-offset: -9px;
    margin-bottom: 25px;
    min-height: 413px;
}

.certification-list .course-list>li.course-card:hover {
    /* box-shadow: 0 8px 24px rgba(26, 59, 102, 0.12); */
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------- */
/* Image + pilules (injectées par certification-list-cards.js)                */
/* -------------------------------------------------------------------------- */
.certification-list .views-field-field-image {
    margin: 0;
    line-height: 0;
    background: #f4f6f9;
    flex-shrink: 0;
}

.certification-list .views-field-field-image .field-content {
    display: block;
    position: relative;
}

.certification-list .course-image img,
.certification-list .views-field-field-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.certification-list .cp-cert-card__media-tags {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.35rem 0.5rem;
    pointer-events: none;
    line-height: 1.2;
}

.certification-list .cp-cert-card__tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1a2433;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(26, 59, 102, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
}

/* -------------------------------------------------------------------------- */
/* Corps carte (champ Custom / nothing)                                       */
/* -------------------------------------------------------------------------- */
.certification-list .course-card .views-field-nothing {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.certification-list .course-content {
    padding: var(--cp-certs-card-stack-relaxed) 1rem var(--cp-certs-card-stack);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.certification-list .course-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #111;
    line-height: 1.35;
    min-height: 50px;
}

.certification-list .course-title a {
    color: inherit;
    text-decoration: none;
}

.certification-list .course-title a:hover {
    color: var(--cp-certs-accent);
}

.certification-list .course-langue {
    padding: var(--cp-certs-card-stack) 0 0;
    margin: 0;
}

.certification-list .course-langue .list-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.certification-list .course-langue .list-group-item {
    display: inline-block;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1a2433;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(26, 59, 102, 0.12) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 8px !important;
}

.certification-list .course-author {
    color: var(--cp-certs-muted);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: var(--cp-certs-card-stack-relaxed) 0 0;
    min-height: 50px;
}

.certification-list .course-footer {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Prix (hors pied injecté : marges par défaut)                              */
/* -------------------------------------------------------------------------- */
.certification-list .views-field-price__number {
    padding: var(--cp-certs-card-stack-relaxed) 1rem 0.125rem;
    margin: 0;
    margin-top: auto;
}

.certification-list .views-field-price__number:has(> .field-content:empty) {
    display: none;
    margin: 0;
    padding: 0;
}

.certification-list .views-field-price__number .field-content {
    font-weight: 600;
    color: var(--cp-certs-accent);
    font-size: 0.9375rem;
}

.certification-list .views-field-variations-target-id:has(> .field-content:empty) {
    display: none;
    margin: 0;
    padding: 0;
}

.certification-list .views-field-variations-target-id .field-content:empty {
    display: none;
}

/* Commerce : styles par défaut sur la liste (pleine largeur hors footer)    */
.certification-list .commerce-order-item-add-to-cart-form {
    margin: 0;
}

.certification-list .commerce-order-item-add-to-cart-form .form-actions {
    margin: 0;
    padding: 0;
}

.certification-list .commerce-order-item-add-to-cart-form .button,
.certification-list .commerce-order-item-add-to-cart-form .btn,
.certification-list .commerce-order-item-add-to-cart-form input[type="submit"],
.certification-list .commerce-order-item-add-to-cart-form button[type="submit"] {
    width: 100%;
    display: block;
    box-sizing: border-box;
    background: #525084 !important;
    color: #fff !important;
    border: 1px solid var(--cp-certs-accent) !important;
    border-radius: 8px;
    font-weight: 600;
    padding: 6px 12px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 23px;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.certification-list .commerce-order-item-add-to-cart-form .button:hover,
.certification-list .commerce-order-item-add-to-cart-form .btn:hover,
.certification-list .commerce-order-item-add-to-cart-form input[type="submit"]:hover,
.certification-list .commerce-order-item-add-to-cart-form button[type="submit"]:hover {
    background: #f4f7fb !important;
    color: var(--cp-certs-accent-hover) !important;
    border-color: var(--cp-certs-accent-hover) !important;
}

.certification-list .commerce-order-item-add-to-cart-form .cp-commerce-purchased,
.certification-list .commerce-order-item-add-to-cart-form span.button[role="status"] {
    width: 100%;
    display: block;
    box-sizing: border-box;
    background: #eef2f7 !important;
    color: #4a5568 !important;
    border: 1px solid var(--cp-certs-border) !important;
    border-radius: 8px;
    font-weight: 600;
    padding: 6px 12px;
    text-align: center;
    cursor: default;
    font-size: 0.8125rem;
    line-height: 23px;
}

.certification-list .commerce-order-item-add-to-cart-form .field--name-purchased-entity {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Pied de carte (injecté par JS) : prix | simulateur + Commerce              */
/* -------------------------------------------------------------------------- */
.certification-list .cp-cert-card__footer-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 15px 10px;
    margin: 0;
    margin-top: auto;
}

.certification-list .cp-cert-card__footer-row--no-price {
    justify-content: flex-end;
}

.certification-list .cp-cert-card__footer-row .views-field-price__number {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

.certification-list .cp-cert-card__footer-row__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.certification-list .cp-cert-card__footer-row__actions .views-field-variations-target-id,
.certification-list .cp-cert-card__footer-row__actions .views-field-field-demo-simulator {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

.certification-list .cp-cert-card__footer-row__actions .views-field-variations-target-id {
    flex: 0 1 auto;
    max-width: 100%;
}

.certification-list .cp-cert-card__footer-row__actions .views-field-field-demo-simulator {
    flex: 0 0 auto;
}

.certification-list .cp-cert-card__footer-row__actions .views-field-variations-target-id .field-content,
.certification-list .cp-cert-card__footer-row__actions .views-field-field-demo-simulator .field-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
}

.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    min-width: 0;
}

.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form .form-actions.mb-3 {
    margin-bottom: 0 !important;
}

.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form .button,
.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form .btn,
.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form input[type="submit"],
.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form button[type="submit"] {
    width: auto !important;
    display: inline-block !important;
    white-space: nowrap;
}

.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form .cp-commerce-purchased,
.certification-list .cp-cert-card__footer-row__actions .commerce-order-item-add-to-cart-form span.button[role="status"] {
    width: auto !important;
    display: inline-block !important;
    max-width: 100%;
    white-space: nowrap;
}

.certification-list .views-field-field-demo-simulator a:empty {
    display: none;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 36px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
    border-radius: 6px;
    color: #fff !important;
    background: var(--cp-certs-sim-bg) !important;
    border: 1px solid var(--cp-certs-sim-border) !important;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon .cp-cert-card__btn-simulator__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon .cp-cert-card__btn-simulator__glyph svg {
    display: block;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon .cp-cert-card__btn-simulator__tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    color: #fff;
    background: var(--cp-certs-sim-bg);
    box-shadow: 0 2px 8px rgba(72, 62, 96, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.12s ease,
        visibility 0.12s ease;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon .cp-cert-card__btn-simulator__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--cp-certs-sim-bg);
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon:hover,
.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon:focus-visible {
    background: var(--cp-certs-sim-bg-hover) !important;
    border-color: var(--cp-certs-sim-bg-hover) !important;
    box-shadow: 0 2px 6px rgba(72, 62, 96, 0.25);
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon:hover .cp-cert-card__btn-simulator__tip,
.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon:focus-visible .cp-cert-card__btn-simulator__tip {
    opacity: 1;
    visibility: visible;
}

.certification-list .views-field-field-demo-simulator a.cp-cert-card__btn-simulator--icon:focus-visible {
    outline: 2px solid var(--cp-certs-sim-bg);
    outline-offset: 2px;
}