/* =========================================================================
   Soouo · search page (frontend/pages/search.tpl)
   Core filters kept as-is (query, author, date range, journal) — restyled
   into one large panel. The card/list toggle is a pure display switch over
   the already-rendered .search_results list (js/search-view.js); no filter
   this file/JS adds requires backend support that OJS core does not have.
   ========================================================================= */

.page_search .page_title,
.page_search > h1 { margin-bottom: 22px; }

.page_search .cmp_form.search_advanced,
.page_search form.cmp_form {
  background: var(--soouo-surface); border: 1px solid var(--soouo-border);
  border-radius: var(--soouo-radius-lg); padding: clamp(18px, 3vw, 32px);
  box-shadow: var(--soouo-shadow-sm); margin-bottom: 30px;
}

.page_search .search_input { position: relative; margin-bottom: 18px; }
.page_search .search_input input.query {
  width: 100%; height: 58px; padding: 0 52px 0 20px;
  border: 1px solid var(--soouo-border-2); border-radius: var(--soouo-radius);
  background: var(--soouo-bg); color: var(--soouo-text);
  font-size: 17px;
}
.page_search .search_input input.query:focus-visible { outline: none; border-color: var(--soouo-accent); box-shadow: var(--soouo-ring); }
.page_search .search_input::after {
  content: "search"; font-family: 'Material Symbols Outlined'; font-size: 24px;
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--soouo-text-3); pointer-events: none;
}

.page_search fieldset.search_advanced {
  border: 0; padding: 18px 0 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 18px;
}
.page_search fieldset.search_advanced > legend {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soouo-text-3); padding: 0 0 12px; grid-column: 1 / -1;
}
.page_search .date_range { display: flex; gap: 10px; grid-column: span 2; }
.page_search .date_range .from, .page_search .date_range .to { flex: 1; min-width: 0; }
.page_search .date_range legend { font-size: 11px; color: var(--soouo-text-3); margin-bottom: 4px; }
.page_search .author label.label,
.page_search .label_contexts { display: block; font-size: 11.5px; font-weight: 700; color: var(--soouo-text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.page_search input[type="text"], .page_search select {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--soouo-border-2); border-radius: var(--soouo-radius-sm);
  background: var(--soouo-bg); color: var(--soouo-text); font-size: 14px;
}
.page_search input:focus-visible, .page_search select:focus-visible { outline: none; border-color: var(--soouo-accent); box-shadow: var(--soouo-ring); }

.page_search .submit { grid-column: 1 / -1; margin-top: 4px; }
.page_search .submit button {
  height: 48px; padding: 0 32px; border: 0; border-radius: var(--soouo-radius-sm);
  background: var(--soouo-grad-accent); color: var(--soouo-on-accent);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--soouo-shadow-accent);
}

/* ---- results header + view toggle ---- */
.soouo-results-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.soouo-view-toggle { display: inline-flex; border: 1px solid var(--soouo-border-2); border-radius: var(--soouo-radius-sm); overflow: hidden; }
.soouo-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 0; background: var(--soouo-bg); color: var(--soouo-text-2); font-size: 13px; font-weight: 600;
}
.soouo-view-toggle button + button { border-left: 1px solid var(--soouo-border-2); }
.soouo-view-toggle button[aria-pressed="true"] { background: var(--soouo-primary); color: var(--soouo-on-primary); }
.soouo-view-toggle .material-symbols-outlined { font-size: 18px; }

/* list (default core) view */
.search_results { list-style: none; margin: 0; padding: 0; }
.search_results > li { padding: 20px 0; border-bottom: 1px solid var(--soouo-border); }
.search_results .obj_article_summary .title { font-size: 17px; }

/* card view */
.page_search[data-view="card"] .search_results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 18px;
}
.page_search[data-view="card"] .search_results > li {
  padding: 0; border-bottom: 0;
  border: 1px solid var(--soouo-border); border-radius: var(--soouo-radius);
  background: var(--soouo-surface); box-shadow: var(--soouo-shadow-sm);
}
.page_search[data-view="card"] .obj_article_summary { padding: 18px; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.page_search[data-view="card"] .obj_article_summary .title { font-size: 15.5px; }