/* ===========================================================
   Jordan Equestrian, 6050 W 185th Street, Jordan
   =========================================================== */

:root {
  --barn-red: #7a2e2e;
  --barn-red-dark: #5c2222;
  --hunter: #2f3d2a;
  --hunter-dark: #202b1c;
  --cream: #f7f3ea;
  --tan: #e9e0cc;
  --gold: #a9822f;
  --ink: #262420;
  --gray: #6b6558;
  --white: #ffffff;
  --radius: 6px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--hunter-dark);
}

a { color: inherit; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--barn-red);
  color: var(--white);
}
.btn-primary:hover { background: var(--barn-red-dark); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark {
  background: transparent;
  border-color: var(--hunter-dark);
  color: var(--hunter-dark);
}
.btn-outline-dark:hover { background: var(--hunter-dark); color: var(--white); }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(32, 43, 28, 0.92);
  backdrop-filter: blur(6px);
  color: var(--white);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--white);
}
.brand span { color: var(--gold); }
.brand-logo { height: 30px; width: auto; display: block; }
.footer-grid .brand-logo { height: 26px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.nav-links a {
  text-decoration: none;
  color: rgba(255,255,255,0.88);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  padding: 9px 20px;
  font-size: 0.82rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(20,26,17,0.35) 0%, rgba(20,26,17,0.55) 55%, rgba(15,20,13,0.88) 100%), url("images/hero.jpg") center / cover no-repeat;
}
.hero-content {
  color: var(--white);
  /* Only set top/bottom padding here — this element also carries the .container
     class, which supplies the 24px left/right side padding. A shorthand
     "padding: 120px 0 64px" would zero that out and run text edge-to-edge. */
  padding-top: 120px;
  padding-bottom: 64px;
  width: 100%;
}
.hero .eyebrow { color: var(--tan); }
.hero h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 10px 0 14px;
  max-width: 780px;
}
.hero-address {
  font-size: 1.05rem;
  color: var(--tan);
  margin-bottom: 26px;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 28px 0 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.hero-stat {
  min-width: 90px;
}
.hero-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--white);
}
.hero-stat span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tan);
}
.hero-price {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-note {
  margin-top: 18px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
}

/* ---------- Section shared ---------- */
section { padding: 88px 0; }
.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p { color: var(--gray); font-size: 1.02rem; }

.band-dark {
  background: var(--hunter-dark);
  color: var(--tan);
}
.band-dark h2, .band-dark h3 { color: var(--white); }
.band-dark .section-head p { color: rgba(247,243,234,0.75); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.about-grid p { color: var(--ink); margin-bottom: 16px; }
.about-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.about-facts li {
  font-size: 0.95rem;
  padding-left: 22px;
  position: relative;
}
.about-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  background: var(--barn-red);
  border-radius: 50%;
}
.about-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(32,43,28,0.25);
}

/* ---------- Feature cards (upgrades + equestrian) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.feature-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: 0 6px 18px rgba(32,43,28,0.06);
}
.feature-card .icon {
  font-size: 1.6rem;
  margin-bottom: 12px;
  display: inline-block;
}
.feature-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.9rem; color: var(--gray); margin: 0; }

.band-dark .feature-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.band-dark .feature-card h4 { color: var(--white); }
.band-dark .feature-card p { color: rgba(247,243,234,0.72); }
.band-dark .feature-card.equestrian {
  border-color: var(--gold);
  background: rgba(169,130,47,0.12);
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tan);
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.gallery-item:hover img { transform: scale(1.04); }

/* ---------- Floorplans ---------- */
.floorplan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.floorplan-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--white);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 18px rgba(32,43,28,0.06);
}
.floorplan-item img { width: 100%; display: block; }

/* ---------- Virtual Tour (Matterport) ---------- */
.tour-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  background: #000;
}
.tour-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Video ---------- */
/* Self-hosted native <video>, same pattern as customprescotthome.com: the browser
   handles playback and fullscreen directly (including native fullscreen on iOS/
   Android), so there's no third-party player, no iframe restrictions, and no extra
   tap needed to watch fullscreen. */
