/* Front page search. Markup: index.php (#hobsearch-form). Behaviour: hobsearch.js. Data: hobsearch.ajax.php.
   Logical properties throughout - the same rules serve Hebrew (RTL) and Russian/English (LTR). */

.hobsearch { box-sizing:border-box; width:100%; max-width:900px; margin:0 auto; padding:16px 12px 24px; text-align:start }
.hobsearch__label { display:block; margin-bottom:8px; font-weight:bold; color:#14343a; font-size:17px }
.hobsearch__row { display:flex; flex-wrap:wrap; align-items:stretch; margin:0 -4px }
.hobsearch__row > * { margin:0 4px }
.hobsearch__input { flex:1 1 220px; min-width:0; box-sizing:border-box; min-height:48px; padding:10px 14px; font-size:17px; border:2px solid #9fc7cc; border-radius:8px; background-color:white; color:#14343a }
.hobsearch__input:focus { outline:3px solid #05A2B0; outline-offset:1px; border-color:#05A2B0 }
.hobsearch__submit { flex:0 0 auto; min-height:48px; min-width:120px; padding:0 24px; font-size:17px; border:none; border-radius:8px; background-color:#05A2B0; color:white; cursor:pointer }
.hobsearch__submit:hover { background-color:#04868f }
.hobsearch__submit:focus { outline:3px solid #14343a; outline-offset:2px }
.hobsearch__submit[disabled] { background-color:#9fc7cc; cursor:default }
.hobsearch__hint { margin:8px 2px 0; color:#4a6a6f; font-size:14px }

.hobsearch__status { min-height:20px; margin:12px 2px 0; font-size:15px; color:#14343a }
.hobsearch__status--bad { color:#a11; font-weight:bold }

.hobsearch__chips { display:flex; flex-wrap:wrap; margin:10px -3px 0; padding:0; list-style:none }
.hobsearch__chips > li { margin:3px }
.hobsearch__chip { display:inline-flex; align-items:center; min-height:44px; border-radius:22px; background-color:#e3f2f4; color:#14343a; font-size:14px;
  padding:0 6px 0 14px; padding-inline:14px 6px }
.hobsearch__chip > span { margin-right:6px; margin-inline-end:6px }
.hobsearch__chip button { min-width:36px; min-height:36px; border:none; border-radius:18px; background-color:transparent; color:#14343a; font-size:18px; line-height:1; cursor:pointer }
.hobsearch__chip button:hover { background-color:#c3e3e7 }
.hobsearch__chip button:focus { outline:2px solid #05A2B0 }

.hobsearch__group { margin-top:22px }
.hobsearch__group h3 { margin:0 0 10px; font-size:18px; color:#14343a }
.hobsearch__cards { display:grid; grid-template-columns:1fr; grid-gap:12px; gap:12px }
@media screen and (min-width:640px) { .hobsearch__cards { grid-template-columns:1fr 1fr } }

.hobcard { display:block; box-sizing:border-box; padding:12px 14px; border:1px solid #d5e5e7; border-radius:10px; background-color:white; color:#14343a; text-decoration:none }
.hobcard:hover { border-color:#05A2B0; box-shadow:0 2px 8px rgba(5,162,176,0.18) }
.hobcard:focus { outline:3px solid #05A2B0; outline-offset:2px }
.hobcard__kind { display:inline-block; margin-bottom:4px; padding:2px 8px; border-radius:10px; background-color:#eef6f7; color:#3d6167; font-size:12px; text-transform:uppercase }
.hobcard__title { margin:2px 0 6px; font-size:17px; font-weight:bold }
.hobcard__facts { margin:0; padding:0; list-style:none; font-size:14px; color:#3d6167 }
.hobcard__facts li { margin:2px 0 }
.hobcard__unknown { color:#8a9a9d; font-style:italic }

.hobsearch__skeleton { display:grid; grid-template-columns:1fr; grid-gap:12px; gap:12px; margin-top:18px }
@media screen and (min-width:640px) { .hobsearch__skeleton { grid-template-columns:1fr 1fr } }
.hobsearch__skeleton > span { display:block; height:86px; border-radius:10px; background-color:#eef3f4 }