/* Upcoming Events — kabdalis2 design system.
   .kabdalis-upcoming-events is the JS-locked wrapper. view.js adds .upe at
   runtime (no .b-card frame per alias-registry — events use their own
   image/content composition, not the card surface). CSS targets the actual
   view.js-generated DOM (.upcoming-event-item, .event-header, .event-image-wrapper,
   .event-content, .event-title, .event-subtitle, .event-subtitle-row,
   .event-read-more, .event-expand-icon, .event-details, .event-description). */

.kabdalis-upcoming-events.upe,
.kabdalis-upcoming-events{ width: 100%; margin: 0; }

.upcoming-events-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Month picker + (optional) head */
.upe__head{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}
.upe__title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 2px 0 0;
    color: var(--ink);
}

.events-month-picker{ display: inline-flex; align-items: center; gap: 8px; }
.month-picker-select{
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
}

/* Loading indicator (view.js injects .loading-message during fetch) */
.upe .loading-message,
.upcoming-events-list > .loading-message{
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: var(--muted);
    font-style: italic;
}

/* Event month header — view.js sprinkles between event groups */
.event-month-header{
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}

/* ── Event list layout (grid for col-layout, stack for row-layout) ─── */

.upcoming-events-list{
    display: grid;
    gap: 20px;
}
/* view.js may set --upe-cols inline based on data-max-columns; default to 1 */
.upcoming-events-list{ grid-template-columns: repeat(var(--upe-cols, 1), minmax(0, 1fr)); }
@media (min-width: 720px){
    .kabdalis-upcoming-events[data-layout="col"][data-max-columns="2"] .upcoming-events-list{ grid-template-columns: repeat(2, 1fr); }
    .kabdalis-upcoming-events[data-layout="col"][data-max-columns="3"] .upcoming-events-list{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
    .upcoming-events-list{ --upe-cols: 1; }
}

/* Row layout stacks vertically (image left, content right per event) */
.kabdalis-upcoming-events[data-layout="row"] .upcoming-events-list,
.kabdalis-upcoming-events[data-layout="list"] .upcoming-events-list{
    grid-template-columns: 1fr;
}

/* ── Event item (collapsible card with image + content + expand) ─── */

.upcoming-event-item{
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
}
.upcoming-event-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--ink) 45%, transparent);
}
.upcoming-event-item[aria-expanded="true"]{ transform: none; }

.event-header{
    display: flex;
    flex-direction: column;
    cursor: default;
}
/* Header is keyboard-interactive only when there's a description */
.event-header[role="button"]{ cursor: pointer; }
.event-header[role="button"]:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── Image (top for col layout, left for row layout) ──────────────── */

.event-image-wrapper{
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg2);
    flex-shrink: 0;
}
.event-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.upcoming-event-item:hover .event-image{ transform: scale(1.04); }

/* Row layout: image on the left */
.kabdalis-upcoming-events[data-layout="row"] .upcoming-event-item,
.kabdalis-upcoming-events[data-layout="list"] .upcoming-event-item{
    flex-direction: row;
    align-items: stretch;
}
.kabdalis-upcoming-events[data-layout="row"] .event-header,
.kabdalis-upcoming-events[data-layout="list"] .event-header{
    flex-direction: row;
    flex: 1;
    align-items: stretch;
}
.kabdalis-upcoming-events[data-layout="row"] .event-image-wrapper,
.kabdalis-upcoming-events[data-layout="list"] .event-image-wrapper{
    width: 160px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

/* ── Content (title + subtitle + read-more) ───────────────────────── */

.event-content{
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.event-title-wrapper{ display: flex; align-items: flex-start; }
.event-title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}

.event-subtitle{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.event-subtitle-row{
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--ink-soft);
    letter-spacing: .02em;
}

.event-read-more{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    padding: 0;
    cursor: inherit;
    align-self: flex-start;
}
.event-read-more-icon{
    font-size: .72rem;
    transition: transform .2s ease;
}
.upcoming-event-item[aria-expanded="true"] .event-read-more-icon{ transform: rotate(90deg); }

/* Expand chevron — positioned at the right edge of the row layout,
   bottom-right for col layout */
.event-expand-icon{
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    transition: transform .2s ease;
    padding: 0 16px;
}
.event-expand-icon i{ font-size: .9rem; }
.upcoming-event-item[aria-expanded="true"] .event-expand-icon{
    transform: rotate(180deg);
    color: var(--accent);
}

.kabdalis-upcoming-events[data-layout="col"] .event-expand-icon{
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--surface2);
}
.kabdalis-upcoming-events[data-layout="col"] .upcoming-event-item{ position: relative; }

/* ── Expanded details panel ───────────────────────────────────────── */

.event-details{
    padding: 0 18px 18px;
    border-top: 1px solid var(--line);
}
.event-details:not([style*="display: none"]){ padding-top: 14px; }
.event-description{
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .92rem;
}
.event-description p:first-child{ margin-top: 0; }
.event-description p:last-child{ margin-bottom: 0; }

/* ── Footer: load-more + calendar-link ────────────────────────────── */

/* Empty / error state — rendered into .upcoming-events-list when API
   returns 0 events or fails. Friendly Swedish copy + calendar-link CTA. */
.upcoming-events-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 24px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border: 1px solid var(--line);
    grid-column: 1 / -1;
}
.upcoming-events-empty-icon{
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 1.4rem;
}
.upcoming-events-empty-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 480px;
}
.upcoming-events-empty-title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}
.upcoming-events-empty-body{
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .92rem;
}
.upcoming-events-empty-link{
    margin-top: 6px;
}

/* Load-more keeps centered alignment (it's a paginate-style action) */
.upcoming-events-load-more{
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.load-more-button{
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .82em 1.25em;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    background: transparent;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.load-more-button:hover{ background: var(--ink); color: var(--bg); }

/* Calendar-link CTA — same .btn.btn--outline style as Snörapport "Pistkarta".
   Left-aligned (not centered) for consistency with the other v2 widget CTAs. */
.upcoming-events-calendar-link-container{
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}
.upcoming-events-calendar-link{
    align-self: flex-start;
}