/* worthly.si — hero and search on small screens.
   Fixes the phone layout: the badge wraps by meaningful segment instead of by word, the four
   tabs become a 2×2 grid of full-width pills, and the round search button turns into a labelled
   full-width button under the field. Loaded last so it wins over the desktop rules. */

/* the badge: flex gap was splitting it word by word into columns */
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px 10px;flex-wrap:wrap;max-width:100%}
.hero .eyebrow .seg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hero .eyebrow .dotsep{opacity:.55}

@media(max-width:760px){
  .hero .eyebrow{gap:6px 10px;padding:9px 14px;border-radius:999px;font-size:12.5px;line-height:1.35}
  .hero .eyebrow .seg+.seg{border-left:1px solid rgba(255,255,255,.18);padding-left:10px}
  .hero .eyebrow .dotsep{display:none}
}

/* the four tabs: one row was breaking into a lopsided pill */
@media(max-width:720px){
  .hero .hero-search .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
    background:none;border:0;padding:0;border-radius:0;box-shadow:none}
  .hero .hero-search .tabs .tab{display:flex;align-items:center;justify-content:center;
    min-height:48px;padding:0 12px;font:600 14.5px var(--sans);letter-spacing:.005em;text-align:center;
    border-radius:12px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.14);color:#DCE6FF;
    transition:background .18s ease,border-color .18s ease,transform .18s ease}
  .hero .hero-search .tabs .tab:active{transform:scale(.985)}
  .hero .hero-search .tabs .tab.active{background:linear-gradient(140deg,#3D77FF,#1447CC);border-color:transparent;
    color:#fff;box-shadow:0 12px 24px -16px rgba(20,71,204,.95)}
}

/* the search control: field row first, then a real labelled button */
@media(max-width:600px){
  .hero .checker .pill,.checker-x .pill,.result-top .pill{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"ico input suffix" "btn btn btn";
    gap:12px 10px;border-radius:20px;padding:12px 12px 12px 14px;
    box-shadow:0 20px 44px -30px rgba(8,20,60,.6);
  }
  .hero .checker .pill .ico,.checker-x .pill .ico,.result-top .pill .ico{grid-area:ico;align-self:center;color:#5A6C93}
  .hero .checker .pill input,.checker-x .pill input,.result-top .pill input{
    grid-area:input;width:100%;min-width:0;padding:6px 0;font:500 17px var(--sans)}
  .hero .checker .pill .suffix,.checker-x .pill .suffix,.result-top .pill .suffix{
    grid-area:suffix;align-self:center;background:#EEF3FF;color:#1447CC;font:700 13.5px var(--mono);
    padding:5px 9px;border-radius:9px;letter-spacing:-.02em}
  .hero .checker .pill .sbtn,.checker-x .pill .sbtn,.result-top .pill .sbtn{
    grid-area:btn;width:100%;height:54px;border-radius:14px;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(140deg,#3D77FF,#1447CC);
    box-shadow:0 14px 26px -14px rgba(20,71,204,.9);
    transition:transform .15s ease,filter .15s ease;touch-action:manipulation;
  }
  .hero .checker .pill .sbtn:active,.checker-x .pill .sbtn:active,.result-top .pill .sbtn:active{
    transform:translateY(1px) scale(.995);filter:brightness(1.04)}
  .hero .checker .pill .sbtn svg,.checker-x .pill .sbtn svg,.result-top .pill .sbtn svg{width:20px;height:20px}
  .hero .checker .pill .sbtn::after,.checker-x .pill .sbtn::after,.result-top .pill .sbtn::after{
    content:"Check availability";font:700 16.5px/1 var(--sans);letter-spacing:.005em;color:#fff}
  /* the free-standing Check pills on the name page keep their own label */
  .checker-x.has-label .pill .sbtn::after{content:none}
}

@media(max-width:520px){
  .hero .hero-search .tabs{grid-template-columns:1fr 1fr}
  .hero .hero-search .tabs .tab{font-size:13.5px}
}