/* ==========================================================================
   PROFILE CARD — master component
   --------------------------------------------------------------------------
   Used for any "person" context: practitioners, healers, founders, ambassadors.
   Distinct from service cards: circular portrait, neomorphic surface, no price.

   Canonical markup:

   <div class="profile-card">
     <div class="profile-card-image">
       <img src="..." alt="">
     </div>
     <div class="profile-card-content">
       <h3 class="profile-card-title">Name</h3>
       <p class="profile-card-specialties">Modality · Modality · 30+ Years</p>
       <p class="profile-card-description">Bio paragraph (line-clamped to 5).</p>
       <div class="profile-card-modalities">
         <span class="profile-card-modality">Modality A</span>
         <span class="profile-card-modality">Modality B</span>
       </div>
       <div class="profile-card-footer">
         <a href="our-healers.html#name" class="profile-card-cta">View Profile <i class="fas fa-arrow-right"></i></a>
       </div>
     </div>
   </div>

   Backward-compatible aliases for legacy markup are defined at the bottom
   of this file: .healer-card / .healer-portrait / .healer-credential / etc.
   ========================================================================== */

/* --- Card surface ------------------------------------------------------- */
.profile-card {
    background: linear-gradient(145deg, #0d1a30 0%, #050d1d 100%);
    border: 1px solid rgba(228, 199, 229, 0.04);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow:
        10px 10px 24px rgba(0, 0, 0, 0.45),
        -10px -10px 24px rgba(228, 199, 229, 0.03);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow:
        14px 14px 32px rgba(0, 0, 0, 0.55),
        -14px -14px 32px rgba(228, 199, 229, 0.045);
}

/* --- Circular portrait -------------------------------------------------- */
.profile-card-image {
    width: 220px;
    height: 220px;
    margin: 2.25rem auto 0.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* --- Content area ------------------------------------------------------- */
.profile-card-content {
    padding: 1.5rem 5rem 2.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.profile-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: #FAF8FB;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.profile-card-specialties {
    font-family: 'Cormorant Garamond', serif;
    color: rgba(228, 199, 229, 0.65);
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
}

.profile-card-description {
    color: rgba(228, 199, 229, 0.88);
    font-size: 0.85rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Modality pills ----------------------------------------------------- */
.profile-card-modalities {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.profile-card-modality {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(228, 199, 229, 0.25);
    border-radius: 100px;
    color: rgba(228, 199, 229, 0.85);
    letter-spacing: 0.02em;
    background: transparent;
}

/* --- Footer / CTA ------------------------------------------------------- */
.profile-card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.profile-card-cta {
    color: #F4A14B;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
    transition: all 280ms ease;
}

.profile-card-cta:hover {
    color: #F5B562;
    gap: 0.85rem;
    background: none;
    box-shadow: none;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
    .profile-card-image {
        width: 180px;
        height: 180px;
    }

    .profile-card-content {
        padding: 1.25rem 2rem 2rem;
    }
}

/* ==========================================================================
   FLAT-STRUCTURE ALIASES
   --------------------------------------------------------------------------
   Pages use the flat card markup (bare h3 + sibling paragraphs) under two
   class families: .practitioner-* (current standard) and .healer-* (legacy,
   being phased out). Both are grouped onto the same rules below so pages can
   migrate one at a time. Once every page is on .practitioner-*, drop the
   .healer-* halves. Long-term canonical is the wrapped .profile-card pattern
   at the top of this file; flat aliases remain until a structural migration.
   ========================================================================== */

.healer-card,
.practitioner-card {
    background: linear-gradient(145deg, #0d1a30 0%, #050d1d 100%);
    border: 1px solid rgba(228, 199, 229, 0.04);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow:
        10px 10px 24px rgba(0, 0, 0, 0.45),
        -10px -10px 24px rgba(228, 199, 229, 0.03);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease;
    padding: 0;
}

.healer-card:hover,
.practitioner-card:hover {
    transform: translateY(-4px);
    box-shadow:
        14px 14px 32px rgba(0, 0, 0, 0.55),
        -14px -14px 32px rgba(228, 199, 229, 0.045);
}

.healer-portrait,
.practitioner-portrait {
    width: 220px;
    height: 220px;
    margin: 2.25rem auto 0.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    background: linear-gradient(135deg, #8729A5, #DBBFE4);
}

.healer-portrait img,
.practitioner-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Placeholder icon (when no <img> is present yet) */
.healer-portrait i,
.practitioner-portrait i,
.profile-card-image i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    color: rgba(228, 199, 229, 0.7);
}

.healer-card > h3,
.healer-card > .healer-credential,
.healer-card > .healer-bio,
.healer-card > .healer-modalities,
.healer-card > .healer-link,
.practitioner-card > h3,
.practitioner-card > .practitioner-credential,
.practitioner-card > .practitioner-bio,
.practitioner-card > .practitioner-modalities,
.practitioner-card > .practitioner-link {
    margin-left: 5rem;
    margin-right: 5rem;
}

.healer-card > h3,
.practitioner-card > h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    color: #FAF8FB;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.healer-credential,
.practitioner-credential {
    font-family: 'Cormorant Garamond', serif;
    color: rgba(228, 199, 229, 0.65);
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
}

.healer-bio,
.practitioner-bio {
    color: rgba(228, 199, 229, 0.88);
    font-size: 0.85rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.healer-modalities,
.practitioner-modalities {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.healer-modality,
.practitioner-modality {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(228, 199, 229, 0.25);
    border-radius: 100px;
    color: rgba(228, 199, 229, 0.85);
    letter-spacing: 0.02em;
    background: transparent;
}

.healer-link,
.practitioner-link {
    color: #F4A14B;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.25rem;
    transition: all 280ms ease;
}

.healer-link:hover,
.practitioner-link:hover {
    color: #F5B562;
    gap: 0.85rem;
}

@media (max-width: 768px) {
    .healer-portrait,
    .practitioner-portrait {
        width: 180px;
        height: 180px;
    }

    .healer-card > h3,
    .healer-card > .healer-credential,
    .healer-card > .healer-bio,
    .healer-card > .healer-modalities,
    .healer-card > .healer-link,
    .practitioner-card > h3,
    .practitioner-card > .practitioner-credential,
    .practitioner-card > .practitioner-bio,
    .practitioner-card > .practitioner-modalities,
    .practitioner-card > .practitioner-link {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .healer-link,
    .practitioner-link {
        margin-bottom: 1.75rem;
    }
}