/* ==========================================================================
   Johannesdal Village – Home page redesign
   Extends gallery.css (load gallery.css first): same brand variables, buttons,
   hero, tiles and lightbox. Everything here is scoped under .jv-home.
   ========================================================================== */
.jv-home { --jv-section-pad: clamp(56px, 8vw, 104px); }
.jv-home section { scroll-margin-top: 16px; }
.jv-home p { margin: 0 0 1em; }

/* ---------- Hero ---------- */
.jv-hero--home { min-height: min(90vh, 800px); }
.jv-hero--home .jv-hero__inner { padding-top: 140px; padding-bottom: 0; }
.jv-hero--home h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); margin-top: .3em; }
.jv-hero--home::after { background: linear-gradient(90deg, rgba(29,33,38,.82) 0%, rgba(29,33,38,.45) 48%, rgba(29,33,38,.05) 80%), linear-gradient(180deg, rgba(29,33,38,0) 55%, rgba(29,33,38,.75) 100%); }
.jv-facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px;
    border-top: 1px solid rgba(255,255,255,.22);
}
.jv-fact { padding: 20px 20px 26px 0; color: rgba(255,255,255,.85); font-size: .85rem; letter-spacing: .06em; line-height: 1.4; }
.jv-fact strong { display: block; color: #fff; font-weight: 600; font-size: 1.35rem; letter-spacing: .02em; margin-bottom: 4px; }
.jv-fact + .jv-fact { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); }
@media (max-width: 900px) {
    .jv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
    .jv-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .jv-fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
    .jv-fact { padding: 14px 12px 16px 0; font-size: .78rem; }
    .jv-fact + .jv-fact { padding-left: 14px; }
    .jv-fact strong { font-size: 1.1rem; }
}

@media (max-width: 760px) {
    .jv-hero--home { min-height: 0; }
    .jv-hero--home .jv-hero__inner { padding-top: 96px; }
    .jv-hero--home::after { background: linear-gradient(180deg, rgba(29,33,38,.35) 0%, rgba(29,33,38,.7) 45%, rgba(29,33,38,.9) 100%); }
    .jv-hero--home .jv-eyebrow { white-space: normal; font-size: .66rem; letter-spacing: .16em; }
    .jv-hero--home h1 { font-size: 2.35rem; letter-spacing: .03em; }
}

