/* ==========================================================================
   Page: consultants  (site/modules/consultants/index · show)
   --------------------------------------------------------------------------
   .cons-grid     profile cards: photo in the logo's و ring, name, specialty,
                  years · languages, rating, "view profile →"
   .cons-detail   one profile: about, areas (pills), qualifications (checks)
                  beside a sticky fact card with «احجز مع …»
   ========================================================================== */

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.cons-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-8) var(--space-5) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--card);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cons-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cons-card__photo {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin: 20px 20px var(--space-4);                       /* room for the rings */
    overflow: hidden;
    border-radius: 50%;
    background: var(--panel);
    color: var(--panel-deep);
    font-size: 2.6rem;
    box-shadow: 0 0 0 7px var(--card), 0 0 0 8.5px var(--second),
                0 0 0 14px var(--card), 0 0 0 15px var(--line-strong),
                0 0 0 20px var(--card), 0 0 0 21px var(--line);
}
.cons-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.cons-card:hover .cons-card__photo img { scale: 1.05; }
/* No photo: the first letter of the name on the aqua tint, the logo's dot beside it */
.cons-card__photo--initial { position: relative; background: var(--second-tint); }
.cons-card__photo--initial::after {
    content: "";
    position: absolute;
    top: 30%;
    inset-inline-end: 24%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--second);
}
.cons-card__initial { color: var(--second-ink); font-family: var(--font-display); font-size: 3.4rem; font-weight: 300; line-height: 1; }
.cons-card__name { font-family: var(--font-display); font-size: var(--fs-xl); }
.cons-card__specialty { color: var(--second-text); font-size: var(--fs-sm); font-weight: 500; }
.cons-card__meta { color: var(--ink-faint); font-size: var(--fs-xs); }
.cons-card__rating { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); font-weight: 600; }
.cons-card__rating .icon { color: var(--rating); fill: var(--peach); }
.cons-card__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); color: var(--ink-soft); font-size: var(--fs-sm); }
[dir="ltr"] .cons-card__more .icon { scale: -1 1; }

/* ── Profile ─────────────────────────────────────────────────────────────── */
.cons-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.cons-detail__heading { margin-bottom: var(--space-4); font-size: var(--fs-2xl); }
.cons-detail__heading:not(:first-child) { margin-top: var(--space-12); }
.cons-detail__prose { display: grid; gap: var(--space-4); max-width: 44rem; font-size: var(--fs-lg); line-height: 2; }
.cons-areas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cons-areas li { padding: 0.45em 1.1em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-weight: 500; }
.cons-quals { display: grid; gap: var(--space-2); }
.cons-quals li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.8; }
.cons-quals .icon { flex-shrink: 0; margin-top: 0.35em; color: var(--second-text); }

.cons-side {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--card);
    box-shadow: var(--shadow-md);
}
.cons-side__facts { display: grid; gap: var(--space-4); margin: 0; }
.cons-side__facts dt { color: var(--ink-faint); font-size: var(--fs-xs); }
.cons-side__facts dd { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-weight: 600; }
.cons-side__star { color: var(--rating); fill: var(--peach); }
.cons-side__note { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }

@media (max-width: 991.98px) {
    .cons-detail { grid-template-columns: 1fr; }
    .cons-side { position: static; }
}