/* ============================================================
   BengalTutors — ONLINE SEARCH BAR grid
   Upload to:  public_html/css/online-search-bar.css

   Base field/chip/preset styles live in search-bar.css (shared,
   .ts-* prefixed). This file ONLY sets the grid, because the online
   bar's field set differs from the home bar's.

   Load BOTH, in this order:
     <link rel="stylesheet" href="/css/search-bar.css">
     <link rel="stylesheet" href="/css/online-search-bar.css">
   ============================================================ */

/* Qualification hides itself until a tutor has actually set one, so this
   bar renders FOUR controls or FIVE. Those need different tracks.

   An earlier version declared six tracks and assumed the empty one would
   collapse. It doesn't: fr tracks exist whether or not anything lands in
   them, so with Qualification absent every field shifted one column left —
   Institution inherited the narrow track and its text was clipped, and the
   button landed in an fr track instead of auto. Hence two explicit rules. */

/* FOUR controls: Subject | Level | Institution | Experience | [Go] */
.ts-bar-online{
  grid-template-columns:1.6fr 1fr 1.5fr 1.1fr auto;
  align-items:end;
}

/* FIVE controls, once Qualification switches itself on.
   PHP adds .has-qual — see lib/online_search_bar.php. */
.ts-bar-online.has-qual{
  grid-template-columns:1.5fr 1fr 1.1fr 1.4fr 1.1fr auto;
}

/* Bottom-align every field so the inputs sit on ONE line no matter how
   tall the label wraps or how many subject chips are showing.

   Doubled selector (.ts-bar.ts-bar-online) on purpose: search-bar.css sets
   its own alignment on these fields, and a single class here tied on
   specificity. Being explicit beats relying on file load order. */
.ts-bar.ts-bar-online .ts-f,
.ts-bar.ts-bar-online .ts-f-sel,
.ts-bar.ts-bar-online .ts-f-uni,
.ts-bar.ts-bar-online .ts-f-subject{
  align-self:end;
  min-width:0;
}

/* The Institution box is an autocomplete, so it also carries .bt-ac —
   which is where the stretch was coming from. Pin it down too. */
.ts-bar.ts-bar-online .bt-ac{align-self:end}

/* min-width:0 above matters: without it a grid item refuses to shrink
   below its content, which is what pushed "Tutor's Institution" wider
   than its column and over the field beside it. */
.ts-bar-online .ts-f input,
.ts-bar-online .ts-f select{max-width:100%}

/* ---- responsive step-down ---- */
@media (max-width:1120px){
  .ts-bar-online,
  .ts-bar-online.has-qual{grid-template-columns:1fr 1fr 1fr}
  .ts-bar-online .ts-f-subject{grid-column:1 / -1}
  .ts-bar-online .ts-go{grid-column:1 / -1;width:100%}
}
@media (max-width:720px){
  .ts-bar-online,
  .ts-bar-online.has-qual{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .ts-bar-online,
  .ts-bar-online.has-qual{grid-template-columns:1fr;gap:12px}
  .ts-bar-online .ts-f-subject,
  .ts-bar-online .ts-go{grid-column:auto}
}