/* ===============================
   Event List Styles
   =============================== */

/* ---------- Filterbar ---------- */
.hie-filters {
  background:#fff;
  padding:1rem;
  margin-bottom:1rem;
  border:1px solid #eef0f3;
  border-radius:var(--hie-radius);
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  overflow:hidden;
}
.hie-filters, .hie-filters * { box-sizing:border-box; }

.hie-filter-row {
  display:grid;
  gap:.7rem .9rem;
  grid-auto-rows:min-content;
  align-items:end;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
}
.hie-filter-row--no-submit {
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.hie-filter-row--with-submit {
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
}

.hie-filter-item { min-width:0; }
.hie-filter-item label {
  display:block;
  font-size:.85rem;
  color:#475569;
  margin:0 0 .4rem;
}
.hie-filter-item input,
.hie-filter-item select {
  display:block;
  width:100%;
  min-height:46px;
  padding:.7rem .85rem;
  border:1px solid #dfe3e7;
  border-radius:var(--hie-radius-sm);
  background:#fff;
  font-size:1rem;
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none;
}
.hie-filter-item input[type="date"]::-webkit-datetime-edit { padding:0; }
.hie-filter-item input::-webkit-calendar-picker-indicator { opacity:.6; }
.hie-filter-item--wide { grid-column:span 2; }

.hie-filter-actions {
  display:grid;
  grid-auto-flow:column;
  gap:.6rem;
  justify-content:start;
  align-items:center;
}
.hie-filter-actions--submit {
  justify-content:stretch;
}
.hie-filter-actions--submit .hie-btn {
  width:100%;
  min-width:220px;
}
.hie-filter-actions .hie-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.6rem 1rem;
  border-radius:var(--hie-radius-sm);
  background:var(--hie-primary);
  color:var(--hie-button-text);
  text-decoration:none;
  border:2px solid var(--hie-primary);
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  transition:all .2s ease-in-out;
}
.hie-filter-actions .hie-btn:hover {
  background:transparent;
  color:var(--hie-primary);
}
.hie-reset {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:transparent;
  border:0;
  padding:0;
  font-size:.85rem;
  color:#64748b;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.hie-reset:hover { color:#475569; }
.hie-reset__icon { font-size:.9rem; line-height:1; }

/* ---------- Filter Toggle (mobile) ---------- */
.hie-filter-toggle {
  display:none;
  align-items:center;
  gap:.5rem;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  padding:.6rem .9rem;
  border-radius:var(--hie-radius-sm);
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.hie-filter-toggle__icon{ display:inline-block; }

/* Collapsible Panel */
.hie-filters.is-collapsible {
  transition:max-height .35s ease, opacity .25s ease, transform .25s ease;
  overflow:hidden;
  max-height:none;
  opacity:1;
  transform:none;
}
@media (max-width:980px){
  .hie-filter-toggle{ display:inline-flex; margin:.5rem 0 1rem; background:transparent!important; color:#000!important; }

  /* closed: fixed spacing */
  .hie-filters.is-collapsible{
    max-height:0; opacity:0; transform:translateY(-4px);
    padding:0; margin:0; border-width:0; box-shadow:none; pointer-events:none;
  }
  /* opened */
  .hie-filters.is-collapsible.is-open{
    max-height:1200px; opacity:1; transform:none;
    padding:1rem; margin-bottom:1rem; border-width:1px; box-shadow:0 6px 24px rgba(0,0,0,.05);
    pointer-events:auto;
  }
}
@media (prefers-reduced-motion:reduce){
  .hie-filters.is-collapsible{ transition:none; }
}

/* ---------- Cards ---------- */
.hie-cards--list { display:grid; gap:1rem; }

.hie-card--row {
  --media-h:220px;
  --excerpt-lines:3;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:1.25rem;
  padding:1.25rem;
  border-radius:var(--hie-radius-lg);
  background:var(--hie-card-bg);
  border:1px solid #eef0f3;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  margin-bottom:1.25rem;
  align-items:center;
}

.hie-card-media-col,
.hie-card-date {
  width:100%;
  height:var(--media-h);
  border-radius:var(--hie-radius);
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.hie-card-media-col img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}

.hie-card-date {
  background:var(--hie-date-bg); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
}
.hie-card-day   { font-size:2.2rem; font-weight:800; line-height:1; }
.hie-card-month { font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; margin-top:.25rem; }
.hie-card-year  { font-size:.95rem; opacity:.85; margin-top:.15rem; }

.hie-card-body { display:grid; gap:.5rem; align-content:start; }
.hie-card-title { font-size:1.28rem; margin:0 0 5px 0; line-height:1.25; }
.hie-card-meta { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.7rem 1rem; color:#475569; font-size:.93rem; }
.hie-meta-row { display:flex; flex-wrap:wrap; gap:.7rem 1rem; margin:0 0 .5rem; color:#475569; font-size:.93rem; }
.hie-meta-item { margin:0; }
.hie-title-link { color:inherit; text-decoration:none; }
.hie-title-link:hover { text-decoration:underline; }

.hie-card-excerpt {
  color:#334155;
  line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--excerpt-lines);
  overflow:hidden;
  margin-bottom: 5px;
}

.hie-card-actions { display:flex; gap:.6rem; align-items:center; }
.hie-card-actions .hie-btn {
  background:transparent; color:var(--hie-primary); border:2px solid var(--hie-primary);
  padding:.35rem 2rem; border-radius:var(--hie-radius-sm); text-decoration:none; font-weight:500; margin-right:10px;
  transition:all .2s ease-in-out;
}
.hie-card-actions .hie-btn:hover { background:var(--hie-primary); color:var(--hie-button-text); }

.hie-badge { background:#eef2ff; color:#3730a3; border-radius:var(--hie-radius-pill); padding:.18rem .55rem; font-size:.78rem; white-space:nowrap; }

.hie-empty {
  padding:1rem; background:#fff; border:1px solid #eef0f3; border-radius:var(--hie-radius-md);
  box-shadow:0 6px 24px rgba(0,0,0,.05);
}

/* ---------- Pagination ---------- */
.hie-pagination { display:flex; align-items:center; gap:.8rem; justify-content:center; margin:1rem 0; }
.hie-pagination .hie-page { padding:.5rem .75rem; border-radius:var(--hie-radius-sm); border:1px solid #e5e7eb; background:#fff; }
.hie-pagination .hie-page[disabled] { opacity:.4; pointer-events:none; }

/* ---------- Loading ---------- */
.hie-list.hie-loading { opacity:.6; pointer-events:none; }

/* ---------- Style Modifiers ---------- */
.hie-style-compact .hie-card--row {
  --media-h:180px;
  padding:1rem;
  gap:1rem;
}
.hie-style-compact .hie-card-title { font-size:1.1rem; }
.hie-style-compact .hie-card-excerpt { -webkit-line-clamp:2; }

.hie-style-minimal .hie-card--row {
  box-shadow:none;
  border:1px solid #e5e7eb;
  background:#fafafa;
}
.hie-style-minimal .hie-card-actions .hie-btn {
  border-color:#111827;
  padding:.35rem 1.2rem;
}
.hie-style-minimal .hie-card-excerpt { color:#374151; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
    .hie-card-tags {
        margin-top: 20px;
    }
    .hie-card-excerpt {
        margin-bottom: 10px;
    }
  /* Cards */
  .hie-card--row{ grid-template-columns:220px 1fr; --media-h:200px; }
  .hie-card-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    margin-bottom: 10px;
    }
  .hie-card-actions .hie-btn{
    width:100%;
    justify-content:center;
  }

  /* Filter: full width */
  .hie-filter-row{ grid-template-columns:1fr !important; }
  .hie-filter-item,
  .hie-filter-item--wide,
  .hie-filter-item--from,
  .hie-filter-item--to,
  .hie-filter-item--lang,
  .hie-filter-item--order,
  .hie-filter-item--category,
  .hie-filter-actions{ grid-column:1 / -1 !important; }

  .hie-filters input,
  .hie-filters select,
  .hie-filters .button,
  .hie-filters .hie-btn{
    width:100% !important;
    max-width:100% !important;
  }
  .hie-filter-actions{ grid-template-columns:1fr !important; }
}
@media (max-width:680px){
  .hie-card--row{ grid-template-columns:1fr; --media-h:200px; }
  .hie-card-media-col, .hie-card-date{ margin-bottom:.5rem; }
}