/* Minimal, theme-friendly styles */
.ikb-wrap{ max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.ikb-search{ position: relative; display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.ikb-input{ flex: 1; padding: .5rem .75rem; }
.ikb-select{ padding: .5rem .75rem; }
.ikb-suggestions{ position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; z-index: 20; display:none; max-height: 280px; overflow:auto; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.ikb-suggestion{ padding: .5rem .75rem; cursor: pointer; }
.ikb-suggestion:hover, .ikb-suggestion:focus{ background: #f5f5f5; outline: none; }
/* (search results and pagination styles removed) */
@media (min-width: 900px){ .ikb-wrap{ padding: 1.5rem; } }

/* Hero (Kadence Help Center -henkinen) */
.ikb-hero{ background: #F8E34C; border-radius: 12px; padding: 3rem 1.25rem; margin: .5rem 0 2rem; }
.ikb-hero-inner{ max-width: 800px; margin: 0 auto; text-align: center; }
.ikb-title{ font-size: clamp(1.6rem, 2.5vw, 2.4rem); margin: 0 0 1rem; font-weight: 700; color: #1a1a1a; }
.ikb-hero .ikb-search{ margin: 0 auto; justify-content: center; gap: .75rem; }
.ikb-hero .ikb-input{ max-width: 560px; width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: .75rem 1rem; background:#fff; }
.ikb-hero .ikb-select{ border: 1px solid #ddd; border-radius: 8px; padding: .65rem .9rem; background:#fff; }
.ikb-hero .ikb-input:focus, .ikb-hero .ikb-select:focus{ outline: none; border-color: #d4c53a; box-shadow: 0 0 0 3px rgba(248,227,76,.35); }
.ikb-hero .ikb-input::placeholder{ color:#666; opacity: 1; }
.ikb-hero .ikb-suggestions{ max-width: 560px; margin: 0 auto; }

/* Space switcher (segmented control) */
.ikb-space-switcher{ display:flex; align-items:center; justify-content:center; gap:.35rem; padding:.35rem; background:#fff; border:1px solid rgba(65,143,83,.35); border-radius:999px; margin:0 0 1rem; box-shadow:0 2px 10px rgba(0,0,0,.04); flex-wrap: wrap; }
@media (min-width: 720px){ .ikb-space-switcher{ margin: 0 auto 1.25rem; width: fit-content; } }
.ikb-space-link{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; color:#1a1a1a; text-decoration:none; font-weight:600; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; }
.ikb-space-link:hover{ background:#f5f5f5; transform: translateY(-1px); }
.ikb-space-link.is-active{ background:#418f53; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.ikb-space-link.is-active:hover{ background:#4aa463; }
.ikb-space-link:focus-visible{ outline:2px solid #418f53; outline-offset:2px; box-shadow: 0 0 0 3px rgba(65,143,83,.25); }

/* Inline search (non-hero) – normalize heights/alignment (only when search is direct child of .ikb-wrap) */
.ikb-wrap > .ikb-search .ikb-input,
.ikb-wrap > .ikb-search .ikb-select{
  border: 1px solid #ddd;
  border-radius: 8px;
  height: 44px;
  padding: 0 1rem;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
}

/* Kategoriakortit */
.ikb-categories{ margin: 0 0 2rem; }
.ikb-grid{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem; }
.ikb-card{ display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 1.1rem; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.ikb-card:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: translateY(-3px); border-color: #e0e0e0; }
.ikb-card:focus-visible{ outline: 2px solid #1a1a1a; outline-offset: 2px; }
.ikb-card-icon{ font-size: 1.3rem; opacity: .8; }
.ikb-card-title{ font-weight: 600; font-size: 1.02rem; }
.ikb-card-meta{ color: #666; font-size: .86rem; }
/* Card thumbnail */
.ikb-card-thumb{ width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:.25rem; }
.ikb-card-thumb img{ width:56px; height:56px; display:block; }

/* Responsiivisuus */
@media (max-width: 640px){
  .ikb-search{ flex-direction: column; align-items: stretch; }
  .ikb-select{ width: 100%; }
}
@media (max-width: 900px){
  .ikb-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px){
  .ikb-grid{ grid-template-columns: 1fr !important; }
}