/* Every block rule below is scoped under .takwim rather than using the block
   class alone. A host template that styles `.page__main ul` or
   `.page__main h2` does so at specificity (0,1,1), which outranks a single
   class -- on this site that put list markers and a 20px indent back on the
   listing and inflated titles to 21.6px. A component meant to install on any
   Joomla site cannot assume the template will be polite; keep new rules
   scoped the same way. */
/* Programme calendar. Inherits template palette variables with fallbacks. */
.takwim { --t-line: var(--line,#DFE4EA); --t-navy: var(--navy-900,#062F5C);
          --t-blue: var(--navy-800,#0B4D8F); --t-ink: var(--ink-900,#12171F);
          --t-muted: var(--ink-600,#48525F); --t-soft: var(--bg-soft,#F5F7FA); }
.takwim .takwim__title { font-size:1.75rem; color:var(--t-navy); margin-bottom:20px; }
.takwim .takwim__filters { background:var(--t-soft); border:1px solid var(--t-line); border-radius:10px; padding:20px; margin-bottom:24px; }
.takwim .takwim__row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.takwim .takwim__field label { display:block; font-size:.8125rem; font-weight:600; color:var(--t-muted); margin-bottom:5px; }
.takwim .takwim__field input, .takwim__field select {
  width:100%; min-height:42px; padding:8px 12px; font-size:.9375rem; font-family:inherit;
  border:1px solid var(--t-line); border-radius:6px; background:#fff;
}
.takwim .takwim__actions { display:flex; gap:10px; flex-wrap:wrap; }
.takwim .btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px;
  padding:10px 22px; border-radius:6px; font-weight:600; font-size:.9375rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer; }
.takwim .btn--primary { background:var(--t-blue); color:#fff; }
.takwim .btn--primary:hover { background:var(--t-navy); }
.takwim .btn--ghost-dark { border-color:var(--t-blue); color:var(--t-blue); background:none; }
.takwim .takwim__count { margin:0 0 12px; color:var(--t-muted); font-size:.9375rem; }
.takwim .takwim__empty { padding:28px; text-align:center; color:var(--t-muted); background:var(--t-soft);
  border:1px dashed var(--t-line); border-radius:10px; }
.takwim .takwim__list { list-style:none; margin:0; padding:0; }
.takwim .takwim__item { display:flex; gap:16px; align-items:flex-start; padding:16px;
  border:1px solid var(--t-line); border-radius:10px; margin-bottom:12px; background:#fff; }
.takwim .takwim__date { flex:0 0 92px; text-align:center; padding:8px 6px; background:var(--t-soft);
  border-left:4px solid var(--t-blue); border-radius:6px; }
.takwim .takwim__d { display:block; font-size:1.25rem; font-weight:800; color:var(--t-navy); line-height:1.1; }
.takwim .takwim__m { display:block; font-size:.75rem; color:var(--t-muted); }
.takwim .takwim__body { flex:1 1 auto; min-width:0; }
.takwim .takwim__name { font-size:1.0625rem; color:var(--t-ink); margin:0 0 6px; }
.takwim .takwim__meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.8125rem; color:var(--t-muted); margin:0; }
.takwim .takwim__tag { background:#E3F0FF; color:#0B4D8F; padding:2px 9px; border-radius:999px; font-weight:600; }
.takwim .takwim__places { flex:0 0 auto; }
.takwim .takwim__full { color:#9A2A00; font-weight:700; font-size:.8125rem; }
.takwim .takwim__left { color:#0B5F56; font-weight:700; font-size:.8125rem; }
.takwim .takwim__pagination { margin-top:20px; }
.takwim .takwim__pagination ul { display:flex; gap:6px; flex-wrap:wrap; list-style:none; padding:0; }
.takwim .takwim__pagination a, .takwim__pagination span {
  display:inline-flex; align-items:center; justify-content:center; min-width: 44px; min-height: 44px;
  padding:0 10px; border:1px solid var(--t-line); border-radius:6px; text-decoration:none;
}
@media (max-width:900px){ .takwim .takwim__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .takwim .takwim__row{ grid-template-columns:1fr; }
  .takwim .takwim__item{ flex-wrap:wrap; }
  .takwim .takwim__date{ flex:0 0 auto; }
  .takwim .takwim__places{ flex:1 0 100%; }
}

/* Single event page ------------------------------------------------------ */
.acara__kategori { display:inline-block; color:#fff; font-size:.75rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.acara__title { font-size:1.75rem; color:var(--t-navy); margin:0 0 20px; }
.acara__facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px;
  margin:0 0 24px; padding:20px; background:var(--t-soft); border:1px solid var(--t-line); border-radius:10px; }
.acara__facts > div { min-width:0; }
.acara__facts dt { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--t-muted); margin-bottom:3px; }
.acara__facts dd { margin:0; color:var(--t-ink); font-size:.9375rem; }
.acara__online { display:inline-block; background:#DDF3EF; color:#0B5F56; font-size:.6875rem;
  font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; }
.acara__alamat { display:block; color:var(--t-muted); font-size:.8125rem; margin-top:2px; }
.acara__body { line-height:1.7; margin-bottom:24px; }
.acara__body p { margin:0 0 12px; }
.acara__actions { display:flex; gap:10px; flex-wrap:wrap; }
.takwim .takwim__name a { color:inherit; text-decoration:none; }
.takwim .takwim__name a:hover { color:var(--t-blue); text-decoration:underline; }
@media (max-width:620px){ .acara__facts { grid-template-columns:1fr; } }