/* ═══════════════════════════════════════════
   Marketing Labor – Eseménynaptár
   CSS változók az admin beállításokból
   jönnek inline style-ban a .ml-cal elemen
═══════════════════════════════════════════ */

.ml-cal {
    font-family: var(--ml-font, inherit);
    font-size:   var(--ml-font-size, 15px);
    color:       var(--ml-text, #fff);
    max-width: 900px;
    margin: 0 auto;
}
.ml-cal *, .ml-cal *::before, .ml-cal *::after { box-sizing: border-box; }

/* ── Lista ── */
.ml-cal__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--ml-columns, 2), minmax(0,1fr));
    gap: 12px;
}
.ml-cal__empty {
    text-align: center;
    padding: 2rem;
    color: var(--ml-muted);
    font-size: .9em;
}

/* ── Kártya ── */
.ml-cal__card {
    width: 100%;
    white-space: normal;
    background: var(--ml-card-bg);
    border: 1.5px solid var(--ml-card-border);
    border-radius: 16px;
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: var(--ml-text);
    border-left: 4px solid var(--ev-color, var(--ml-accent));
}
.ml-cal__card:hover {
    border-color: var(--ev-color, var(--ml-accent));
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35);
    transform: translateY(-1px);
}

/* ── Dátumdoboz ── */
.ml-cal__date {
    flex-shrink: 0;
    width: 64px;
    min-height: 72px;
    background: var(--ml-date-bg);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    gap: 2px;
}
.ml-cal__mon {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ml-accent);
    line-height: 1;
}
.ml-cal__day {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--ml-date-text);
}
.ml-cal__day-end {
    font-size: 10px;
    color: var(--ml-muted);
    text-align: center;
    line-height: 1.2;
}

/* ── Szöveges rész ── */
.ml-cal__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ml-cal__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ml-muted);
    flex-wrap: wrap;
}
.ml-cal__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ev-color, var(--ml-accent));
    flex-shrink: 0;
}
.ml-cal__sep { opacity: .5; }
.ml-cal__cat { color: var(--ml-muted); }
.ml-cal__title {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ml-text);
    white-space: normal;
    word-break: break-word;
}
.ml-cal__excerpt {
    font-size: 12px;
    color: var(--ml-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ml-cal__venue {
    font-size: 12px;
    color: var(--ml-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Nyíl ── */
.ml-cal__arrow {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ml-date-bg);
    color: var(--ml-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.ml-cal__card:hover .ml-cal__arrow {
    background: var(--ml-accent);
    color: var(--ml-modal-bg, #fff);
}

/* ── Modal overlay ── */
.ml-cal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}
.ml-cal__overlay[hidden] { display: none; }

/* ── Modal doboz ── */
.ml-cal__modal {
    background: var(--ml-modal-bg);
    border: 1px solid var(--ml-modal-border);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
    color: var(--ml-modal-text);
}
.ml-cal__modal-accent {
    height: 5px;
    border-radius: 18px 18px 0 0;
    background: var(--ml-accent);
}
.ml-cal__close {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(128,128,128,.15);
    border: none;
    border-radius: 50%;
    width: 30px; height: 30px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ml-modal-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s;
}
.ml-cal__close:hover { background: rgba(128,128,128,.3); }

.ml-cal__modal-img-wrap { line-height: 0; }
.ml-cal__modal-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.ml-cal__modal-body { padding: 16px 20px 20px; }
.ml-cal__modal-meta { margin-bottom: 10px; }
.ml-cal__modal-row {
    font-size: 13px;
    color: var(--ml-muted);
    line-height: 1.6;
}
.ml-cal__modal-title {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ml-modal-text);
    margin: 0 0 10px;
}
.ml-cal__modal-excerpt {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ml-modal-text);
    margin-bottom: 14px;
    border-top: 1px solid var(--ml-modal-border);
    padding-top: 12px;
}
.ml-cal__modal-excerpt[hidden] { display: none; }
.ml-cal__modal-excerpt p { margin: 0 0 .75em; }
.ml-cal__modal-excerpt p:last-child { margin-bottom: 0; }
.ml-cal__modal-excerpt ul, .ml-cal__modal-excerpt ol { margin: 0 0 .75em; padding-left: 1.4em; }
.ml-cal__modal-excerpt li { margin-bottom: .25em; }
.ml-cal__modal-excerpt strong { font-weight: 700; }
.ml-cal__modal-excerpt em { font-style: italic; }
.ml-cal__modal-excerpt a { color: var(--ml-accent); }
.ml-cal__modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ml-cal__btn {
    font-size: 13px;
    font-family: inherit;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--ml-modal-border);
    background: rgba(128,128,128,.1);
    color: var(--ml-modal-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s;
    white-space: nowrap;
}
.ml-cal__btn:hover { background: rgba(128,128,128,.25); }
.ml-cal__btn--map    { background: rgba(46,125,50,.2);    border-color: rgba(100,200,100,.3); color: #6dd08e; }
.ml-cal__btn--map:hover  { background: rgba(46,125,50,.35); }
.ml-cal__btn--tel    { background: rgba(230,120,30,.2);   border-color: rgba(255,160,60,.3);  color: #ffb74d; }
.ml-cal__btn--tel:hover  { background: rgba(230,120,30,.35); }
.ml-cal__btn--ticket { background: rgba(245,158,11,.18);  border-color: rgba(255,200,80,.3);  color: #ffd54f; }
.ml-cal__btn--ticket:hover { background: rgba(245,158,11,.32); }
.ml-cal__btn--fb     { background: rgba(24,119,242,.18);  border-color: rgba(80,150,255,.3);  color: #82b1ff; }
.ml-cal__btn--fb:hover   { background: rgba(24,119,242,.32); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ml-cal__list { grid-template-columns: 1fr; gap: 8px; }
    .ml-cal__card { padding: 10px 10px 10px 12px; gap: 10px; }
    .ml-cal__date { width: 52px; min-height: 58px; border-radius: 10px; }
    .ml-cal__day  { font-size: 22px; }
    .ml-cal__mon  { font-size: 10px; }
    .ml-cal__arrow { width: 30px; height: 30px; border-radius: 8px; }
    .ml-cal__title { font-size: .95em; }
}

@media (prefers-reduced-motion: reduce) {
    .ml-cal__card, .ml-cal__arrow { transition: none; }
    .ml-cal__card:hover { transform: none; }
}