/**
 * RelPro — Public single profile page.
 *
 * Scoped to .relpro-single-profile to avoid conflicts with the active theme.
 * Design tokens are inherited from relpro.min.css (loaded first).
 *
 * @package RelPro\Directory
 */

/* ── Preview notice ──────────────────────────────────────────────────────────── */
.relpro-preview-notice {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: #fffbe6;
  border: 1px solid #f5c842;
  border-radius: 8px;
  padding: .75rem 1.25rem;
  margin: 1rem auto;
  max-width: 900px;
  font-size: .875rem;
  color: #7a5c00;
  font-weight: 500;
}
.relpro-preview-notice svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: #c49000;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.relpro-single-profile {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  font-family: Inter, system-ui, sans-serif;
  color: var(--relpro-primary, #1C2B3A);
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.relpro-profile-hero {
  background: #fff;
  border: 1px solid var(--relpro-border, #E8E8E0);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.relpro-profile-hero__inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Photo */
.relpro-profile-hero__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--relpro-border, #E8E8E0);
}
.relpro-profile-hero__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--relpro-bg, #FAFAF8);
}
.relpro-profile-hero__photo--placeholder svg {
  width: 48px;
  height: 48px;
  stroke: #C4C4C4;
}

/* Body */
.relpro-profile-hero__body {
  flex: 1;
  min-width: 200px;
}
.relpro-profile-hero__name {
  font-family: Outfit, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .25rem;
  color: var(--relpro-primary, #1C2B3A);
}
.relpro-profile-hero__title {
  font-size: 1rem;
  color: var(--relpro-text-muted, #6B7280);
  margin: 0 0 .75rem;
}

/* Badges */
.relpro-profile-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: .75rem;
}
.relpro-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}
.relpro-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.relpro-badge--verified {
  background: #e8f4fd;
  color: var(--relpro-verified, #1A6FA8);
}
.relpro-badge--verified svg { stroke: var(--relpro-verified, #1A6FA8); }
.relpro-badge--neutral {
  background: var(--relpro-bg, #FAFAF8);
  color: var(--relpro-primary, #1C2B3A);
  border: 1px solid var(--relpro-border, #E8E8E0);
}

/* Specialty tags in hero */
.relpro-profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* Hero CTA */
.relpro-profile-hero__cta {
  display: flex;
  align-items: flex-start;
  padding-top: .25rem;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .relpro-profile-hero__cta {
    width: 100%;
  }
  .relpro-profile-hero__cta .relpro-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Tags (reusable) ─────────────────────────────────────────────────────────── */
.relpro-tag {
  display: inline-block;
  padding: .25rem .625rem;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 500;
  background: #f0f4f8;
  color: var(--relpro-primary, #1C2B3A);
}
.relpro-tag--neutral {
  background: var(--relpro-bg, #FAFAF8);
  border: 1px solid var(--relpro-border, #E8E8E0);
}

/* ── Layout: two columns ─────────────────────────────────────────────────────── */
.relpro-profile-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) {
  .relpro-profile-layout {
    grid-template-columns: 1fr;
  }
  .relpro-profile-aside {
    order: -1;
  }
}

/* ── Sections (main) ─────────────────────────────────────────────────────────── */
.relpro-profile-section {
  background: #fff;
  border: 1px solid var(--relpro-border, #E8E8E0);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.relpro-profile-section__title {
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--relpro-primary, #1C2B3A);
  margin: 0 0 1rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--relpro-bg, #FAFAF8);
}

/* Bio */
.relpro-profile-bio {
  font-size: .9375rem;
  line-height: 1.7;
  color: #374151;
}
.relpro-profile-bio p { margin: 0 0 1em; }
.relpro-profile-bio p:last-child { margin-bottom: 0; }

/* Video */
.relpro-profile-video { aspect-ratio: 16/9; }
.relpro-profile-video iframe { width: 100%; height: 100%; border-radius: 8px; }

/* Certifications */
.relpro-profile-certs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.relpro-profile-cert {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.relpro-profile-cert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: .1rem;
  stroke: var(--relpro-accent, #E8603C);
}
.relpro-profile-cert strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--relpro-primary, #1C2B3A);
}
.relpro-profile-cert__org {
  display: block;
  font-size: .8125rem;
  color: var(--relpro-text-muted, #6B7280);
  margin-top: .125rem;
}
.relpro-profile-cert__year {
  display: inline-block;
  font-size: .75rem;
  color: var(--relpro-text-muted, #6B7280);
  background: var(--relpro-bg, #FAFAF8);
  border-radius: 4px;
  padding: .1rem .4rem;
  margin-top: .25rem;
}

/* Tags list */
.relpro-profile-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Affiliations */
.relpro-profile-assoc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .9rem;
}
.relpro-profile-assoc__label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--relpro-text-muted, #6B7280);
  margin-right: .5rem;
}

/* Services */
.relpro-profile-services {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.relpro-profile-service {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--relpro-bg, #FAFAF8);
  border-radius: 8px;
  border: 1px solid var(--relpro-border, #E8E8E0);
}
.relpro-profile-service__name {
  font-size: .9375rem;
  font-weight: 600;
  display: block;
  margin-bottom: .25rem;
}
.relpro-profile-service__desc {
  font-size: .8125rem;
  color: var(--relpro-text-muted, #6B7280);
  margin: 0;
}
.relpro-profile-service__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex-shrink: 0;
  font-size: .8125rem;
  color: var(--relpro-text-muted, #6B7280);
}
.relpro-profile-service__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--relpro-primary, #1C2B3A);
}

/* ── Sidebar cards ───────────────────────────────────────────────────────────── */
.relpro-profile-card {
  background: #fff;
  border: 1px solid var(--relpro-border, #E8E8E0);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.relpro-profile-card--cta {
  border-color: var(--relpro-accent, #E8603C);
  background: #fff8f6;
}
.relpro-profile-card__title {
  font-family: Outfit, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: var(--relpro-primary, #1C2B3A);
  margin: 0 0 .875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Consultation modes */
.relpro-profile-modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  font-size: .875rem;
}
.relpro-profile-modes li {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.relpro-profile-modes svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--relpro-accent, #E8603C);
}

/* Address */
.relpro-profile-address {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--relpro-primary, #1C2B3A);
  margin: 0 0 .625rem;
}
.relpro-profile-map-link {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--relpro-accent, #E8603C);
  text-decoration: none;
}
.relpro-profile-map-link:hover {
  text-decoration: underline;
}
.relpro-profile-external-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--relpro-accent, #E8603C);
  text-decoration: none;
  word-break: break-all;
}
.relpro-profile-external-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--relpro-accent, #E8603C);
}
.relpro-profile-external-link:hover { text-decoration: underline; }

/* ── Buttons (local overrides) ───────────────────────────────────────────────── */
.relpro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background .18s, opacity .18s;
  white-space: nowrap;
}
.relpro-btn--accent {
  background: var(--relpro-accent, #E8603C);
  color: #fff;
}
.relpro-btn--accent:hover { opacity: .88; }
.relpro-btn--lg { padding: .8rem 1.625rem; font-size: 1rem; }
.relpro-btn--full { width: 100%; }