/* Featured Event — kabdalis2 design system.
   view.js adds .fev to wrapper at runtime + .b-fevent to each
   .featured-event-item. The theme .b-fevent pattern uses .b-fevent__*
   children; this widget emits its own .event-* structure, so the layout
   is wired here (image | content row) using the same tokens as .b-fevent. */

.fev{ display:flex; flex-direction:column; gap:16px; }

/* The item is a bordered card; .event-header is the image|content row.
   (Override the theme .b-fevent 2-col grid, which expects .b-fevent__*
   children this widget doesn't emit.) */
.fev .featured-event-item.b-fevent{ display:block; }
.fev .event-header{
    display:grid; grid-template-columns:1.1fr 1fr;
    gap:0; align-items:stretch;
}
.fev .featured-event-item:not(:has(.event-image-wrapper)) .event-header{
    grid-template-columns:1fr;
}
@media (max-width:540px){
    .fev .event-header{ grid-template-columns:1fr; }
}

.fev .event-image-wrapper{ overflow:hidden; background:var(--surface2); }
.fev .event-image{
    display:block; width:100%; height:100%; min-height:200px;
    object-fit:cover;
}

.fev .event-content{
    padding:22px; display:flex; flex-direction:column; gap:11px;
    justify-content:center;
}
.fev .event-title{
    font-family:var(--font-display); font-weight:var(--display-w);
    letter-spacing:var(--display-ls);
    font-size:1.4rem; line-height:1.15; margin:0; color:var(--ink);
}
.fev .event-subtitle{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:.72rem;
    text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
    margin-top:-2px;
}
.fev .event-description{
    color:var(--ink-soft); line-height:1.6; font-size:.92rem;
}
.fev .event-description p{ margin:0; }

.fev__actions{
    display:flex; gap:9px; margin-top:4px;
}
.fev .featured-event-placeholder{
    padding:36px 24px; text-align:center;
    border:1px dashed var(--line); border-radius:var(--radius);
    background:var(--surface);
    color:var(--ink-soft); font-size:.92rem;
}

/* Loading / error state messages. */
.fev .loading-message{
    padding:24px; text-align:center; color:var(--muted);
    font-style:italic; font-size:.92rem;
}
.fev .error-message{
    padding:11px 14px; border-radius:var(--radius-sm);
    background:var(--no-bg); color:var(--no); font-size:.9rem; line-height:1.45;
}