/* ==========================================================================
   prop_list — Style de carte : medium_card
   Carte verticale avec dates, état d'inscription, titre, extrait, lieu,
   catégorie et photo principale à bords arrondis.
   Les états actif/inactif sont gérés par medium_card.js.
   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 --- */
/* --- plc pour proposition medium card --- */

/* --- Variables — thème base --- */
.prop-card.medium_card {
    --plc-bg:          #ffffff;
    --plc-bg-active:   var(--almost-white-for-base);
    --plc-radius:      12px;
    --plc-shadow:      rgba(0, 0, 0, 0.08);
    --plc-date-color:     var(--dark-grey-for-base);
    --plc-title-color:    var(--dark-grey-for-base);
    --plc-excerpt-color:  var(--dark-grey-for-base);
    --plc-place-color:    var(--dark-grey-for-base);
    --plc-cat-color:      var(--dark-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 */
.prop-card.medium_card:hover,
.prop-card.medium_card.active {
    --plc-bg:       var(--almost-white-for-base);
}

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

/* --- Variables — variation 14-18 --- */
main[class*="14-18"] .prop-card.medium_card {
    --plc-bg:        var(--yellow-for-14-18);
}
/* Carte active */
main[class*="14-18"] .prop-card.medium_card:hover,
main[class*="14-18"] .prop-card.medium_card.active {
    --plc-bg: var(--red-for-14-18);
    --plc-title-color: #ffffff;
    --plc-excerpt-color:  #ffffff;
    --plc-place-color:  var(--almost-white-for-14-18);
    --plc-cat-color:  var(--almost-white-for-14-18);
}

/* --- Structure de la carte --- */
.prop-card.medium_card {
    width: 255px;
    height: 420px;
    padding: 20px 20px 35px 20px;
    background-color: var(--plc-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: 0;
    flex-shrink: 0;
    position: relative;

}

/* --- En-tête : dates + icône d'état --- */
/* min-height = hauteur du bloc dates (day + month) pour aligner les cartes avec et sans dates */
.prop-card.medium_card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
 }

/* Bloc dates */
.prop-card.medium_card .card-dates {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.prop-card.medium_card .card-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 22px;
}

.prop-card.medium_card .card-day {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--global--font-primary);
    line-height: 1;
    color: var(--plc-date-color);
}

.prop-card.medium_card .card-month {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--plc-date-color);
    font-family: var(--global--font-primary);
    line-height: 1.4;
}

/* Séparateur vertical entre les deux dates */
.prop-card.medium_card .card-date-sep {
    width: 1px;
    align-self: stretch;
    background-color: var(--plc-date-color);
    margin: 2px 0;
}

.prop-card.medium_card .card-year {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--plc-date-color);
    font-family: var(--global--font-primary);
    line-height: 1.4;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Icône d'état des inscriptions */
.prop-card.medium_card .card-status {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.prop-card.medium_card .card-status--open     { color: #27ae60; }
.prop-card.medium_card .card-status--preinscr { color: #e67e22; }
.prop-card.medium_card .card-status--waiting  { color: #7f8c8d; }
.prop-card.medium_card .card-status--closed   { color: #e74c3c; }
.prop-card.medium_card .card-status--free     { color: #27ae60; }
.prop-card.medium_card .card-status--passed   { color: #707070; }

/* --- Titre : max 2 lignes, hauteur fixe pour aligner les cartes entre elles --- */
.prop-card.medium_card .card-title {
    height: 64px;
    padding: 0;
    margin: 8px 0 0 0;
    height: 72px;
    color: var(--clc-title-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

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

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

/* --- Extrait : max 3 lignes, hauteur fixe pour aligner les cartes entre elles --- */
.prop-card.medium_card .card-excerpt {
    font-size: var(--font-size-desktop-body-sm);
    line-height: var(--line-height-desktop-body-sm);
    height: 270px;
    padding: 0;
    margin: 0;
    color: var(--plc-excerpt-color);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

/* --- Lieu : hauteur fixe pour aligner les cartes entre elles (spacer invisible si absent) --- */
.prop-card.medium_card .card-place {
    margin: 12px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0;
    height: 72px;
    overflow: hidden;
    color: var(--plc-place-color);
    transition: color 0.25s ease;
}

.prop-card.medium_card .card-place > i {
    font-size: 18px;
    flex-shrink: 0;
    padding: 0 0 4px 4px;
}

/* --- Catégorie : hauteur fixe pour aligner les cartes entre elles (spacer invisible si absente) --- */
.prop-card.medium_card .card-category {
    margin: 12px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0;
    height: 72px;
    overflow: hidden;
    color: var(--plc-cat-color);
    transition: color 0.25s ease;
}

.prop-card.medium_card .card-category > i {
    font-size: 18px;
    flex-shrink: 0;
    padding: 0 0 4px 4px;
}

/* --- Image : 16/9 --- */
.prop-card.medium_card .card-image {
    margin: 16px 0 0 0;
    width: 255px;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--global--border-radius);
    background-attachment: scroll;
    flex-shrink: 0;
    align-self: stretch;
}

.prop-card.medium_card .card-image--empty {
    background-color: #eeeeee;
}