/* ==============================================
   Cartelera Cultural — Styles publics v2
   Toutes les variables sont overridables
   ============================================== */

:root {
    --cc-color-primary:   #1F364D;
    --cc-color-accent:    #FF4500;
    --cc-color-muted-dark:#67768E;
    --cc-color-free:      #FF4500;
    --cc-color-text:      #1F364D;
    --cc-color-muted:     #67768E;
    --cc-color-border:    #e5e7eb;
    --cc-color-bg:        #ffffff;
    --cc-radius:          12px;
    --cc-shadow:          0 2px 12px rgba(0,0,0,.07);
    --cc-shadow-hover:    0 8px 28px rgba(0,0,0,.13);
    --cc-gap:             24px;
}

/* ── GRID CARTES ─────────────────────────────── */
.cc-grid {
    display: grid;
    gap: var(--cc-gap);
}
.cc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .cc-cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .cc-cols-2, .cc-cols-3 { grid-template-columns: 1fr; } }

/* ── CARTE ───────────────────────────────────── */
body .cc-card {
    background:     var(--cc-color-bg);
    border:         1px solid var(--cc-color-border);
    border-radius:  var(--cc-radius);
    box-shadow:     var(--cc-shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow .2s, transform .2s;
}
body .cc-card:hover {
    box-shadow: var(--cc-shadow-hover);
    transform:  translateY(-3px);
}

body .cc-card__image {
    position:       relative;
    padding-bottom: 56%;
    overflow:       hidden;
    background:     #f3f4f6;
}
body .cc-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .35s;
}
.cc-card:hover body .cc-card__image img { transform: scale(1.04); }

