/* =================================================================
   Santa Rita Ranch Mega Open House — page-specific styles
   Extends styles.css tokens (Magnolia Realty palette / Fraunces + Inter)
   ================================================================= */

/* ----- Hero ----- */
.oh-hero {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-10);
}
.oh-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.oh-hero h1 { font-size: var(--text-3xl); font-weight: 300; letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.oh-hero h1 em { font-style: italic; font-weight: 300; color: var(--color-accent); }
.oh-hero-lede { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 52ch; }

.oh-event-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-8);
}
.oh-event-item { display: flex; flex-direction: column; gap: 0.2rem; }
.oh-event-item .l { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); }
.oh-event-item .v { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-primary); }

.oh-hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.oh-hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.oh-hero-photo::after {
  content: '';
  position: absolute;
  inset: auto auto -18px -18px;
  width: 130px; height: 130px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  z-index: -1;
}
.oh-badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  background: rgba(45, 51, 25, 0.88);
  color: #f6f0e2;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  backdrop-filter: blur(6px);
}
.oh-badge .name { font-family: var(--font-display); font-size: 1.15rem; }
.oh-badge .role { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }

@media (max-width: 820px) {
  .oh-hero-grid { grid-template-columns: 1fr; }
  .oh-hero-photo { order: -1; max-width: 320px; }
}

/* ----- Jump nav pills ----- */
.oh-pillnav {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-3);
}
.oh-pillnav .inner {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}
.oh-pillnav .inner::-webkit-scrollbar { display: none; }
.oh-pill {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.oh-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.oh-pill--accent { border-color: var(--color-accent); color: var(--color-accent-hover); }

/* ----- My story strip ----- */
.oh-story {
  background: var(--color-surface);
}
.oh-story-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: start;
}
.oh-story-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.oh-tag {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 500;
}
@media (max-width: 820px) { .oh-story-grid { grid-template-columns: 1fr; } }

/* ----- Lead capture form ----- */
.oh-form-section {
  background: #2d3319;
  color: #f6f0e2;
  --color-accent: #d9cfab;
  --color-accent-hover: #efe6c8;
}
.oh-form-section .eyebrow { color: #f6f0e2; opacity: 0.9; }
.oh-form-section .eyebrow::before, .oh-form-section .eyebrow::after { background: #f6f0e2; opacity: 0.9; }
.oh-form-section h2 { color: #f6f0e2; }
.oh-form-section h2 em { color: #f6f0e2; opacity: 0.85; font-style: italic; font-weight: 300; }
.oh-form-section .section-header p { color: rgba(246,240,226,0.78); }

.oh-form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-5);
}
.oh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.oh-field { display: flex; flex-direction: column; gap: var(--space-2); }
.oh-field label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,240,226,0.7); }
.oh-field input, .oh-field select {
  background: rgba(246,240,226,0.08);
  border: 1px solid rgba(246,240,226,0.25);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: #f6f0e2;
  font-size: var(--text-base);
  font-family: var(--font-body);
}
.oh-field select option { color: #1f2216; }
.oh-field input::placeholder { color: rgba(246,240,226,0.45); }
.oh-field input:focus, .oh-field select:focus { outline: 2px solid var(--color-accent); border-color: transparent; }

.oh-radio-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.oh-radio-group label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.6rem 1rem;
  border: 1px solid rgba(246,240,226,0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.oh-radio-group input { accent-color: var(--color-accent); }
.oh-radio-group label:has(input:checked) { border-color: var(--color-accent); background: rgba(28,28,23,0.07); }

.oh-form .btn--accent { width: 100%; justify-content: center; padding: 1rem; font-size: var(--text-base); margin-top: var(--space-2); }
.oh-form-note { text-align: center; font-size: var(--text-xs); color: rgba(246,240,226,0.55); margin-top: var(--space-1); }
.oh-honey { position: absolute; left: -9999px; }

/* ----- Home group sections ----- */
.oh-group { }
.oh-group-header { text-align: left; max-width: 720px; margin: 0 0 var(--space-10); }
.oh-group-header .eyebrow { justify-content: flex-start; }
.oh-group-header .eyebrow::before { display: none; }
.oh-group-header h2 { font-size: var(--text-2xl); font-weight: 300; margin-bottom: var(--space-3); }
.oh-group-header h2 em { font-style: italic; color: var(--color-accent); }
.oh-group-header p { color: var(--color-text-muted); font-size: var(--text-base); }

.oh-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.oh-home-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.oh-home-card:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oh-home-card .status {
  align-self: flex-start;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.oh-home-card .status.soon { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.oh-home-card .addr { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-text); line-height: 1.2; }
.oh-home-card .price { font-size: var(--text-lg); font-weight: 600; color: var(--color-primary); }
.oh-home-card .specs { font-size: var(--text-sm); color: var(--color-text-muted); }
.oh-home-card .plan { font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-faint); }
.oh-home-card .btn { margin-top: auto; justify-content: center; }

@media (max-width: 1040px) { .oh-home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .oh-home-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .oh-form-row { grid-template-columns: 1fr; }
  .oh-event-card { gap: var(--space-4); }
}

/* ----- Luxury section accent ----- */
.oh-luxury { background: #3f4826; color: #f6f0e2; }
.oh-luxury .eyebrow { color: #d9cfab; }
.oh-luxury .eyebrow::before { background: #d9cfab; }
.oh-luxury .oh-group-header h2 { color: #f6f0e2; }
.oh-luxury .oh-group-header h2 em { color: #d9cfab; }
.oh-luxury .oh-group-header p { color: rgba(246,240,226,0.75); }
.oh-luxury .oh-home-card { background: rgba(246,240,226,0.06); border-color: rgba(246,240,226,0.18); }
.oh-luxury .oh-home-card:hover { border-color: #d9cfab; }
.oh-luxury .oh-home-card .addr { color: #f6f0e2; }
.oh-luxury .oh-home-card .price { color: #e8d9b0; }
.oh-luxury .oh-home-card .specs { color: rgba(246,240,226,0.7); }
.oh-luxury .oh-home-card .plan { color: rgba(246,240,226,0.5); }
.oh-luxury .oh-home-card .status { background: rgba(246,240,226,0.15); color: #f6f0e2; }
.oh-luxury .oh-home-card .status.soon { background: rgba(217,207,171,0.25); color: #f2ecd6; }
.oh-luxury .btn--ghost { border-color: rgba(246,240,226,0.35); color: #f6f0e2; }
.oh-luxury .btn--ghost:hover { border-color: #f6f0e2; color: #f6f0e2; background: rgba(246,240,226,0.1); }

/* ----- License / compliance footer note ----- */
.oh-compliance {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.oh-compliance .fill-me { color: var(--color-accent-hover); font-weight: 600; }