/* ==========================================================================
   Style de carte : point_com_card
   Les surcharges par variation de style utilisent la classe ajoutée sur
   <main id="page"> par index.php (ex: main.cana, main[class*="14-18"]).
   ========================================================================== */

/* --- prefixe des variables CSS pour éviter les conflits avec d'autres cartes --- */
/* --- clc pour card small card --- */

/* --- Variables — thème base --- */
.card.point_com_card {
    --clc-bg:             white;
    --clc-title-color:    var(--dark-grey-for-base);
    --clc-subtitle-color: var(--small-grey-for-base);
    --clc-date-color:     var(--small-grey-for-base);
}
/* Carte active (= hover sur desktop, première visible sur mobile) */
/* :hover maintenu comme fallback si JS désactivé ; .active géré par general.js */
.card.point_com_card:hover,
.card.point_com_card.active {
    --clc-bg:       var(--almost-white-for-base);
}

/* --- Variables — variation cana --- */
/* Déplacé dans le plugin ccn-var-cana (blocks/card_list_v2/templates/cards/point_com_card.css) */

/* --- Variables — variation 14-18 --- */
/* Note : le sélecteur [class*="14-18"] est utilisé car un nom de classe
   commençant par un chiffre nécessite un échappement CSS complexe. */
main[class*="14-18"] .card.point_com_card {
    --clc-bg:             var(--yellow-for-14-18, #ffd016);
    --clc-title-color:    #000000;
    --clc-subtitle-color: #000000;
    --clc-date-color:     #000000;
}
/* Carte active */
main[class*="14-18"] .card.point_com_card:hover,
main[class*="14-18"] .card.point_com_card.active {
    --clc-bg:             var(--red-for-14-18);
    --clc-title-color:    #ffffff;
    --clc-subtitle-color: #ffffff;
    --clc-date-color:     #ffffff;
}

/* --- Structure de la carte --- */
.card.point_com_card {
    width: 360px;
    height: 200px;
    padding: 20px 20px 35px 20px;
    background-color: var(--clc-bg);
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
    border-radius: var(--global--border-radius);
    overflow: hidden;
    transition: background-color 0.25s ease;

    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    position: relative;
}
.card.point_com_card:hover {
    box-shadow: none;
}

/* --- Image : 16/9 --- */
.card.point_com_card .card-image {
    margin-top: 100px;
    width: 100%;
    height: auto;
    border-radius: var(--global--border-radius);
    background-attachment: scroll;
    flex-shrink: 0;
    align-self: stretch;
}

.card.point_com_card .card-header i.fa-calendar-alt {
    font-size: 32px;
}

.card.point_com_card a {
    color: var(--clc-title-color);
	text-transform: none;    
    text-align: left;
}

/* Le lien principal couvre toute la carte */
.card.point_com_card a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Card header a deux partie, l'un complèement à gauche, l'autre complèement à droite */
.card.point_com_card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 28px;
}

/* La partie gauche de card header doit être sur une ligne alingé à gauche */
.card.point_com_card .card-header .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}


/* --- Variation 14-18 : carte inactive = moitié de largeur, contenu tronqué à droite --- */
/* La transition inclut width pour que le rétrécissement soit animé. */
main[class*="14-18"] .card.point_com_card {
    transition: width 0.3s ease, background-color 0.25s ease;
}

/* Carte inactive : réduite à la moitié de la largeur normale (432px → 216px). */
main[class*="14-18"] .card.point_com_card.inactive {
    width: calc(var(--clc-width) / 2);
}

/* Le lien intérieur conserve la largeur pleine (432px) ;
   overflow:hidden sur la carte coupe la moitié droite. */
main[class*="14-18"] .card.point_com_card.inactive > a {
    width: var(--clc-width);
}