.cc-card__no-image {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.5rem;
    background:      linear-gradient(135deg, #1a1a2e, #2c3e6b);
    opacity:         .6;
}

body .cc-card__body {
    padding:        18px 20px 14px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

body .cc-card__date {
    font-size:      .75rem;
    font-weight:    700;
    color:          var(--cc-color-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin:         0;
}
body .cc-card__title {
    font-size:   1rem;
    font-weight: 700;
    margin:      4px 0 0;
    line-height: 1.3;
    color:       var(--cc-color-text);
}
body .cc-card__title a { color: inherit; text-decoration: none; }
body .cc-card__title a:hover { text-decoration: underline; }

body .cc-card__artist {
    font-size:  .85rem;
    font-style: italic;
    color:      var(--cc-color-muted);
    margin:     2px 0 0;
}
body .cc-card__venue {
    font-size: .8rem;
    color:     var(--cc-color-muted);
    margin:    4px 0 0;
}
body .cc-card__price {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--cc-color-text);
    margin:      6px 0 0;
}
body .cc-card__price--free { color: var(--cc-color-free); }

body .cc-card__excerpt {
    font-size:   .85rem;
    color:       var(--cc-color-muted);
    margin:      6px 0 0;
    line-height: 1.55;
    flex:        1;
}

body .cc-card__footer {
    padding:    0 20px 18px;
}
.cc-btn {
    display:         inline-block;
    padding:         8px 18px;
    background:      var(--cc-color-primary);
    color:           #fff;
    border-radius:   6px;
    font-size:       .875rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background .2s;
}
.cc-btn:hover { background: var(--cc-color-accent); color: #fff; }

/* ── LISTE COMPACTE ──────────────────────────── */
.cc-lista {
    list-style: none;
    margin:     0;
    padding:    0;
}

body .cc-lista__item {
    border-bottom: 1px solid var(--cc-color-border);
}
body .cc-lista__item:last-child { border-bottom: none; }

body .cc-lista__link {
    display:     flex;
    align-items: center;
    flex-wrap:   nowrap;
    gap:         16px;
    padding:     14px 4px;
    text-decoration: none;
    color:       inherit;
    transition:  background .15s;
}
body .cc-lista__link:hover { background: #fafafa; }
body .cc-lista__link:hover body .cc-lista__arrow { opacity: 1; transform: translateX(3px); }

body .cc-lista__cal {
    min-width:       52px;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    line-height:     1;
    color:           var(--cc-color-accent);
    flex-shrink:     0;
}
body .cc-lista__cal { color: var(--cc-color-accent); }
body .cc-lista__cal strong { font-size: 1.4rem; font-weight: 800; }
body .cc-lista__cal span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.cc-lista__cal-range {
    font-size:   .7rem;
    font-weight: 700;
    text-align:  center;
    line-height: 1.4;
    display:     flex;
    flex-direction: column;
    gap:         1px;
}

.cc-lista__info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    justify-content: center;
}
body .cc-lista__title {
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--cc-color-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
body .cc-lista__venue {
    font-size:  .78rem;
    color:      var(--cc-color-muted);
}

body .cc-lista__time {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--cc-color-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

body .cc-lista__arrow {
    color:      var(--cc-color-muted);
    opacity:    .3;
    font-size:  1rem;
    transition: opacity .15s, transform .15s;
    flex-shrink: 0;
}

.cc-no-events { color: var(--cc-color-muted); font-style: italic; }


/* ── HOME : SLIDESHOW + LISTA ────────────────────── */
.cc-home {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 720px) {
    .cc-home { grid-template-columns: 1fr; }
}

/* Slideshow */
.cc-home__slides {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--cc-radius);
    overflow: hidden;
    background: #1F364D;
}

.cc-slide {
    position:   absolute;
    inset:      0;
    display:    block;
    text-decoration: none;
    opacity:    0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.cc-slide--active {
    opacity: 1;
    pointer-events: auto;
}

.cc-slide img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.cc-slide__placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       3rem;
    background:      linear-gradient(135deg, #1F364D 0%, #67768E 100%);
    opacity:         .5;
}

/* Caption overlay */
.cc-slide__caption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    20px 16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    display:    flex;
    flex-direction: column;
    gap:        4px;
}
.cc-slide__title {
    color:       #fff;
    font-size:   .95rem;
    font-weight: 700;
    line-height: 1.3;
}
.cc-slide__date {
    color:       #FF4500;
    font-size:   .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Dots */
.cc-slide__dots {
    position:        absolute;
    bottom:          10px;
    right:           12px;
    display:         flex;
    gap:             5px;
    z-index:         10;
}
.cc-dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    border:       none;
    background:   rgba(255,255,255,.4);
    cursor:       pointer;
    padding:      0;
    transition:   background .2s;
}
.cc-dot--active { background: #FF4500; }

/* Empty state */
.cc-slide__empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;
    color:           rgba(255,255,255,.4);
    text-align:      center;
    gap:             8px;
    font-size:       2rem;
    padding:         20px;
}
.cc-slide__empty p {
    font-size: .8rem;
    line-height: 1.5;
    margin: 0;
}

/* Lista title */
.cc-home__lista-title {
    font-size:      1.1rem;
    font-weight:    800;
    color:          #1F364D;
    margin:         0 0 16px;
    padding-bottom: 10px;
    border-bottom:  2px solid #FF4500;
}

/* Home sans destacados : liste pleine largeur */
.cc-home--full {
    grid-template-columns: 1fr;
}
.cc-home--full .cc-home__lista {
    max-width: 700px;
}


/* ── VER MÁS ─────────────────────────────────── */
.cc-home__ver-mas {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-color-border);
}
.cc-ver-mas-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         10px 20px;
    background:      transparent;
    border:          2px solid #1F364D;
    color:           #1F364D;
    border-radius:   6px;
    font-size:       .875rem;
    font-weight:     700;
    text-decoration: none;
    transition:      all .2s;
}
.cc-ver-mas-btn:hover {
    background: #1F364D;
    color:      #fff;
}

/* ── ARCHIVO POR MES ─────────────────────────── */
.cc-archivo {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

body .cc-archivo__month-title {
    font-size:      1.1rem;
    font-weight:    800;
    color:          #fff;
    background:     #1F364D;
    display:        inline-block;
    padding:        6px 16px;
    border-radius:  4px;
    margin:         0 0 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cc-lista__artist {
    font-size:  .78rem;
    font-style: italic;
    color:      var(--cc-color-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-lista__price {
    font-size:   .78rem;
    font-weight: 600;
    color:       #1F364D;
    white-space: nowrap;
    flex-shrink: 0;
}
.cc-lista__price--free { color: #FF4500; }


/* ── FILTRO ──────────────────────────────────── */
.cc-filtro {
    margin-bottom: 28px;
}
.cc-filtro__form {
    display:        flex;
    align-items:    flex-start;
    gap:            16px;
}
.cc-filtro__icon {
    flex-shrink:  0;
    margin-top:   4px;
    color:        #FF4500;
}
.cc-filtro__rows {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    flex:           1;
}
.cc-filtro__group {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.cc-filtro__label {
    font-size:   .85rem;
    font-weight: 800;
    color:       #FF4500;
    white-space: nowrap;
    min-width:   80px;
}
.cc-filtro__pills {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
}
body .cc-filtro__pill {
    padding:         4px 14px;
    border-radius:   20px;
    font-size:       .8rem;
    font-weight:     500;
    text-decoration: none;
    color:           #FF4500;
    background:      #fff;
    border:          1.5px solid #FF4500;
    transition:      all .15s;
    white-space:     nowrap;
}
body .cc-filtro__pill:hover {
    background: #fff5f0;
    color:      #FF4500;
}
body .cc-filtro__pill--active {
    background:   #FF4500;
    color:        #fff !important;
    border-color: #FF4500;
}
.cc-filtro__pill--catbody .cc-filtro__pill--active {
    background:   #FF4500;
    border-color: #FF4500;
    color:        #fff !important;
}
.cc-filtro__reset {
    margin-top: 2px;
}
.cc-filtro__reset a {
    font-size:       .78rem;
    color:           #FF4500;
    text-decoration: none;
    font-weight:     600;
    opacity:         .7;
}
.cc-filtro__reset a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 600px) {
    .cc-filtro__form   { gap: 10px; }
    .cc-filtro__group  { flex-direction: column; align-items: flex-start; }
    .cc-filtro__label  { min-width: auto; }
}

/* ── BADGE CATÉGORIE ─────────────────────────── */
body .cc-card__cat-badge {
    position:      absolute;
    top:           10px;
    right:         10px;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     .7rem;
    font-weight:   700;
    letter-spacing: .04em;
    background:    #00C49A;
    color:         #fff;
    z-index:       2;
    text-transform: capitalize;
}

/* Badge catégorie dans la lista */
body .cc-lista__cat-badge {
    display:         inline-block;
    padding:         2px 9px;
    border-radius:   20px;
    font-size:       .65rem;
    font-weight:     700;
    letter-spacing:  .05em;
    text-transform:  uppercase;
    background:      #00C49A;
    color:           #fff;
    margin-bottom:   3px;
    flex-shrink:     0;
    align-self:      flex-start;
}