.video-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  background: #000;
}
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Lightbox ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15,20,13,0.94);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 26px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* ---------- Location ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.location-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.location-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.location-list li span:last-child { color: var(--gray); }
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(32,43,28,0.18);
  border: 6px solid var(--white);
}
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ---------- CTA / Contact ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.agent-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 32px 36px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  text-align: center;
}
.agent-card .agent-photo {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tan);
  margin: 0 auto 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px rgba(169,130,47,0.35);
}
.agent-eyebrow { margin-bottom: 6px; }
/* Specificity beats .band-dark h3 { color: white }, which otherwise made this
   name invisible (white text on the card's white background). */
.agent-card .agent-name {
  font-size: 1.6rem;
  margin-bottom: 2px;
  color: var(--hunter-dark);
}
.agent-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gray);
  margin: 0 0 12px;
}
.agent-reach {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0 0 14px;
}
.agent-reach a { color: var(--ink); }
.agent-reach a:hover { color: var(--barn-red); }
.agent-reach .dot { margin: 0 10px; color: var(--gray); }
.agent-bio {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.55;
  max-width: 400px;
  margin: 0 auto 20px;
}
.agent-btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.agent-btn-row .btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

form.contact-form {
  display: grid;
  gap: 14px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(247,243,234,0.55); }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form button { justify-self: start; }

/* ---------- Footer ---------- */
footer {
  background: var(--hunter-dark);
  color: rgba(247,243,234,0.6);
  padding: 32px 0;
  font-size: 0.82rem;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.footer-grid .brand { font-size: 1rem; }
.disclaimer {
  max-width: 1140px;
  margin: 18px auto 0;
  padding: 0 24px;
  font-size: 0.75rem;
  color: rgba(247,243,234,0.4);
  line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about-grid, .location-grid, .contact-wrap { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .floorplan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: rgba(32, 43, 28, 0.97);
    padding: 20px 24px;
    gap: 18px;
    z-index: 60;
  }
  .nav-toggle { display: block; }
  section { padding: 60px 0; }
  /* On phones, don't force the hero to fill the full screen height. min-height: 100vh
     plus align-items: flex-end was pinning the price/CTA button to the bottom of a
     100vh box, but mobile browsers' address bar eats into that space, so the button
     ended up cut off below the visible area. Sizing to content (with tighter spacing
     below) keeps everything visible without relying on the viewport height at all. */
  .hero {
    min-height: 0;
    /* On a narrow portrait phone, background-size: cover has to crop the hero image down
       to roughly its center 50% of width to fill the box (a wide landscape shot forced
       into a tall narrow box always loses width, not height, to cropping — the full
       vertical extent is already shown). hero.jpg is a close-in shot where that 50%-width
       crop cuts off part of the house, so mobile uses hero-mobile.jpg instead — a wider
       aerial (gallery photo 61) that comfortably fits the entire house, both roof wings
       and the garage, plus the riding arena, in that same crop. background-position-x is
       shifted off-center to 70% because the house sits right-of-center in that photo, not
       in the middle of the frame.
       Also uses a lighter, more back-loaded gradient than the desktop hero: the default
       gradient darkened so aggressively by mid-height that most of the house got crushed
       to near-black on phones, leaving only sky clearly visible ("zoomed in on the roof").
       This version stays lighter through the house and only goes dark in the last
       stretch, right behind the price/buttons where it's needed for contrast. */
    background-image: linear-gradient(180deg, rgba(20,26,17,0.22) 0%, rgba(20,26,17,0.32) 45%, rgba(15,20,13,0.5) 68%, rgba(15,20,13,0.9) 100%), url("images/hero-mobile.jpg");
    background-position: 70% center;
  }
  .hero-content { padding-top: 68px; padding-bottom: 40px; }
  .hero h1 { font-size: 1.9rem; margin: 8px 0 10px; }
  .hero-address { margin-bottom: 16px; }
  .hero-stats { margin: 18px 0 22px; padding-top: 16px; gap: 18px 24px; }
  .hero-price { margin-bottom: 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .lightbox-close { top: 10px; right: 14px; font-size: 2rem; }
}