/* The home page top on phones (up to 767px wide), Ekin's mobile design of
   16 October 2026: the Tampa Bay video behind the headline, the four search
   modes as photo cards (AI Search selected), one white search box. The
   header, Menu bar and contact row are every page's (site-mobile.css).

   index.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) {
  #sbe-site { --hm-sheet: 26px; }
  /* ---- The video and headline ---- */
  #sbe-site .hero.hero--headline {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    /* About 13% shorter than the screen under the header (Ekin, 16 October
       2026: more compact); its content always fits (it sets the height then). */
    min-height: calc((100svh - var(--sbe-site-header, 150px) - 57px - env(safe-area-inset-bottom)) * .87) !important;
    margin: 0 !important;
    padding: 44px max(var(--hm-gutter), env(safe-area-inset-right)) calc(16px + var(--hm-sheet)) max(var(--hm-gutter), env(safe-area-inset-left)) !important;
    gap: 0 !important;
    background: var(--hm-teal) !important;
  }
  #sbe-site .hero.hero--headline::before,
  #sbe-site .hero.hero--headline::after { display: none !important; }
  #sbe-site .hero.hero--headline .hero-slideshow { position: absolute !important; inset: 0 !important; z-index: 0 !important; }
  #sbe-site .hero.hero--headline .hero-video { object-fit: cover !important; object-position: center 40% !important; }
  /* A light deep-teal veil, for the video only (Ekin, 16 October 2026): no
     shade under the deep teal header, the video clear from its top edge and
     through the middle where the skyline shows, and only a little deeper
     behind the words at the bottom. */
  #sbe-site .hero.hero--headline .hero-slideshow::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
    opacity: 1 !important;
    animation: none !important;
    background: linear-gradient(180deg,
      rgba(6, 61, 60, 0) 0,
      rgba(6, 61, 60, 0) 46%,
      rgba(6, 61, 60, .18) 60%,
      rgba(4, 46, 45, .5) 80%,
      rgba(4, 46, 45, .74) 93%,
      var(--hm-teal) 100%);
  }
  #sbe-site .hero.hero--headline .hero-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #sbe-site .hero.hero--headline h1 {
    max-width: 11.5em;
    margin: 0 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(40px, 12.4vw, 56px) !important;
    font-weight: 600 !important;
    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 18px rgba(0, 22, 26, .45) !important;
  }
  #sbe-site .hero.hero--headline h1 em { color: var(--hm-gold) !important; font-style: italic; }
  /* Three lines, as in Ekin's design ("Find Your / Next Move / With Ekin"): the
     same words as each language's headline, on phones only. */
  #sbe-site .hero.hero--headline .hero-title-wide { display: none !important; }
  #sbe-site .hero.hero--headline .hero-title-phone { display: inline !important; }
  #sbe-site .hero.hero--headline .hero-tagline {
    margin: 10px 0 0 !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    letter-spacing: .2em !important;
  }

  /* ---- The four search modes as photo cards, the same size as Search
     Homes' (search-mobile.css; Ekin, 16 October 2026): about 102-104px,
     6px apart, 12px corners, 32px icons, two-line labels. ---- */
  #sbe-site .hero-search { margin-top: 16px !important; }
  #sbe-site .hero-search-modes { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; max-width: none !important; }
  #sbe-site .hero-search-mode {
    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;
    margin: 0 !important;
    padding: 32px 3px 6px !important;
    overflow: hidden;
    border: 1px solid rgba(246, 242, 234, .34) !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-shadow: 0 1px 6px rgba(0, 22, 26, .55);
    animation: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  #sbe-site #hero-classic-tab { background-image: url("/assets/home-mobile/card-classic-20261016.webp") !important; }
  #sbe-site #hero-ai-tab { background-image: url("/assets/home-mobile/card-ai-20261016.webp") !important; }
  #sbe-site .hero-search-modes > a.hero-search-mode { background-image: url("/assets/home-mobile/card-map-20261016.webp") !important; }
  #sbe-site #hero-mila-tab { background-image: url("/assets/home-mobile/card-mila-20261016.webp") !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
  /* Deep teal over the lower half of each photo, under the icon and words. */
  #sbe-site .hero-search-mode::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 61, 60, 0) 0, rgba(6, 61, 60, .1) 40%, rgba(4, 46, 45, .78) 100%);
    transition: background .2s ease;
  }
  #sbe-site .hero-search-mode 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, .86);
    color: #fff !important;
  }
  /* Two short, even lines, as on Search Homes: in English "Classic / Search",
     "AI / Search", "Map / Search", "MILA / MATCH"; a longer language uses the card's width. */
  #sbe-site .hero-search-mode span:not(.hero-search-new) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 2.24em !important;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  html[lang="en"] #sbe-site .hero-search-mode span:not(.hero-search-new) { max-width: min(100%, 4.3em); }
  /* The design shows no New tag on the phone cards. */
  #sbe-site .hero-search-mode .hero-search-new { display: none !important; }
  /* The selected mode (AI Search at first): champagne gold. */
  #sbe-site .hero-search-mode[aria-selected="true"] {
    border: 1.5px solid var(--hm-gold) !important;
    color: var(--hm-ink) !important;
    text-shadow: 0 1px 6px rgba(255, 236, 196, .45);
    box-shadow: 0 0 0 1px rgba(217, 172, 84, .25), 0 10px 22px -12px rgba(217, 172, 84, .75) !important;
  }
  #sbe-site .hero-search-mode[aria-selected="true"]::before {
    background: linear-gradient(180deg, rgba(217, 172, 84, .12) 0, rgba(217, 172, 84, .45) 34%, rgba(214, 168, 80, .9) 58%, rgba(222, 180, 96, .97) 100%);
  }
  #sbe-site .hero-search-mode[aria-selected="true"] svg { border-color: var(--hm-ink); background: var(--hm-ink); color: #f2d28c !important; }
  #sbe-site #hero-ai-tab[aria-selected="true"] svg path { fill: currentColor; }
  @media (hover: hover) {
    #sbe-site .hero-search-mode:not([aria-selected="true"]):hover { border-color: rgba(217, 172, 84, .8) !important; }
  }
  #sbe-site .hero-search-mode:focus-visible { outline: 3px solid #f0c46a !important; outline-offset: 2px !important; }

  /* ---- One white search box (and Mila's card in its place) ---- */
  #sbe-site .hero-search-box {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    padding: 5px 5px 5px 18px !important;
    border-radius: 999px !important;
    background: #fbf8f2 !important;
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .7) !important;
  }
  html[dir="rtl"] #sbe-site .hero-search-box { padding: 5px 18px 5px 5px !important; }
  #sbe-site .hero-search-spark { width: 22px !important; height: 22px !important; color: var(--hm-gold) !important; }
  #sbe-site .hero-search-box input,
  #sbe-site .hero-search-box .idx-autocomplete { flex: 1 1 auto !important; min-width: 0 !important; }
  #sbe-site .hero-search-box input { height: 48px !important; padding: 0 2px !important; font-size: 16px !important; color: #17282c !important; }
  #sbe-site .hero-search-box input::placeholder { color: #6b7678 !important; }
  /* The button keeps its words for screen readers; on screen, a gold circle with an arrow. */
  #sbe-site .hero-search-submit {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !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 .hero-search-submit::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 .hero-search-submit::after { transform: scaleX(-1); }
  #sbe-site .hero-search-submit:focus-visible { outline: 3px solid var(--hm-ink) !important; outline-offset: 2px !important; }
  #sbe-site .hero-mila-card { margin-top: 12px !important; border-radius: 18px !important; }
  /* From the deep teal top to the champagne page (Ekin, 16 October 2026): no
     gold line and no blend of the two colours (it turned muddy); the page
     comes up over the top's last deep teal as a sheet with rounded corners
     and a soft shadow, then about 30px before The Ekin Collection (or, while
     it has no homes, the next section). */
  #sbe-site .hero-band { display: none !important; }
  #sbe-site .ekin-collection,
  #sbe-site .ekin-collection[hidden] + .home-lifestyle {
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * var(--hm-sheet)) !important;
    padding-top: 30px !important;
    border-radius: var(--hm-sheet) var(--hm-sheet) 0 0;
    box-shadow: 0 -14px 30px -20px rgba(0, 22, 26, .6);
  }
  #sbe-site .hero-mila-start { border-radius: 999px !important; background: var(--hm-gold) !important; }

  @media (prefers-reduced-motion: reduce) {
    #sbe-site .hero-search-mode::before { transition: none; }
  }
}