/* Letalife — home page styles (.home-v2).
   Also contains the shared .home-v2 / .areas-v2 dual-selector rules; areas.html
   loads this file too so those shared rules apply to the areas directory page. */

/* ===================== DIRECTION A — HOME (LETAL-39) =====================
   Faithful 1:1 port of the locked mockup (mockups/direction-a-warm-editorial.html),
   scoped under .home-v2 so it can't touch legacy styles. Values mirror the mockup
   exactly — do not "tidy" them, that's what caused the earlier drift. */

/* Full-bleed: break out of main.container to viewport width, and pull up by
   main's py-4 top padding (1.5rem) so the gradient sits flush under the nav
   (kills the cream seam). NO overflow:hidden here — it was clipping the
   typeahead dropdown; the decorative art is in the right column and doesn't
   need it. Content is re-constrained by an inner .container. */
.home-v2 .hero {
   position: relative;
   padding: 4.5rem 0 3.5rem;
   margin-top: -1.5rem;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw)
}

.home-v2 .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background:
      radial-gradient(60% 70% at 82% 18%, rgba(250, 214, 220, .55), transparent 60%),
      radial-gradient(55% 65% at 12% 90%, rgba(211, 231, 245, .6), transparent 60%);
}

.home-v2 .hero-grid {
   position: relative;
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 2.5rem;
   align-items: center
}

.home-v2 .hero h1 {
   font-size: clamp(2.1rem, 5vw, 3.25rem);
   line-height: 1.05;
   font-weight: 900;
   letter-spacing: -.04em;
   color: var(--ll-slate-900);
   margin: 0
}

.home-v2 .hero h1 .accent {
   color: var(--ll-blue-700);
   white-space: nowrap
}

.home-v2 .hero-sub {
   font-size: 1.075rem;
   color: var(--ll-slate-600);
   margin: 1.1rem 0 1.6rem;
   max-width: 42ch
}

.home-v2 .hero-sub strong {
   color: var(--ll-slate-900);
   font-weight: 800
}

.home-v2 .search-shell {
   position: relative;
   max-width: 460px
}

.home-v2 .searchbar {
   display: flex;
   align-items: center;
   gap: .5rem;
   background: var(--ll-white);
   border: 1px solid var(--ll-blue-100);
   border-radius: var(--ll-r-pill);
   padding: .5rem .5rem .5rem 1.2rem;
   box-shadow: var(--ll-shadow-lg)
}

.home-v2 .searchbar svg {
   flex: none;
   color: var(--ll-slate-400)
}

.home-v2 .searchbar input {
   border: none;
   outline: none;
   font-family: inherit;
   font-size: 1rem;
   flex: 1;
   background: transparent;
   color: var(--ll-slate-800)
}

.home-v2 .searchbar input::placeholder {
   color: var(--ll-slate-400)
}

.home-v2 .search-hint {
   font-size: .82rem;
   color: var(--ll-muted);
   margin-top: .7rem;
   padding-left: .3rem
}

.home-v2 .trust {
   display: flex;
   gap: 1.4rem;
   margin-top: 1.8rem;
   flex-wrap: wrap
}

.home-v2 .trust span {
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   font-size: .82rem;
   font-weight: 600;
   color: var(--ll-slate-700)
}

.home-v2 .trust .dot {
   width: 1.4rem;
   height: 1.4rem;
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
   background: var(--ll-green-100);
   color: var(--ll-green-700);
   font-size: .7rem
}

.home-v2 .hero-art {
   position: relative;
   height: 340px
}

.home-v2 .float-card {
   position: absolute;
   background: var(--ll-surface);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   box-shadow: var(--ll-shadow-md);
   padding: .85rem;
   width: 215px
}

.home-v2 .float-card .thumb {
   height: 96px;
   border-radius: .5rem;
   background: linear-gradient(135deg, var(--ll-blue-100), var(--ll-blue-50));
   display: grid;
   place-items: center;
   color: var(--ll-blue-500);
   margin-bottom: .6rem
}

.home-v2 .float-card .fc-price {
   font-weight: 800;
   color: var(--ll-blue-900);
   font-size: 1.05rem
}

.home-v2 .float-card .fc-meta {
   font-size: .76rem;
   color: var(--ll-muted)
}

.home-v2 .fc-1 {
   top: 10px;
   right: 18px;
   transform: rotate(3deg);
   animation: bobA 6s ease-in-out infinite
}

.home-v2 .fc-2 {
   top: 150px;
   right: 120px;
   transform: rotate(-4deg);
   z-index: 2;
   animation: bobA 6s ease-in-out infinite .8s
}

