/**
 * Villa Details section — image + heading + CTA on the left, a "best value"
 * heading, a spec list and an SEO paragraph on the right, split by a hairline.
 * Depends on villa-home.css.
 *
 * @package Villa_Addon
 */

.vo-details { padding-block: var(--sp-160); padding-inline: var(--pad-x); }

/* The grid is a .vo-container, which also supplies --pad-x; the section already
   pads, so zero the container's inline padding or the content double-insets and
   reads narrower than every other section. */
.vo-details .vo-container { padding-inline: 0; }

.vo-details__grid { display: grid; grid-template-columns: 442fr 1px 737fr; gap: clamp(40px, 5vw, 80px); }

.vo-details__rule { background: var(--line); width: 1px; }

.vo-details__l { display: flex; flex-direction: column; overflow: hidden; }
.vo-details__figure { overflow: hidden; margin: 0; }
.vo-details__l img { width: 100%; aspect-ratio: 1 / .77; object-fit: cover; display: block; }

.vo-details__dh3 {
  margin: 44px 0 0;
  font-family: var(--display);
  font-weight: 600;
  color: var(--dark);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 34px);
  line-height: 1.1;
}

/* Sit the CTA directly under the heading. (Was margin-top:auto, which — because
   the grid stretches this column to match the taller specs column — shoved the
   button ~460px down, far below the text.) */
.vo-details__l .vo-btn { margin-top: 36px; align-self: flex-start; }

.vo-details__dh2 {
  margin: 0 0 70px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--dark);
  font-size: clamp(2.1rem, 1.2rem + 3.1vw, 60px);
  line-height: 1.1;
}

.vo-specs { margin: 0 0 18px; }
.vo-specs .spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.vo-specs .spec:first-of-type { border-top: 1px solid var(--line); }
.vo-specs dt { color: var(--body); font-size: 18px; margin: 0; }
.vo-specs dd { margin: 0; color: var(--dark); font-weight: 500; font-size: 18px; text-align: right; }

.vo-details__seo { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: var(--body); }

@media (max-width: 1340px) {
  .vo-details__grid { grid-template-columns: 1fr 1px 1.6fr; gap: 48px; }
}

@media (max-width: 900px) {
  .vo-details__grid { grid-template-columns: 1fr; gap: 48px; }
  .vo-details__rule { display: none; }
  .vo-details__l .vo-btn { margin-top: 32px; }
  .vo-details__dh2 { margin-bottom: 40px; }
}