/* ---------- Generic section ---------- */
.jv-block { padding: var(--jv-section-pad) 0; }
.jv-block--sand { background: var(--jv-sand); }
.jv-block--dark { background: var(--jv-gunmetal); color: #fff; }
.jv-block--dark .jv-section__title, .jv-block--dark h2 { color: #fff; }
.jv-block--dark .jv-section__title::before { background: #fff; }
.jv-block--dark .jv-section__intro { color: rgba(255,255,255,.8); }
.jv-kicker { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--jv-fulvous); margin-bottom: 12px; }
.jv-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 300; line-height: 1.55; color: #4a5058; max-width: 44em; }
.jv-block--dark .jv-lead { color: rgba(255,255,255,.88); }
.jv-more { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jv-olive) !important; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.jv-more:hover { color: var(--jv-fulvous) !important; }
.jv-more svg { width: 1em; height: 1em; }

/* ---------- Why live here ---------- */
.jv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
@media (max-width: 1100px) { .jv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jv-cards { grid-template-columns: 1fr; gap: 20px; } }
.jv-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 var(--jv-line), 0 10px 30px rgba(41,47,54,.06); display: flex; flex-direction: column; }
.jv-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: #e9e6df; }
.jv-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.jv-card:hover .jv-card__img img { transform: scale(1.04); }
.jv-card__body { padding: 22px 22px 26px; }
.jv-card h3 { font-family: 'Josefin Sans', sans-serif; font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: var(--jv-gunmetal); padding: 0; }
.jv-card p { font-size: .95rem; line-height: 1.55; color: #5c636b; margin: 0; }

/* ---------- Drive-through feature ---------- */
.jv-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.jv-split--rev { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) { .jv-split, .jv-split--rev { grid-template-columns: 1fr; } }
.jv-videocard { position: relative; aspect-ratio: 16 / 9; }
.jv-videocard.jv-tile { border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.jv-videocard.jv-tile--video a::after { width: 88px; height: 88px; margin: -44px 0 0 -44px; background-size: 40px; }
.jv-videocard figcaption { opacity: 1 !important; transform: none !important; display: block !important; }
.jv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Homes & plots ---------- */
.jv-status { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.jv-status li { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1em .45em; border-radius: 999px; background: #fff; border: 1px solid var(--jv-line); font-size: .9rem; }
.jv-status strong { font-size: 1.05rem; }
.jv-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.jv-dot--available { background: #5f7a2e; } .jv-dot--reserved { background: var(--jv-fulvous); } .jv-dot--sold { background: #b9b4a8; }
.jv-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 36px 0 28px; }
@media (max-width: 760px) { .jv-types { grid-template-columns: 1fr; } }
.jv-type { background: #fff; border-radius: 14px; padding: 28px; border: 1px solid var(--jv-line); }
.jv-type h3 { font-family: 'Josefin Sans', sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; padding: 0; color: var(--jv-gunmetal); }
.jv-type p { color: #5c636b; line-height: 1.55; margin: 0 0 .6em; }
.jv-type ul { margin: 12px 0 0; padding-left: 1.1em; color: #5c636b; line-height: 1.6; }

.jv-note { font-size: .85rem; color: #6b7178; margin: 18px 0 0; }
.jv-forsale__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 28px; background: #fff; border: 1px solid var(--jv-line); border-radius: 14px; }
.jv-forsale__cta .jv-note { margin: 0; flex: 1 1 280px; }
.jv-forsale__cta .jv-btn svg { width: 1em; height: 1em; }
.jv-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }

/* ---------- Progress strip ---------- */
.jv-headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; }

/* ---------- Location ---------- */
.jv-prox { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.jv-prox li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0 9px; border-bottom: 1px solid var(--jv-line); font-size: .95rem; }
.jv-prox span:last-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .jv-prox { grid-template-columns: 1fr; } }
.jv-map { position: relative; border-radius: 14px; overflow: hidden; min-height: 420px; height: 100%; background: #e9e6df; box-shadow: 0 10px 30px rgba(41,47,54,.08); }
.jv-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jv-address { font-style: normal; margin-top: 18px; color: #5c636b; }

/* ---------- Contact ---------- */
.jv-agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
@media (max-width: 1000px) { .jv-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .jv-agents { grid-template-columns: 1fr; } }
.jv-agent { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px; }
.jv-agent img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.jv-agent b { display: block; font-weight: 600; letter-spacing: .04em; color: #fff; }
.jv-agent small { display: block; color: rgba(255,255,255,.65); font-size: .78rem; margin: 2px 0 6px; }
.jv-agent a { color: #f1d9bf !important; font-size: .9rem; margin-right: 12px; }
.jv-agent a:hover { color: #fff !important; }

/* avoid an orphan tile in the 2-column mobile progress grid */
@media (max-width: 600px) { .jv-home #progress .jv-tile:last-child { grid-column: span 2; } }

/* ---------- Hero slider (2 images crossfade under static text) ---------- */
.jv-hero__slider { position: absolute; inset: 0; pointer-events: none; }
.jv-hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.jv-hero__slide { position: absolute; inset: 0; }
.jv-hero__slide { opacity: 0; transition: opacity 1.6s ease; }
.jv-hero__slide.is-active { opacity: 1; }
.jv-hero__slide .jv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jv-hero__slide .jv-hero__img { object-fit: cover; transform: scale(1.0); transform-origin: 50% 50%; transition: transform 8s ease-out; }
.jv-hero__slide.is-active .jv-hero__img { transform: scale(1.05); }
.jv-hero__slide--2 .jv-hero__img { object-position: 46% 42%; transform-origin: 46% 42%; }
.jv-hero__slide--1 .jv-hero__img { object-position: 56% 58%; transform-origin: 56% 58%; }
.jv-hero--home::after { z-index: -1; }
.jv-hero__controls { position: absolute; right: 24px; top: 24px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.jv-hero__arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(29,33,38,.35); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.jv-hero__arrow:hover { background: rgba(29,33,38,.65); border-color: #fff; }
.jv-hero__arrow svg { width: 18px; height: 18px; }
.jv-hero__pause .jv-i-play, .jv-hero__slider.is-paused .jv-hero__pause .jv-i-pause { display: none; }
.jv-hero__slider.is-paused .jv-hero__pause .jv-i-play { display: block; }
.jv-hero__dots { display: flex; gap: 4px; padding: 0 4px; }
.jv-hero__dot { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.jv-hero__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: background .2s, transform .2s; }
.jv-hero__dot[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
.jv-hero__arrow:focus-visible, .jv-hero__dot:focus-visible { outline: 2px solid #E18426; outline-offset: 2px; }
@media (max-width: 767px) {
    .jv-hero__controls { top: 12px; right: 12px; gap: 4px; }
    .jv-hero__arrow { width: 34px; height: 34px; }
    .jv-hero__slide--2 .jv-hero__img { object-position: 40% 40%; }
    .jv-hero__slide--1 .jv-hero__img { object-position: 54% 55%; }
}
@media (prefers-reduced-motion: reduce) {
    .jv-hero__slide { transition: opacity .01s; }
    .jv-hero__slide .jv-hero__img, .jv-hero__slide.is-active .jv-hero__img { transition: none; transform: none; }
}
@media (max-width: 600px) {
    .jv-forsale__cta { padding: 18px; }
    .jv-forsale__cta .jv-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.35; }
}