/* ==========================================================================
   Contest cards — clean + unified stylesheet
   - Rounded cards + shadow + vertical spacing
   - Uniform main image (16/9, cover)
   - Types (chips), Gift tags (no bullets)
   - One single "deadline box" (deadline + countdown)
   - Organizer line: "Organisé par :" + logo OR name (not both)
   - Actions aligned to the right
   - Archived mode: grayscale media + diagonal "Clôturé" ribbon
   ========================================================================== */

/* --- Card container --- */
.contest-card {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow: hidden;                          /* round media corners */
    margin: 0 0 var(--card-vspace, 1.25rem);   /* vertical spacing between cards */
}

/* --- Main media (uniform aspect) --- */
.contest-card .card-media {
    position: relative;                        /* for ribbon positioning */
    display: block;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
}
.contest-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- Archived: grayscale + ribbon --- */
.contest-card--archived .card-media img {
    filter: grayscale(100%);
    opacity: .9;
    position: relative;
    z-index: 1;
}

/* Diagonal "Clôturé" ribbon */
.ribbon {
    /* width scales with card width, but stays inside */
    --rb-w: clamp(130px, 38%, 220px);
    position: absolute;
    top: 90px;
    left: -35px;                   /* <-- plus de translate négatif */
    width: var(--rb-w);
    transform: rotate(-35deg);    /* diagonale visible sans sortir du cadre */
    transform-origin: left top;
    padding: .35rem .75rem;
    text-align: center;
    font-size: var(--fs-12, 0.75rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ribbon-closed-bg, #D32F2F);
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    z-index: 3;                   /* au-dessus de l'image */
    pointer-events: none;
    user-select: none;
}
.ribbon--closed { /* alias to customize if needed */ }

/* --- Body spacing --- */
.contest-card .card-body { padding: 1rem; }
.contest-card .card-title { margin: 0 0 .25rem; line-height: 1.25; }
.contest-card .card-excerpt { margin: .25rem 0 .5rem; }

/* Subtitles inside cards */
.card-subtitle {
    margin: .75rem 0 .25rem;
    font-size: var(--fs-14, .875rem);
    font-weight: 700;
    color: #111;
}

/* --- Contest types (chips with small images) --- */
.contest-types {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .25rem 0 1rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 999px;
    font-size: var(--fs-12, 0.75rem);
    background: var(--color-surface, #FFFFFF);
}
.chip-icon {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
    display: inline-block;
}

/* --- Gift tags (no bullets; color managed inline if you want) --- */
.gift-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0 .75rem;
}
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #E5E7EB);
    background: #F3F4F6;               /* can be overridden inline: style="background-color: ..." */
    color: #111;                        /* readable default */
    font-size: var(--fs-12, 0.75rem);
    line-height: 1;
}

/* --- Prizes list --- */
.prize-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2, .5rem) 0 var(--space-4, 1rem);
    display: grid;
    gap: .25rem;
}
.prize-label { margin-right: .4rem; }
.prize-value { font-weight: 700; }
.prize-more { color: var(--color-muted, #6B7280); font-size: var(--fs-14, .875rem); }

/* --- Meta block (deadline + countdown in a single box, organizer below) --- */
.card-meta { list-style: none; padding-left: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.card-meta .meta-row { display: flex; align-items: center; gap: .5rem; }

.meta-stack { display: grid; gap: .5rem; margin: .5rem 0 0; }

/* One single box that contains both lines */
.deadline-box {
    display: grid;
    gap: .35rem;
    padding: .5rem .75rem;
    border: 1px solid var(--deadline-border, rgba(255,213,79,.50));
    background: var(--deadline-bg, rgba(255,213,79,.18));
    color: var(--deadline-fg, #7A5900);
    border-radius: 12px;
    font-weight: 700;
}
.deadline-line {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.deadline-line i { color: var(--deadline-fg, #7A5900); }

/* Organizer line (label + logo OR name) */
.meta-row {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-muted, #6B7280);
    font-size: var(--fs-14, .875rem);
}
.org-line { align-items: center; }
.org-label { color: var(--color-muted, #6B7280); }
.org-banner {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.org-banner:hover .org-name { text-decoration: underline; }
.org-banner-img {
    width: 88px;
    height: 24px;
    object-fit: contain;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 4px;
}
.org-name { font-weight: 600; }

/* --- Actions (right-aligned, spaced from meta) --- */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, .75rem);
}
.card-actions--right {
    justify-content: flex-end;
    margin-top: var(--space-4, 1rem);
}
/* --- Breadcrumb--- */
.breadcrumb { margin: 1rem 0; font-size: .9rem; color: #6b7280; }
.breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb-item { display: inline-flex; align-items: center; gap: .25rem; color: #374151; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; margin: 0 .35rem; color: #9CA3AF; }
.breadcrumb-item a { color: inherit; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.is-current { color: #111827; font-weight: 600; }
.breadcrumb-item.is-current [itemprop="name"] {
    max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 768px) {
    .breadcrumb-item.is-current [itemprop="name"] { max-width: 40vw; }
}