/**
 * EventFlow front-end styles.
 *
 * @package EventFlow
 */

/* Bridge Elementor global design tokens; each var falls back to our own default when Elementor is not active. */
.ef-view {
  --ef-accent:    var(--e-global-color-accent,                       #2563eb);
  --ef-btn-ff:    var(--e-global-typography-accent-font-family,      inherit);
  --ef-btn-fw:    var(--e-global-typography-accent-font-weight,      600);
  --ef-btn-fs:    var(--e-global-typography-accent-font-size,        15px);
  --ef-btn-ls:    var(--e-global-typography-accent-letter-spacing,   normal);
  --ef-btn-tt:    var(--e-global-typography-accent-text-transform,   none);
  --ef-radius: 12px;
  --ef-border: #e5e7eb;
}

/* Layout ----------------------------------------------------------------- */
.ef-view--list { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
.ef-view__main { min-width: 0; }
@media (max-width: 768px) { .ef-view--list { grid-template-columns: 1fr; } }

/* Filters ---------------------------------------------------------------- */
.ef-filters { background: #fff; border: 1px solid var(--ef-border); border-radius: var(--ef-radius); padding: 1.25rem; }
.ef-filters__field { display: flex; flex-direction: column; margin: 0 0 1rem; }
.ef-filters__field label { font-weight: 600; font-size: .8rem; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .03em; }
.ef-filters__field input, .ef-filters__field select { width: 100%; padding: .55rem .65rem; border: 1px solid var(--ef-border); border-radius: 8px; }
.ef-filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ef-filters__actions { display: flex; gap: .5rem; }

/* Buttons ---------------------------------------------------------------- */
/* Base – reads Elementor global tokens; overrides Elementor's own .elementor-button when both classes coexist */
.ef-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: .4rem;
  background: var(--ef-accent) !important;
  color: #fff !important;
  border: 0;
  border-radius: 3px;           /* Elementor default; kit overrides take effect via .elementor-button */
  padding: 12px 24px;           /* Elementor medium (sm kit class shrinks this) */
  font-family: var(--ef-btn-ff);
  font-weight: var(--ef-btn-fw);
  font-size: var(--ef-btn-fs);
  letter-spacing: var(--ef-btn-ls);
  text-transform: var(--ef-btn-tt);
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: filter .15s ease;
}
.ef-btn:hover { filter: brightness(1.08); color: #fff !important; }
/* Ghost / outline variant – explicitly transparent so it wins over .elementor-button's solid background */
.ef-btn.ef-btn--ghost { background: transparent !important; color: var(--ef-accent) !important; border: 1px solid var(--ef-accent) !important; }
.ef-btn.ef-btn--ghost:hover { filter: none; opacity: .85; }
.ef-btn--sm { padding: 10px 20px; font-size: .85em; }
.ef-btn--block { width: 100%; margin-top: 1rem; }

/* Results grid ----------------------------------------------------------- */
.ef-results--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.ef-results--list { display: flex; flex-direction: column; gap: 1rem; }
.ef-results.is-loading { opacity: .5; pointer-events: none; }

/* Card ------------------------------------------------------------------- */
.ef-card { background: #fff; border: 1px solid var(--ef-border); border-radius: var(--ef-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.ef-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
.ef-card--list { flex-direction: row; }
.ef-card--list .ef-card__media { width: 240px; flex: 0 0 240px; }
@media (max-width: 540px) { .ef-card--list { flex-direction: column; } .ef-card--list .ef-card__media { width: 100%; flex-basis: auto; } }
.ef-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #f3f4f6; }
.ef-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.ef-card__type { position: absolute; top: .6rem; left: .6rem; background: rgba(17,24,39,.85); color: #fff; font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.ef-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ef-card__date { color: var(--ef-accent); font-weight: 600; font-size: .82rem; margin: 0; }
.ef-card__title { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.ef-card__title a { color: inherit; text-decoration: none; }
.ef-card__location { color: #6b7280; font-size: .85rem; margin: 0; }
.ef-card__excerpt { color: #4b5563; font-size: .9rem; margin: .2rem 0 0; }
.ef-card__footer { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; }
.ef-card__price { font-weight: 700; }
.ef-card__price.is-free { color: #16a34a; }

/* Pagination ------------------------------------------------------------- */
.ef-pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 2rem; }
.ef-page { padding: .45rem .8rem; border: 1px solid var(--ef-border); border-radius: 8px; text-decoration: none; color: inherit; }
.ef-page.is-current { background: var(--ef-accent); color: #fff; border-color: var(--ef-accent); }

/* Calendar --------------------------------------------------------------- */
.ef-cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ef-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ef-border); border: 1px solid var(--ef-border); border-radius: var(--ef-radius); overflow: hidden; }
.ef-cal-dow { background: #f9fafb; font-weight: 700; text-align: center; padding: .5rem; font-size: .8rem; }
.ef-cal-cell { background: #fff; min-height: 96px; padding: .35rem; font-size: .8rem; }
.ef-cal-empty { background: #fafafa; }
.ef-cal-today { background: #eff6ff; }
.ef-cal-num { font-weight: 700; color: #6b7280; }
.ef-cal-events { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ef-cal-events a { display: block; background: var(--ef-accent); color: #fff; border-radius: 5px; padding: .15rem .35rem; text-decoration: none; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-cal-body.is-loading { opacity: .5; }

/* Single ----------------------------------------------------------------- */
.ef-single__hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--ef-radius); }
.ef-single__title { margin: 1rem 0 .25rem; }
.ef-single__date { color: var(--ef-accent); font-weight: 600; }
.ef-single__layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 860px) { .ef-single__layout { grid-template-columns: 1fr; } }
.ef-meta-box { background: #fff; border: 1px solid var(--ef-border); border-radius: var(--ef-radius); padding: 1.25rem; }
.ef-meta-list { list-style: none; margin: 0; padding: 0; }
.ef-meta-list li { padding: .6rem 0; border-bottom: 1px solid var(--ef-border); display: flex; flex-direction: column; gap: .15rem; }
.ef-meta-list li:last-child { border-bottom: 0; }
.ef-meta-list strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.ef-single__map { height: 280px; margin-top: 1rem; border-radius: var(--ef-radius); overflow: hidden; }

/* Archive ---------------------------------------------------------------- */
.ef-archive__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ef-archive__switch button { background: #fff; border: 1px solid var(--ef-border); padding: .45rem .9rem; cursor: pointer; }
.ef-archive__switch button:first-child { border-radius: 8px 0 0 8px; }
.ef-archive__switch button:last-child { border-radius: 0 8px 8px 0; }
.ef-archive__switch button.is-active { background: var(--ef-accent); color: #fff; border-color: var(--ef-accent); }

.ef-empty { padding: 2rem; text-align: center; color: #6b7280; }
.ef-view__count { color: #6b7280; font-size: .9rem; }