/* ═══════════════════════════════════════════════════
   ZV Holdings — Castor Villas Page Styles
   ═══════════════════════════════════════════════════ */

/* ═══ Hero ═══ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  background: url('../images/hero-castor.jpg') center 22% / cover no-repeat;
  animation: heroZoom 18s var(--ease) forwards;
  will-change: transform;
}

@keyframes heroZoom {
  from { scale: 1.07; }
  to { scale: 1; }
}

.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg,
    rgba(12, 12, 10, 0.08) 0%,
    rgba(12, 12, 10, 0.45) 45%,
    rgba(12, 12, 10, 0.93) 78%,
    var(--ink) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
  animation: heroRise 0.9s 0.25s both;
}

@keyframes heroRise {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0; }
}

.hero-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.hero-content h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;

  & em {
    font-style: italic;
    color: var(--gold-lt);
  }
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  font-weight: 300;
  color: rgba(240, 235, 224, 0.6);
  margin-bottom: 1.8rem;

  & span {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &::before {
      content: '';
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
    }

    &:first-child::before {
      display: none;
    }
  }
}

.hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Hero stat strip */
.hero-strip {
  position: relative;
  z-index: 2;
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--border);
}

.hs {
  padding: 1.2rem 0.6rem;
  text-align: center;
  border-right: 1px solid var(--border);

  &:last-child {
    border-right: none;
  }
}

.hs-v {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
}

.hs-l {
  margin-top: 0.3rem;
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ═══ Gallery ═══ */

.gallery-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 300px 260px;
  gap: 3px;
}

.gc {
  position: relative;
  overflow: hidden;
  cursor: pointer;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease), filter var(--dur-med);
  }

  &:hover img {
    transform: scale(1.045);
    filter: brightness(1.05);
  }
}

.gc-span {
  grid-row: 1 / 3;
}

.gc-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 1.1rem 0.8rem;
  background: linear-gradient(to top, rgba(12, 12, 10, 0.82), transparent);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, 0.82);
  pointer-events: none;
  opacity: 0;
  translate: 0 4px;
  transition: opacity var(--dur-med) var(--ease), translate var(--dur-med) var(--ease);

  .gc:hover & {
    opacity: 1;
    translate: 0;
  }
}

/* ═══ Floor Plan ═══ */

.fp-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.fp-col {
  padding: 5rem clamp(1.2rem, 4vw, 3.5rem);

  & + & {
    border-left: 1px solid var(--border);
  }
}

/* Level cards */
.lv-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.lv {
  padding: 1.05rem 1.2rem;
  border-left: 2px solid transparent;
  background: var(--panel);
  transition: border-color var(--dur-fast), background var(--dur-fast), translate var(--dur-fast);
  cursor: default;

  &:hover,
  &.highlight {
    border-left-color: var(--gold);
    background: #26261f;
    translate: 2px 0;
  }
}

.lv-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.38rem;
}

.lv-name {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--cream);
}

.lv-sf {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.lv-rooms {
  font-size: 0.77rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

.lv-badge {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 0.2rem 0.52rem;
}

/* Spec table */
.spec-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.8rem;

  & tr {
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top: 1px solid var(--border);
    }
  }

  & td {
    padding: 0.72rem 0;
    font-size: 0.82rem;

    &:first-child {
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      width: 52%;
    }

    &:last-child {
      font-family: var(--serif);
      font-size: 0.96rem;
      font-weight: 500;
      color: var(--cream);
      text-align: right;
    }
  }
}

/* Floor plan gate */
.fp-gate {
  margin-top: 1.8rem;
}

.fp-thumb-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);

  & img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: filter 0.4s;
  }

  &.locked img {
    filter: blur(8px) brightness(0.45);
  }
}

.fp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(12, 12, 10, 0.4);
  backdrop-filter: blur(1px);
  transition: opacity var(--dur-med);

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  & p {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(240, 235, 224, 0.8);
    text-align: center;
  }
}

.fp-form {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 380px;

  & input {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 300;
    padding: 0.78rem 0.95rem;
    border: 1px solid rgba(240, 235, 224, 0.18);
    background: rgba(240, 235, 224, 0.06);
    color: var(--cream);
    outline: none;
    appearance: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    min-width: 0;

    &::placeholder { color: var(--muted); }

    &:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.08);
    }
  }

  & button {
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--ink);
    border: none;
    padding: 0.78rem 1.05rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast);
    flex-shrink: 0;

    &:hover { background: var(--gold-lt); }
  }
}

