/* ─────────────────────────────────────────────────────────────
   Larco Capital — landing page v2
   Structure borrowed from compass.com: a full-bleed hero that holds
   the search, a grid of exclusives with per-card photo navigation,
   neighbourhood tiles, and two long link lists above the footer.

   Colour comes from style.css untouched. The one addition is Cinzel,
   standing in for the Trajan-style capitals on the company signage; it
   is held to the wordmark and the hero line.
   ───────────────────────────────────────────────────────────── */

/* ── Section headings ─────────────────────────────────────────────
   Flat 32px across the page, rather than the fluid 32–58px the rest of
   the site scales through. Only the hero line is allowed to be large. */
.section .h2{ font-size:32px; }
/* the note sits under its heading rather than beside it, so it gets the
   full measure back and the heading keeps the row to itself */
.sechead-note{ font-size:16px; max-width:60ch; margin-top:12px; }
/* headings and their notes are held to one line only where the columns
   are wide enough to take it — below 1080px the enquiry grid collapses
   to one column and forcing nowrap would push the page into a
   horizontal scroll */
@media (min-width:1081px){
  /* named rather than blanket .display: the about heading sits in a half
     width column and keeps its own line break, so nowrap would push it
     straight out of the grid */
  .v2ex-head .h2,
  .v2hoods-sec .h2,
  .enquire-copy .h2{ text-wrap:nowrap; }
  .sechead-note{ max-width:none; text-wrap:nowrap; }
}

/* tighter than the rest of the site: v2 has more, shorter sections, and
   the site-wide 64–120px band left them drifting apart */
.section{ padding-block:clamp(44px,5vw,76px); }

/* ── Hero + search ────────────────────────────────────────────── */
.v2hero{
  position:relative;
  min-height:clamp(440px,58vh,600px);
  display:flex;
  /* weighted to the top: the sky above the headline was doing nothing,
     while the search bar wants some image left underneath it */
  align-items:center;
  justify-content:center;
  padding-block:clamp(28px,4vw,56px) clamp(48px,7vw,96px);
  /* not clipped: the suggestions drop past the bottom edge onto the
     section below. The photograph is inset-positioned and cannot spill. */
  overflow:visible;
  border-bottom:var(--rule);
  isolation:isolate;   /* keeps the veil and the panel in one stack */
  z-index:1;
}
.v2hero-img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
}
.v2hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(18,21,26,.58) 0%,
    rgba(18,21,26,.30) 42%,
    rgba(18,21,26,.62) 100%);
}
.v2hero-in{
  width:100%; max-width:1040px;
  padding-inline:var(--gut);
  text-align:center; color:#fff;
}
/* the one headline that carries the brand serif; section headings below
   stay in Jost, because Cinzel is capitals-only and a long sentence set
   in it reads as shouting */
/* Sized for the Spanish, which is the longer of the two: capitals in
   Cinzel run about .72em each and the tracking adds another .045em, so
   "ENCUENTRE SU LUGAR" needs ~14x its font size in width. Above 600px
   the line is held together; below that it may break rather than
   overflow the viewport. */
.v2hero h1{
  font-family:var(--brand-serif);
  font-weight:400;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.12;
  letter-spacing:.045em;
  text-indent:.045em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(12,16,22,.35);
}
@media (min-width:600px){
  .v2hero h1{ text-wrap:nowrap; }
}
/* the search block sits on the image, the way Compass floats its own */
.v2search{
  position:relative; z-index:3;
  margin:clamp(28px,3.6vw,46px) auto 0;
  max-width:602px;
  text-align:left;
}
/* one continuous strip sitting on the bar, not three loose buttons:
   no gaps for the photograph to show through, and the divider between
   inactive tabs is drawn rather than cut out */