.home-v2 .fc-2 .thumb {
   background: linear-gradient(135deg, var(--ll-rose-100), var(--ll-rose-50));
   color: var(--ll-rose-600)
}

.home-v2 .fc-3 {
   top: 235px;
   right: 0;
   transform: rotate(2deg);
   animation: bobA 6s ease-in-out infinite 1.5s
}

.home-v2 .fc-3 .thumb {
   background: linear-gradient(135deg, var(--ll-green-100), var(--ll-green-50));
   color: var(--ll-green-700)
}

@keyframes bobA {

   0%,
   100% {
      translate: 0 0
   }

   50% {
      translate: 0 -10px
   }
}

.home-v2 section {
   padding: 3.25rem 0
}

/* Shared by home and areas directory pages — both use these sec-head/sec-title
   patterns for section introductions. */
.home-v2 .sec-head,
.areas-v2 .sec-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 1.6rem;
   gap: 1rem;
   flex-wrap: wrap
}

.home-v2 .sec-eyebrow {
   font-size: .74rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--ll-rose-600);
   margin-bottom: .35rem
}

.home-v2 .sec-title,
.areas-v2 .sec-title {
   font-size: 1.7rem;
   font-weight: 900;
   letter-spacing: -.03em;
   color: var(--ll-blue-700)
}

.home-v2 .sec-link {
   font-size: .85rem;
   font-weight: 700;
   color: var(--ll-blue-700)
}

.home-v2 .sec-link:hover {
   color: var(--ll-blue-900)
}

.home-v2 .how {
   background: linear-gradient(180deg, var(--ll-rose-50), #fff);
   border: 1px solid var(--ll-rose-100);
   border-radius: var(--ll-r-lg);
   padding: 3rem 1.5rem
}

.home-v2 .steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem
}

.home-v2 .step {
   text-align: center;
   padding: 0 .5rem
}

.home-v2 .step .num {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   margin: 0 auto .9rem;
   display: grid;
   place-items: center;
   font-weight: 900;
   font-size: 1.2rem;
   color: var(--ll-white);
   background: var(--ll-blue-700);
   box-shadow: 0 8px 18px -6px rgba(43, 103, 168, .5)
}

.home-v2 .step:nth-child(2) .num {
   background: var(--ll-rose-600);
   box-shadow: 0 8px 18px -6px rgba(200, 81, 107, .5)
}

.home-v2 .step:nth-child(3) .num {
   background: var(--ll-green-600);
   box-shadow: 0 8px 18px -6px rgba(22, 163, 74, .5)
}

.home-v2 .step h3 {
   font-size: 1.05rem;
   font-weight: 800;
   margin-bottom: .3rem;
   letter-spacing: -.01em;
   color: var(--ll-slate-900)
}

.home-v2 .step p {
   font-size: .88rem;
   color: var(--ll-slate-600);
   max-width: 30ch;
   margin: 0 auto
}

/* County/area cards grid — shared between home "Browse by county" section and
   the full /areas directory page. Both templates load home.css. */
.home-v2 .areas,
.areas-v2 .areas {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: .9rem
}

.home-v2 .area,
.areas-v2 .area {
   position: relative;
   background: var(--ll-white);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r);
   padding: 1.1rem 1.1rem 1rem;
   box-shadow: var(--ll-shadow-sm);
   transition: transform .15s, box-shadow .15s, border-color .15s;
   overflow: hidden
}

.home-v2 .area::after,
.areas-v2 .area::after {
   content: "";
   position: absolute;
   right: -20px;
   bottom: -20px;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: var(--ll-blue-50);
   transition: transform .25s
}

.home-v2 .area:hover,
.areas-v2 .area:hover {
   transform: translateY(-3px);
   box-shadow: var(--ll-shadow-md);
   border-color: var(--ll-blue-200)
}

.home-v2 .area:hover::after,
.areas-v2 .area:hover::after {
   transform: scale(1.5)
}

.home-v2 .area .an,
.areas-v2 .area .an {
   font-weight: 800;
   font-size: 1rem;
   color: var(--ll-slate-800);
   position: relative
}

.home-v2 .area .ac,
.areas-v2 .area .ac {
   font-size: .8rem;
   color: var(--ll-muted);
   position: relative
}

@media(max-width:900px) {
   .home-v2 .hero-grid {
      grid-template-columns: 1fr
   }

   .home-v2 .hero-art {
      display: none
   }

   .home-v2 .areas,
   .areas-v2 .areas {
      grid-template-columns: repeat(2, 1fr)
   }

   .home-v2 .steps {
      grid-template-columns: 1fr;
      gap: 1.75rem
   }
}

@media(max-width:560px) {
   .home-v2 .areas,
   .areas-v2 .areas {
      grid-template-columns: 1fr
   }
}