/* ==========================================================================
   Landing page only — components that appear nowhere else.
   Loaded after base.css.
   ========================================================================== */

/* The landing hero says "Welcome to / Haley's / Place" rather than the
   hair site's three-line treatment, so the script sizes differ. */
.hero__script-bottom .heart { font-size: 0.5em; vertical-align: middle; }

/* --------------------------------------------------------------------------
   The fork: two large cards routing to hair and food
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.split-card {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  gap: 18px;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  overflow: hidden;
}

.split-card--dark {
  background: var(--card-dark, #1D1D1D);
  color: #E6E1D9;
}
.split-card--dark .split-card__title { color: #FFFFFF; }

.split-card--light {
  background: var(--brand-tint);
  color: var(--body);
}

.split-card__script {
  font-family: var(--font-script);
  color: var(--brand);
  font-size: 30px;
  line-height: 1;
  margin: 0 0 2px;
}
.split-card__script--lg { font-size: 40px; margin: -2px 0 14px; }
.split-card__script .heart { font-size: 0.45em; vertical-align: middle; }

.split-card__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.05;
  margin: 0;
}

.split-card__text {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 34ch;
}

/* Two stacked photos, framed in brand gold like the approved design. */
.split-card__media {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  align-content: center;
}
.split-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--brand);
  aspect-ratio: 4 / 3;
}


.split-card__photo--hair-left { object-position: 16% center; }
.split-card__photo--hair-right { object-position: 86% center; }
.split-card__photo--food-top { object-position: 72% center; }
.split-card__photo--food-bottom { object-position: 18% center; }

/* --------------------------------------------------------------------------
   About row — three points plus the round brand medallion
   -------------------------------------------------------------------------- */
.stylist__points--three { grid-template-columns: repeat(3, 1fr); }

/* The landing About row has three children (copy, points, medallion) rather
   than the hair site's photo-first layout, so it needs its own columns —
   otherwise the copy inherits the 200px photo column and wraps badly. */
.stylist { grid-template-columns: 1.05fr 1.5fr auto; align-items: center; }

.medallion {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--brand);
  color: #FFFFFF;
  display: grid;
  place-content: center;
  text-align: center;
  justify-self: end;
  flex: none;
}
.medallion span {
  font-family: var(--font-script);
  font-size: 26px;
  line-height: 1;
}
.medallion small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Book / order banner
   -------------------------------------------------------------------------- */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: 22px 26px;
}

.cta-banner__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
}

.cta-banner__copy { flex: 1; min-width: 0; }
.cta-banner__copy h2 { font-size: 19px; margin-bottom: 2px; }
.cta-banner__copy p  { font-size: 13.5px; margin: 0; }

.cta-banner .btn { flex: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .stylist { grid-template-columns: 1fr auto; }
  .stylist__points--three { grid-column: 1 / -1; }
  .medallion { justify-self: center; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 660px) {
  .split-card { grid-template-columns: 1fr; padding: 24px 20px; }
  .split-card__media { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .split-card__text { max-width: none; }

  .stylist__points--three { grid-template-columns: 1fr; }

  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-banner .btn { width: 100%; }
}