.v2tabs{
  display:flex;
  list-style:none; margin:0; padding:0;
  width:max-content;
}
.v2tab{
  appearance:none; border:0; cursor:pointer;
  background:rgba(18,21,26,.72);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.74);
  font-family:var(--label);
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  padding:13px 26px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
/* hairline between two inactive tabs; never beside the selected one */
.v2tab + .v2tab{ box-shadow:inset 1px 0 0 rgba(255,255,255,.14); }
.v2tab[aria-pressed="true"] + .v2tab{ box-shadow:none; }
.v2tab:hover{ background:rgba(18,21,26,.84); color:#fff; }
.v2tab[aria-pressed="true"]{
  background:var(--paper); color:var(--ink);
  box-shadow:none;
}
/* the sell tab is an anchor; it must not inherit link underlines */
.v2tab-link{ display:flex; align-items:center; text-decoration:none; }

.v2search-bar{
  position:relative;   /* the suggestions hang off it */
  display:flex; align-items:stretch;
  background:var(--paper);
  padding:8px;
  gap:8px;
  box-shadow:0 24px 60px rgba(12,16,22,.28);
}
.v2search-field{
  flex:1 1 auto; display:flex; align-items:center; gap:12px;
  padding-inline:16px; min-width:0;
}
.v2search-field input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  font-size:16px; padding-block:14px;
  color:var(--ink);
}
.v2search-field input::placeholder{ color:var(--fog); }
/* Safari and Chrome draw their own clear button on type=search; ours is the
   one that also resets the suggestions */
.v2search-field input::-webkit-search-cancel-button{ appearance:none; display:none; }
.v2search-field input:focus{ outline:none; }
.v2search-bar .btn{ flex:none; }
/* the submit is icon-only now, so it wants to be square rather than wide */
.v2search-go{ padding:14px; aspect-ratio:1; }
.v2search-go svg{ width:20px; height:20px; }
.v2search-clear{
  appearance:none; border:0; background:transparent; cursor:pointer;
  flex:none; display:flex; align-items:center; padding-inline:10px;
  color:var(--fog);
}
.v2search-clear svg{ width:18px; height:18px; }
.v2search-clear:hover{ color:var(--ink); }

/* ── Search suggestions ───────────────────────────────────────── */
.v2sug{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:5;
  background:#fff;
  border:var(--rule);
  box-shadow:0 26px 60px rgba(12,16,22,.24);
  max-height:min(62vh,520px); overflow-y:auto;
  padding-block:10px;
  text-align:left;
}
.v2sug-head{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 6px; padding-inline:18px;
  font-family:var(--label); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fog);
}
.v2sug-head:first-child{ margin-top:4px; }
.v2sug-head svg{ width:16px; height:16px; flex:none; }
.v2sug-row{
  display:flex; align-items:center; gap:12px;
  padding:9px 18px;
  text-decoration:none; color:var(--ink);
}
.v2sug-row > span{ display:flex; flex-direction:column; min-width:0; }
.v2sug-row:hover,
.v2sug-row.is-on{ background:color-mix(in srgb,var(--blue) 7%,transparent); }
.v2sug-t{ font-size:16px; line-height:1.3; }
.v2sug-t b{ font-weight:600; }
.v2sug-m{ font-size:13.5px; color:var(--fog); }
.v2sug-m b{ font-weight:600; color:var(--fog); }
.v2sug-face{
  width:34px; height:34px; flex:none;
  border-radius:50%; object-fit:cover;
}
.v2sug-none{
  margin:6px 0; padding-inline:18px;
  font-size:14.5px; color:var(--fog);
}

/* ── Exclusives rail ──────────────────────────────────────────── */
.v2ex-sec{ background:var(--ground); }
.v2ex-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:clamp(24px,3vw,38px);
  border-bottom:var(--rule);
}
/* three across, two down */
.v2grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.8vw,44px) clamp(16px,1.8vw,26px);
}

.v2card{ display:flex; flex-direction:column; }

/* the media well holds the stack of photographs, the arrows and the
   counter; the anchor inside it is what carries the click through to
   the listing, so the buttons must be its siblings, not its children */
.v2card-media{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--paper);
}
.v2card-img{ position:absolute; inset:0; display:block; }
.v2card-img img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s var(--ease);
}
.v2card-img img.is-on{ opacity:1; }
/* without JS only the first frame is marked, and it is the only one shown */

