/**
 * MD WPBakery Elements — Team Member Styles
 *
 * All dynamic values (colors, sizes, photo height) come from CSS Custom
 * Properties set per-instance by the shortcode render method.
 *
 * @package MD_WPBakery_Elements
 */

/* ── Base card ───────────────────────────────────────────────────────────── */
.md-tm-card {
	background:    var(--md-tm-card-bg, #ffffff);
	border:        0.5px solid var(--md-tm-border-color, #e5e5e5);
	border-radius: var(--md-tm-card-radius, 12px);
	overflow:      hidden;
	box-sizing:    border-box;
}

/* ── Shared typography ───────────────────────────────────────────────────── */
.md-tm-name {
	font-size:   var(--md-tm-name-size, 14px);
	font-weight: 500;
	color:       var(--md-tm-name-color, currentColor);
	margin:      0 0 2px;
	line-height: 1.3;
}

.md-tm-role {
	font-size:   var(--md-tm-role-size, 11px);
	color:       var(--md-tm-role-color, #888);
	margin:      0 0 10px;
	line-height: 1.4;
}

.md-tm-bio {
	font-size:   var(--md-tm-bio-size, 12px);
	color:       var(--md-tm-bio-color, #666);
	line-height: 1.6;
	margin:      0 0 12px;
}

/* ── Photo link ──────────────────────────────────────────────────────────── */
.md-tm-photo-link {
	display: block;
	width:   100%;
	height:  100%;
}

/* ── Accent bar (layouts B and D) ────────────────────────────────────────── */
.md-tm-accent-bar {
	height:     4px;
	background: var(--md-tm-accent, #E40739);
	flex-shrink: 0;
}

/* ── Specialties — tags (layouts A and C) ────────────────────────────────── */
.md-tm-tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       5px;
	margin:    0 0 12px;
}

.md-tm-tag {
	font-size:     11px;
	padding:       3px 8px;
	border-radius: 20px;
	border:        0.5px solid #ddd;
	color:         #666;
	line-height:   1;
}

/* ── Specialties — dot list (layouts B and D) ────────────────────────────── */
.md-tm-dots {
	list-style: none;
	padding:    0;
	margin:     0 0 12px;
	display:    flex;
	flex-direction: column;
	gap:        5px;
}

.md-tm-dot-item {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   11px;
	color:       #666;
	line-height: 1.4;
}

.md-tm-dot {
	width:        5px;
	height:       5px;
	border-radius: 50%;
	background:   var(--md-tm-accent, #E40739);
	flex-shrink:  0;
}

/* ── Contact lines (phone / email) ───────────────────────────────────────── */
.md-tm-contact-line {
	font-size:   12px;
	color:       #666;
	margin:      0 0 6px;
	display:     flex;
	align-items: center;
	gap:         6px;
	line-height: 1.4;
}

.md-tm-contact-line i {
	font-size:  12px;
	width:      14px;
	text-align: center;
	color:      var(--md-tm-accent, #E40739);
	flex-shrink: 0;
}

.md-tm-contact-line a {
	color:           var(--md-tm-link-color, inherit);
	text-decoration: none;
	transition:      color .15s;
}

.md-tm-contact-line a:hover {
	color: var(--md-tm-link-hover, var(--md-tm-accent, #E40739));
}

/* ── Footer row (socials + CTA) ──────────────────────────────────────────── */
.md-tm-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.md-tm-footer--block {
	flex-direction: column;
	align-items:    stretch;
	gap:            8px;
}

/* ── Social icons ────────────────────────────────────────────────────────── */
.md-tm-socials {
	display: flex;
	gap:     5px;
}

.md-tm-soc {
	width:           26px;
	height:          26px;
	border-radius:   6px;
	border:          0.5px solid #ddd;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #888;
	text-decoration: none;
	transition:      border-color .15s, color .15s;
}

.md-tm-soc:hover {
	border-color: var(--md-tm-accent, #E40739);
	color:        var(--md-tm-accent, #E40739);
}

.md-tm-soc i {
	font-size: 12px;
}

/* ── CTA link ────────────────────────────────────────────────────────────── */
.md-tm-cta-link {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    border: 0.5px solid #ccc;
    padding: 5px 10px;
    border-radius: 20px;
}

.md-tm-cta-link:hover {
	color:        var(--md-tm-accent, #E40739);
	border-color: var(--md-tm-accent, #E40739);
}

.md-tm-cta-block {
	display:         block;
	text-align:      center;
	font-size:       12px;
	padding:         8px;
	border:          0.5px solid #ddd;
	border-radius:   6px;
	color:           #666;
	text-decoration: none;
	transition:      border-color .15s, color .15s;
}

.md-tm-cta-block:hover {
	border-color: var(--md-tm-accent, #E40739);
	color:        var(--md-tm-accent, #E40739);
}

/* ── Rating (layout C) ───────────────────────────────────────────────────── */
.md-tm-rating {
	display:     flex;
	align-items: center;
	gap:         4px;
}

.md-tm-stars {
	display: flex;
	gap:     1px;
}

.md-tm-star {
	width:  12px;
	height: 12px;
}

.md-tm-star--full  { fill: var(--md-tm-accent, #E40739); }
.md-tm-star--empty { fill: #e0e0e0; }

.md-tm-rating-val {
	font-size:   12px;
	color:       #666;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout A — Horizontal
   ═══════════════════════════════════════════════════════════════════════════ */
.md-tm-layout-a {
	display:     flex;
	gap:         1.25rem;
	align-items: flex-start;
	padding:     1.25rem;
}

.md-tm-layout-a .md-tm-name { font-size: var(--md-tm-name-size, 16px); }
.md-tm-layout-a .md-tm-bio  { font-size: var(--md-tm-bio-size, 13px); }

.md-tm-a-photo {
	width:      88px;
	height:     88px;
	flex-shrink: 0;
	overflow:   hidden;
}

.md-tm-a-photo img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.md-tm-layout-a .md-tm-body {
	flex:      1;
	min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout B — Vertical compact
   ═══════════════════════════════════════════════════════════════════════════ */
.md-tm-layout-b {
	display:        flex;
	flex-direction: column;
}

.md-tm-b-inner {
	padding: 1rem;
}

.md-tm-b-photo {
	width:         var(--md-tm-photo-size-b, 72px);
	height:        var(--md-tm-photo-size-b, 72px);
	border-radius: 50%;
	overflow:      hidden;
	margin-bottom: .75rem;
	border:        0.5px solid #e5e5e5;
	flex-shrink:   0;
}

.md-tm-b-photo img {
	display:         block;
	width:           var(--md-tm-photo-size-b, 72px);
	height:          var(--md-tm-photo-size-b, 72px);
	object-fit:      cover;
	object-position: var(--md-tm-photo-pos, center);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout C — Photo-first
   ═══════════════════════════════════════════════════════════════════════════ */
.md-tm-layout-c {
	display:        flex;
	flex-direction: column;
}

.md-tm-c-photo {
	height:   var(--md-tm-photo-height, 200px);
	overflow: hidden;
}

.md-tm-c-photo img {
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  var(--md-tm-photo-pos, center);
	display:          block;
}

.md-tm-c-body {
	padding: 1rem;
}

.md-tm-c-role {
	padding-bottom: .625rem;
	border-bottom:  0.5px solid #e5e5e5;
	margin-bottom:  .625rem;
}

.md-tm-c-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout D — Vertical large photo (B + C)
   ═══════════════════════════════════════════════════════════════════════════ */
.md-tm-layout-d {
	display:        flex;
	flex-direction: column;
}

.md-tm-d-photo {
	height:   var(--md-tm-photo-height, 200px);
	overflow: hidden;
}

.md-tm-d-photo img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: var(--md-tm-photo-pos, center);
	display:         block;
}