.fp-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.fp-success-text {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.fp-success img {
  width: 100%;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}

.fp-note {
  margin-top: 0.85rem;
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

.fp-err {
  display: none;
  font-size: 0.68rem;
  color: #e07070;
  margin-top: -0.2rem;
}

/* ═══ Finishes ═══ */

.fin-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2rem;
}

.fin {
  padding: 1.8rem 1.6rem 1.8rem 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid transparent;
  transition: translate var(--dur-fast);

  &:nth-child(3n) {
    padding-right: 0;
  }

  &:hover {
    translate: 0 -2px;
  }
}

.fin-cat {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 0.45rem;
}

.fin-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.fin-desc {
  font-size: 0.79rem;
  font-weight: 300;
  color: #565250;
  line-height: 1.65;
}

/* ═══ Neighborhood ═══ */

.nbhd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 2rem;
}

.nbhd-text {
  & .lead {
    max-width: none;
    margin-bottom: 1.5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.nbhd-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nbhd-card {
  border-left: 2px solid var(--border);
  padding: 0.9rem 1.2rem;
  background: var(--charcoal);
  transition: border-color var(--dur-fast), translate var(--dur-fast);

  &:first-child {
    border-left-color: var(--gold);
  }

  &:hover {
    border-left-color: var(--gold);
    translate: 4px 0;
  }
}

.nbhd-card-label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.nbhd-card-value {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
}

/* ═══ Reserve Strip ═══ */

.reserve {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  padding: 2.8rem clamp(1.2rem, 5vw, 4rem);
  background: var(--charcoal);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  & h3 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 0.35rem;
  }

  & p {
    font-size: 0.83rem;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
  }
}

.res-form {
  display: flex;
  gap: 0;
  min-width: 310px;

  & input {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 300;
    padding: 0.82rem 0.95rem;
    border: 1px solid rgba(240, 235, 224, 0.14);
    background: rgba(240, 235, 224, 0.05);
    color: var(--cream);
    outline: none;
    appearance: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    min-width: 0;

    &::placeholder { color: var(--muted); }

    &:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.08);
    }
  }

  & button {
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--ink);
    border: none;
    padding: 0.82rem 1.2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast);

    &:hover { background: var(--gold-lt); }
  }
}

.res-ok {
  display: none;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--gold);
  margin-top: 0.5rem;
}

/* ═══ Contact (Warm BG) ═══ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  margin-top: 2.5rem;
}

.c-info {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.c-kv {
  & p:first-child {
    font-size: 0.59rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 0.2rem;
  }

  & p:last-child {
    font-size: 0.87rem;
    font-weight: 300;
    color: var(--ink);
  }

  & a {
    color: var(--gold-dk);
  }
}

.c-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.c-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.c-form input,
.c-form textarea,
.c-form select {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  padding: 0.78rem 0.9rem;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--ink);
  outline: none;
  appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

  &:focus {
    border-color: var(--gold-dk);
    box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.1);
  }

  &::placeholder {
    color: #999;
  }
}

.c-form textarea {
  resize: vertical;
  min-height: 96px;
}

.c-form select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B7A42' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

.c-ok {
  display: none;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gold-dk);
  margin-top: 0.2rem;
}

/* ═══ Responsive — Castor Villas ═══ */

@media (max-width: 960px) {
  .hero-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .hs:nth-child(3) {
    border-right: none;
  }

  .hs:nth-child(n+4) {
    border-top: 1px solid var(--border);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gc-span {
    grid-row: auto;
  }

  .gc img,
  .gc-span img {
    height: 260px;
  }

  .fp-wrap {
    grid-template-columns: 1fr;
  }

  .fp-col + .fp-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .fin-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .nbhd-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .reserve {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .res-form {
    min-width: unset;
    flex-direction: column;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .fin-wrap {
    grid-template-columns: 1fr;
  }

  .c-row {
    grid-template-columns: 1fr;
  }

  .hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs:nth-child(2n) {
    border-right: none;
  }

  .hs:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
}