/* =========================================================
   SanDiegoEscortsxx — Profile Page Styles (scoped add-ons)
   Depends on global tokens from styles.css
   ========================================================= */

/* Breadcrumbs */
.breadcrumbs{padding:14px 0;color:#6b7280;font-size:14px}
.breadcrumbs ol{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.breadcrumbs a{color:inherit}

/* Wrapper */
.profile-wrap{padding-top:24px}

/* Main profile grid */
.profile{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
@media (max-width:1100px){
  .profile{grid-template-columns:1fr}
}

/* Name block */
.profile__name{
  background:#111;
  color:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow-sm);
  display:grid;
  gap:6px;
}
.profile__name h1{margin:0;font-size:clamp(22px,2.4vw,28px);letter-spacing:.2px}
.profile__sub{color:#cbd5e1}

/* Chips */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid #2a2a2f;
  background:#16161a;
  color:#e5e7eb;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
}

/* Gallery */
.profile-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (max-width:720px){
  .profile-gallery{grid-template-columns:1fr}
}
.profile-shot{
  border-radius:16px;
  overflow:hidden;
  border:2px solid #e5e7eb;
  box-shadow:var(--shadow-sm);
  background:#000;
}
.profile-shot img{
  width:100%;
  height:360px;
  
  transition:transform .4s ease;
  
}
@media (max-width:720px){
  .profile-shot img{height:280px}
}
.profile-shot:hover img{transform:scale(1.03)}
.profile-wide{grid-column:1/-1}

/* Gentle “lift” on hover (matches tiles) */
.lift{transition:transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.16)}

/* Sidebar panels */
.panel-dark{
  background:#0f0f12;
  color:#e5e7eb;
  border-radius:16px;
  padding:16px;
  border:1px solid #222;
  box-shadow:var(--shadow-sm);
}
.side-h{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.4px;
  color:#cbd5e1;
  text-transform:uppercase;
}

/* Key–value list */
.kv{
  display:grid;
  grid-template-columns:1fr auto;
  row-gap:8px;
  column-gap:12px;
  margin:10px 0 0;
}
.kv dt{color:#9aa0a6}
.kv dd{margin:0;font-weight:600;color:#fff}

/* Enjoys pills (reuse .pill look) */
.pill-bank{display:flex;flex-wrap:wrap;gap:8px}
.pill-bank .pill{
  background:#16161a;
  color:#e5e7eb;
  border-color:#23232a;
}

/* Donations */
.price-list{display:grid;gap:10px;margin-top:6px}
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #2a2a2f;
  border-radius:12px;
  padding:10px 12px;
  background:#141416;
}
.price-row strong{color:#fff}
.side-cta{display:flex;gap:10px}

/* About box */
.about-box{
  background:#0f0f12;
  color:#e5e7eb;
  border-radius:16px;
  padding:16px;
  border:1px solid #222;
}

/* Related companions section */
.related{margin-top:26px}
.related h2{margin:0 0 12px}
.related .tile img{height:220px}
.related .tile .meta{inset:auto 8px 8px 8px}

/* Contact section spacing tweak on profile pages */
.contact-wrap{padding-top:28px}

/* Optional: page-level reveal hookup if you want extra smoothness */
@media (prefers-reduced-motion:no-preference){
  .profile-shot,
  .panel-dark,
  .about-box,
  .related .tile{opacity:0;transform:translateY(12px)}
  .profile-shot.in,
  .panel-dark.in,
  .about-box.in,
  .related .tile.in{opacity:1;transform:none;transition:opacity .45s ease, transform .45s ease}
}

/* top summary */
.profile__name .from-line{
  color:#cbd5e1;
  font-size:14px;
}

/* “Stats” with separators like the reference */
.kv--border{
  border-top:1px dashed #2a2a2f;
}
.kv--border dt,
.kv--border dd{
  border-bottom:1px dashed #2a2a2f;
  padding:8px 0;
}

/* pill look stays consistent with dark sidebar */
.pill-bank .pill{
  background:#16161a;
  color:#e5e7eb;
  border:1px solid #23232a;
}

/* related section label tighter to grid */
.related .section-title{margin-bottom:12px}

/* optional: stronger side CTA like the screenshot */
.side-cta .cta-btn{
  width:100%;
  justify-content:center;
  border-radius:12px;
}

.side-cta .cta-btn{box-shadow:0 8px 24px rgba(233,30,99,.25)}
.side-cta .cta-btn:hover{transform:translateY(-1px)}

/* ==== Main Profile Gallery: images should cover the canvas ==== */
.profile-shot{
  overflow:hidden;              /* crop edges */
  border-radius:16px;
  border:none;                  /* remove border if you want full-bleed */
}

.profile-shot img{
  width:100%;
  height:100%;                  /* fill the container */
  min-height:360px;             /* keep tall enough on desktop */
  object-fit:cover;             /* always cover frame */
  display:block;
}

@media (max-width:720px){
  .profile-shot img{
    min-height:280px;           /* slightly shorter for mobile */
  }
}