/* D005: search page */

.search-page h1 {
  margin: 32px 0 20px;
}

.filter-card {
  margin-bottom: 32px;
}

.filter-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .filter-row {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--text);
}

.field select,
.field input {
  width: 100%;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding-bottom: 48px;
}

.nanny-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.nanny-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.nanny-card-photo {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 16px;
}

.nanny-card-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 36px;
  color: var(--brand);
}

.nanny-card h2 {
  font-size: 20px;
  margin: 0 0 8px;
}

.nanny-card-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}

.nanny-card-languages {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 8px;
}

.nanny-card-rate {
  font-weight: 600;
  margin: 0 0 16px;
}

.nanny-card-cta {
  width: 100%;
  margin-top: auto;
}

.empty-state {
  text-align: center;
  padding: 48px 0;
}

.empty-state img {
  margin: 0 auto 20px;
}

.empty-state p {
  margin: 0 0 20px;
  color: var(--muted);
}

/* profile: D006 appends here */

/* D006: public profile */
.profile-grid {
  display: grid;
  align-items: start;
  gap: 20px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "badges"
    "contact"
    "portrait"
    "video"
    "about"
    "details"
    "reviews";
  padding: 24px 0;
}
.profile-name { grid-area: name; }
.profile-badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: start;
}
.profile-contact { grid-area: contact; }
.profile-portrait { grid-area: portrait; }
.profile-video { grid-area: video; }
.profile-about { grid-area: about; }
.profile-details { grid-area: details; }
/* Below 1100px this wrapper is invisible (`display: contents`), so contact, portrait and video
   stay direct grid items and keep the areas above. From 1100px it becomes the real right column
   box (see media query): the wrapper groups them so their combined height never has to share a
   grid row with the name/badges/about/details column, which used to force those short rows to
   stretch to match the portrait's height (the "large empty gap" bug). */
.profile-right { display: contents; }
.profile-reviews { grid-area: reviews; }

.profile-portrait img,
.profile-portrait-placeholder {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  margin: 0 auto;
}

.profile-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 96px;
  color: var(--brand);
}

.profile-video-frame {
  background: var(--panel);
  border-radius: 18px;
  padding: 12px;
}
.profile-video-frame video {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.profile-contact-box {
  background: var(--surface);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.profile-contact-number {
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 12px;
}

.profile-details .detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.profile-details .detail-list li {
  color: var(--text);
}
.profile-details .detail-label {
  color: var(--muted);
  margin-right: 6px;
}

.review-card {
  background: var(--panel);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}
.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.review-name {
  font-weight: 600;
  color: var(--ink);
}
.review-reply {
  border-left: 3px solid var(--brand-soft);
  padding-left: 16px;
  margin-top: 12px;
  color: var(--text);
}

@media (min-width: 1100px) {
  .profile-grid {
    position: relative;
    grid-template-areas:
      "name"
      "badges"
      "about"
      "details"
      "reviews";
  }
  .profile-name, .profile-badges, .profile-about, .profile-details {
    padding-right: 412px;
  }
  .profile-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 24px;
    right: 0;
    width: 380px;
  }
  .profile-right > .profile-portrait { order: 1; }
  .profile-right > .profile-video { order: 2; }
  .profile-right > .profile-contact { order: 3; }
}