/* Search Homes on phones (up to 767px wide), Ekin's approved design of
   16 October 2026: the Tampa Bay waterfront photo fills the top of the page,
   cinematic and lightly shaded; the headline, then the four ways to search
   as compact photo cards on one row (Classic Search, AI Search, Map Search,
   Mila Match, the selected one in champagne gold) and one white pill search
   box with a round gold arrow; then Explore by Lifestyle straight away (no
   strip of four benefits on phones). Their tabs, the map button, the Mila
   Match link and both forms are Search Homes' own (home-search.js); only
   their look changes on phones. The header, Menu bar and contact row are
   every page's (site-mobile.css).

   search.html loads this file for phones only (media="(max-width: 767px)")
   and every rule sits inside the same query, so tablets and computers never
   see it. Rules start at body#sbe-site, as in site-mobile.css. */
@media (max-width: 767px) {
  /* ---- The hero: the waterfront photo, full width, with a subtle deep-teal
     shade (light under the header, clear through the sky and skyline, a
     little deeper behind the words and controls at the bottom). ---- */
  #sbe-site .search-hero {
    background-image: linear-gradient(180deg,
      rgba(4, 38, 40, .34) 0,
      rgba(4, 38, 40, .05) 14%,
      rgba(4, 38, 40, 0) 26%,
      rgba(4, 38, 40, .16) 38%,
      rgba(4, 38, 40, .46) 52%,
      rgba(4, 38, 40, .6) 66%,
      rgba(4, 38, 40, .7) 84%,
      rgba(4, 38, 40, .78) 100%), url("/assets/search-hero-sunset.webp") !important;
    background-position: 58% 40% !important;
    background-size: cover !important;
  }
  /* The photo shows above the words: the top fills most of the screen under
     the header (as the home page's does), its content at the bottom. */
  #sbe-site .search-hero-inner {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc((100svh - var(--sbe-site-header, 150px) - 57px - env(safe-area-inset-bottom)) * .84);
    /* The pill and its arrow a little above the photo's lower edge (Ekin, 16 October 2026). */
    padding: 28px max(var(--hm-gutter), env(safe-area-inset-right)) 30px max(var(--hm-gutter), env(safe-area-inset-left)) !important;
  }
  #sbe-site .search-hero-inner :is(.kicker, h1) { text-shadow: 0 1px 2px rgba(0, 22, 26, .55), 0 2px 16px rgba(0, 22, 26, .45); }
  #sbe-site .search-hero .kicker { margin: 0 0 8px !important; color: #f2cf7e !important; font-size: 10.5px !important; letter-spacing: .2em !important; }
  #sbe-site .search-hero h1 {
    margin: 0 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(33px, 9.6vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
  }
  #sbe-site .search-hero h1 em { color: var(--hm-gold) !important; font-style: italic; font-weight: 600 !important; }
  /* Ekin's design goes from the headline straight to the four ways to search:
     no subtitle, and no note under the box. */
  #sbe-site .search-hero :is(.search-hero-subtitle, .ai-preview-note) { display: none !important; }

  /* ---- The four ways to search as compact photo cards (about 100px) ---- */
  #sbe-site .search-modes-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-width: none !important;
    /* The headline and its line above sit a little higher (Ekin, 16 October 2026). */
    margin: 36px 0 12px !important;
  }
  #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila) {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 32px 3px 6px !important;
    overflow: hidden;
    border: 1px solid rgba(246, 242, 234, .32) !important;
    border-radius: 12px !important;
    background: #0b3b3a center top / cover no-repeat !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: "Montserrat", "Avenir Next", "DM Sans", Arial, sans-serif !important;
    font-size: clamp(11.5px, 3.15vw, 12.5px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    text-transform: none !important;
    text-shadow: 0 1px 5px rgba(0, 22, 26, .55);
    animation: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  #sbe-site #traditional-tab { background-image: url("/assets/home-mobile/card-classic-20261016.webp") !important; }
  #sbe-site #ai-tab { background-image: url("/assets/home-mobile/card-ai-20261016.webp") !important; }
  #sbe-site .search-modes-row button.search-mode-map-button { background-image: url("/assets/home-mobile/card-map-20261016.webp") !important; }
  #sbe-site .search-modes-row a.search-mode-mila { background-image: url("/assets/home-mobile/card-mila-20261016.webp") !important; }
  /* Deep teal over the lower part of each photo, under the icon and words. */
  #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 61, 60, 0) 0, rgba(6, 61, 60, .12) 36%, rgba(4, 46, 45, .82) 100%);
    transition: background .2s ease;
  }
  #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila) svg {
    flex: none;
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    padding: 7px;
    border: 1.25px solid var(--hm-gold);
    border-radius: 50%;
    background: rgba(4, 38, 38, .88);
    color: #fff !important;
  }
  /* Two short, even lines: in English "Classic / Search", "AI / Search",
     "Map / Search", "Mila / Match"; a longer language uses the card's width. */
  #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila) > span:not(.search-mode-mila-new) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.24em;
    max-width: 100%;
    text-align: center;
    text-wrap: balance;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  html[lang="en"] #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila) > span:not(.search-mode-mila-new) { max-width: min(100%, 4.3em); }
  #sbe-site .search-modes-row .search-mode-mila-new { display: none !important; }
  /* The selected one (AI Search at first): a refined champagne gold, no glow. */
  #sbe-site .search-modes-row :is(.search-modes button[aria-selected="true"], .search-mode-map-button[aria-pressed="true"]) {
    border: 1px solid var(--hm-gold) !important;
    color: var(--hm-ink) !important;
    text-shadow: none;
    box-shadow: 0 8px 18px -12px rgba(217, 172, 84, .65) !important;
  }
  #sbe-site .search-modes-row :is(.search-modes button[aria-selected="true"], .search-mode-map-button[aria-pressed="true"])::before {
    background: linear-gradient(180deg, rgba(217, 172, 84, .06) 0, rgba(217, 172, 84, .34) 28%, rgba(214, 168, 80, .9) 54%, rgba(224, 184, 102, .97) 100%);
  }
  #sbe-site .search-modes-row :is(.search-modes button[aria-selected="true"], .search-mode-map-button[aria-pressed="true"]) svg { border-color: var(--hm-ink); background: var(--hm-ink); color: #f2d28c !important; }
  #sbe-site #ai-tab[aria-selected="true"] svg path { fill: currentColor; }
  @media (hover: hover) {
    #sbe-site .search-modes-row :is(.search-modes button[aria-selected="false"], .search-mode-map-button[aria-pressed="false"], .search-mode-mila):hover { border-color: rgba(217, 172, 84, .8) !important; }
  }
  #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila):focus-visible { outline: 3px solid #f0c46a !important; outline-offset: 2px !important; }

  /* ---- One white pill (58px) with Mila's spark and a round gold arrow ---- */
  #sbe-site .search-hero .hero-search-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 5px 5px 16px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #fbf9f4 !important;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7) !important;
  }
  html[dir="rtl"] #sbe-site .search-hero .hero-search-form { padding: 5px 16px 5px 5px !important; }
  /* AI Search: one line that grows with a longer question (home-search.js),
     the spark at its first line and the arrow at its foot. */
  #sbe-site .search-hero #ai-search-form { align-items: flex-end !important; }
  #sbe-site .search-hero .hero-search-form .search-spark { flex: none; align-self: center; color: var(--hm-gold) !important; }
  #sbe-site .search-hero #ai-search-form .search-spark { align-self: flex-start; margin-top: 14px; }
  /* The field fills the pill (a textarea is otherwise only 20 characters wide,
     and its hint wrapped and was cut where the font is wider, as on iPhones). */
  #sbe-site .search-hero .hero-search-form :is(input, textarea) { display: block; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; color: #17282c !important; font-size: 16px !important; }
  #sbe-site .search-hero .hero-search-form :is(input, textarea)::placeholder { color: #6b7678 !important; opacity: 1; }
  /* Focus shows on the whole pill, not as a square inside it. */
  #sbe-site .search-hero .hero-search-form :is(input, textarea):focus { outline: none !important; border: 0 !important; box-shadow: none !important; }
  #sbe-site .search-hero .hero-search-form:focus-within { box-shadow: 0 0 0 2px var(--hm-gold), 0 14px 30px -18px rgba(0, 0, 0, .7) !important; }
  #sbe-site .search-hero .hero-search-form input { height: 48px !important; min-height: 48px !important; }
  #sbe-site .search-hero .hero-search-form textarea {
    box-sizing: border-box !important;
    height: 48px;
    min-height: 48px !important;
    max-height: 120px;
    padding: 13px 2px 13px !important;
    line-height: 22px !important;
    resize: none !important;
    overflow-y: auto;
    scrollbar-width: none;
  }
  /* No scrollbar line in the pill; a longer question still scrolls by touch. */
  #sbe-site .search-hero .hero-search-form textarea::-webkit-scrollbar { display: none; }
  /* The hint stays on one line, ending in "…" if a language's words need more room. */
  #sbe-site .search-hero .hero-search-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sbe-site .search-hero .hero-search-form .idx-autocomplete { flex: 1 1 auto !important; min-width: 0 !important; }
  /* The button keeps its words for screen readers; on screen, a gold circle with an arrow. */
  #sbe-site .search-hero .hero-search-form .button {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border-radius: 50% !important;
    background: var(--hm-gold) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }
  #sbe-site .search-hero .hero-search-form .button::after {
    content: "";
    width: 22px;
    height: 22px;
    background: var(--hm-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[dir="rtl"] #sbe-site .search-hero .hero-search-form .button::after { transform: scaleX(-1); }
  #sbe-site .search-hero .hero-search-form .button:focus-visible { outline: 3px solid var(--hm-ink) !important; outline-offset: 2px !important; }

  /* ---- No strip of four benefits on phones: Explore by Lifestyle follows
     the top directly (computers and tablets keep the strip). ---- */
  #sbe-site .search-trust { display: none !important; }
  #sbe-site .lifestyle-section { padding-top: 24px !important; }

  @media (prefers-reduced-motion: reduce) {
    #sbe-site .search-modes-row :is(.search-modes button, .search-mode-map-button, .search-mode-mila)::before { transition: none; }
  }
}