.v2card-nav{
  position:absolute; top:50%; translate:0 -50%;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  opacity:0;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.v2card-nav svg{ width:18px; height:18px; }
.v2card-nav.is-prev{ left:10px; }
.v2card-nav.is-next{ right:10px; }
.v2card-nav:hover{ background:#fff; }
.v2card-media:hover .v2card-nav,
.v2card-nav:focus-visible{ opacity:1; }

.v2card-count{
  position:absolute; right:10px; top:10px;
  background:rgba(18,21,26,.62);
  color:#fff;
  font-family:var(--label);
  font-size:10.5px; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  padding:4px 8px;
  opacity:0; transition:opacity .3s var(--ease);
}
.v2card-media:hover .v2card-count{ opacity:1; }

/* touch has no hover: leave the controls up */
@media (hover:none){
  .v2card-nav, .v2card-count{ opacity:1; }
}

.v2card-body{ padding-top:14px; }
.v2card-price{
  margin:0;
  font-size:20px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.v2specs{
  list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px;
  margin:9px 0 0; padding:0;
  font-family:var(--label); font-size:13px; color:var(--fog);
}
.v2specs b{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
/* block, or the border draws across the inline run and cuts the specs */
.v2card-addr{
  display:block;
  margin:11px 0 0; padding-top:11px;
  border-top:var(--rule);
  font-size:14.5px; line-height:1.45;
  text-decoration:none;
}
.v2card-addr:hover{ color:var(--blue); }

.v2ex-all{ margin-top:clamp(26px,3vw,40px); }

/* ── Neighbourhood tiles ──────────────────────────────────────── */
.v2hoods-sec{ background:var(--paper); }
.v2hoods{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.7vw,26px);
}
.v2hood{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/10; text-decoration:none; color:#fff;
}
.v2hood img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.v2hood::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,21,26,0) 38%,rgba(18,21,26,.72) 100%);
  transition:background .5s var(--ease);
}
.v2hood:hover img{ transform:scale(1.05); }
.v2hood:hover::after{ background:linear-gradient(180deg,rgba(31,59,216,.12) 30%,rgba(18,21,26,.8) 100%); }
.v2hood-name{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(16px,1.6vw,24px);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.v2hood-name b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(19px,1.7vw,26px); letter-spacing:-.012em;
}
.v2hood-name span{
  font-family:var(--label); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.76);
  white-space:nowrap;
}

/* ── Long link lists (the SEO block above the footer) ─────────────
   Styled after the Compass block: a small bold heading, one line of
   explanation, then four columns of plainly underlined links with a
   generous rhythm. No rules, no accent colour, nothing floated right —
   whitespace does the separating. */
.v2links{ padding-block:clamp(34px,4vw,56px); }
.v2links h2{
  margin:0;
  font-family:var(--sans);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.004em;
  line-height:1.3;
}
.v2links-note{
  margin:10px 0 0;
  font-size:16px;
  color:color-mix(in srgb,var(--ink) 82%,transparent);
  max-width:70ch;
}
.v2linklist{
  list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0;
  columns:4; column-gap:clamp(24px,3vw,56px);
}
.v2linklist li{ break-inside:avoid; margin-bottom:26px; }
.v2linklist a{
  font-size:16px;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:from-font;
}
.v2linklist a:hover{ opacity:.6; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1080px){
  .v2grid,
  .v2hoods{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v2linklist{ columns:3; }
}
@media (max-width:760px){
  .v2hero{ min-height:auto; padding-block:clamp(48px,12vw,72px) clamp(64px,16vw,96px); }
  /* an icon-only submit is narrow enough that the bar can stay one row */
  .v2search-bar{ padding:8px; }
  .v2search-field{ padding-inline:10px; }
  .v2search-field input{ font-size:16px; padding-block:12px; }
  .v2search-go{ padding:12px; }
  .v2tabs{ width:100%; }
  .v2tab{ flex:1 1 auto; padding-inline:10px; text-align:center; }
  .v2grid,
  .v2hoods{ grid-template-columns:minmax(0,1fr); }
  /* one column of links, each padded out to a finger-sized target */
  .v2linklist{ columns:1; }
  .v2linklist li{ margin-bottom:2px; }
  .v2linklist a{ display:inline-block; padding-block:10px; }
  .v2card-addr{ padding-bottom:6px; }
  /* the gallery arrows are permanently visible on touch, so they also
     have to be large enough to hit */
  .v2card-nav{ width:44px; height:44px; }
  .v2card-nav.is-prev{ left:8px; }
  .v2card-nav.is-next{ right:8px; }
}

@media (prefers-reduced-motion:reduce){
  .v2card-img img, .v2hood img{ transition:none; }
}