/* SAMF search page. No Figma frame: own design in the Figma style (page header, DS input 48px / 8px radius, glass result cards).
   Tokens come from samf-tokens.css. Logical properties only. */
.samf-search-page__body { padding-block: 1rem 5rem; }
.samf-search-page .samf-search-form { max-inline-size: 48rem; margin-block-end: 2.5rem; }
.samf-search__label { display: block; font-weight: 600; margin-block-end: .5rem; color: var(--samf-color-text); }
.samf-search__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.samf-search__input {
  flex: 1 1 14rem;
  min-block-size: 3rem;
  padding-inline: 1rem;
  background: var(--samf-color-surface);
  color: var(--samf-color-text);
  border: 1px solid var(--samf-color-border-strong);
  border-radius: var(--samf-radius);
  font-family: var(--samf-font-body);
  font-size: var(--samf-fs-h6);
}
.samf-search__input::placeholder { color: var(--samf-color-muted); }
.samf-search__input:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; border-color: var(--samf-color-primary); }
.samf-search__input[aria-invalid="true"] { border-color: var(--samf-color-danger); }
.samf-search__submit { cursor: pointer; justify-content: center; min-inline-size: 7rem; min-block-size: 3rem; border-radius: var(--samf-radius); }
.samf-search__hint { color: var(--samf-color-muted); font-size: var(--samf-fs-body); margin-block: .5rem 0; }
.samf-search__hint--error { color: var(--samf-color-danger); font-weight: 600; }
.samf-search__prompt { color: var(--samf-color-muted); }
.samf-search__count { margin-block-end: 1.5rem; }

.samf-search__state { max-inline-size: 48rem; border-radius: 2rem; border-style: solid; border-color: var(--samf-color-border); background: color-mix(in srgb, var(--samf-color-page) 35%, transparent); }
.samf-search__suggestions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0 0; padding: 0; }

.samf-search__group { margin-block-end: 2.5rem; }
.samf-search__group-title { font-size: var(--samf-fs-h4); font-weight: 500; text-transform: none; color: var(--samf-color-text); }
.samf-search__hits { display: grid; gap: 1rem; margin: 0; padding: 0; }
.samf-search__hit { border: 1px solid var(--samf-color-border); background: color-mix(in srgb, var(--samf-color-page) 35%, transparent); border-radius: 1.5rem; padding: 1.25rem 1.5rem; }
.samf-search__hit:hover { border-color: var(--samf-color-primary); }
.samf-search__hit-title { display: inline-block; min-block-size: 2.75rem; line-height: 2.75rem; font-family: var(--samf-font-display); font-size: var(--samf-fs-h5); font-weight: 500; color: var(--samf-color-primary); text-decoration: none; }
.samf-search__hit-title:hover { text-decoration: underline; color: var(--samf-color-primary-hover); }
.samf-search__hit-title:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; border-radius: var(--samf-radius); }
.samf-search__snippet { color: var(--samf-color-muted); margin: 0; font-size: var(--samf-fs-body); }

[dir="rtl"] .samf-search__label, [dir="rtl"] .samf-search__hit-title { letter-spacing: 0; }

@media (max-width: 1024px) {
  .samf-search__group-title { font-size: var(--samf-fs-h5); }
  .samf-search-page__body { padding-block-end: 3rem; }
}
@media (max-width: 375px) {
  .samf-search__row { flex-direction: column; }
  .samf-search__input { flex: none; inline-size: 100%; }
  .samf-search__submit { inline-size: 100%; }
  .samf-search__hit { padding: 1rem; }
  .samf-search__hit-title { font-size: var(--samf-fs-h6); }
}

/* Round 2: the 126%-wide grit layer left a hard black block with an edge on phones (page is short); no grit layer there. */
@media (max-width: 767.98px) { .samf-search-page .samf-m2-art__grit--b { display: none; } }