/**
 * ICF Toronto - MemberPress build styles.
 *
 * Loaded after wa_style.css and only overrides what the MemberPress build
 * needs. The card chrome on the coach profile (navy header, lavender body)
 * is built in Elementor, not here.
 */

/* -------------------------------------------------------------------------
 * Profile headshot
 *
 * wa_style.css forces the image into a square (aspect-ratio: 1) and clips it
 * to a circle, but never says how to FIT it - so a portrait gets stretched to
 * fill the square. object-fit: cover crops instead of stretching, and the
 * top-biased position keeps faces in frame on tall uploads.
 * ---------------------------------------------------------------------- */
img.profile-image {
	object-fit: cover;
	object-position: 50% 20%;
	display: block;
}

/* [tnli_mp view="CoachProfileImage" focus="top|center|bottom"] */
.gg_wa_view.tnli_focus_top    img.profile-image { object-position: 50% 0%; }
.gg_wa_view.tnli_focus_center img.profile-image { object-position: 50% 50%; }
.gg_wa_view.tnli_focus_bottom img.profile-image { object-position: 50% 100%; }

/* Directory result thumbnails get the same treatment. */
.wa_users .result img.profile-image {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 20%;
	clip-path: circle();
}

/* -------------------------------------------------------------------------
 * List views (Focus Areas, Top Skills, Coaching Modality, ...)
 *
 * Default is the plain stacked list wa_style.css already draws. Opt in to
 * bullets per shortcode: [tnli_mp view="CoachProfileTopSkills" bullets="yes"]
 * ---------------------------------------------------------------------- */
.gg_wa_view.gg_wa_view_list.tnli_bullets ul {
	list-style: disc;
	padding-left: 1.25em;
}
.gg_wa_view.gg_wa_view_list.tnli_bullets ul li {
	margin-bottom: 0.5rem;
	padding-left: 0.15em;
}
.gg_wa_view.gg_wa_view_list.tnli_bullets ul li::marker {
	color: currentColor;
	opacity: 0.6;
}

/* Tighter spacing when the list sits inside a card. */
.gg_wa_view.gg_wa_view_list.tnli_compact ul li {
	margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Articles grid - [tnli_mp view="CoachProfileArticles"]
 * (An Elementor loop widget with Query ID tnli_coach_articles keeps its own
 * styling and does not use these.)
 * ---------------------------------------------------------------------- */
.tnli_articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}
.tnli_article_image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin-bottom: 0.75rem;
}
.tnli_article_title { margin: 0 0 0.25rem; font-size: 1.15rem; }
.tnli_article_date  { opacity: 0.7; font-size: 0.9rem; margin-bottom: 0.5rem; }
.tnli_article_excerpt { margin: 0; }
.tnli_articles_empty { opacity: 0.8; }

/* -------------------------------------------------------------------------
 * Hide the Articles section for coaches with no posts.
 * Give the container the CSS class tnli-articles-section (Advanced > CSS
 * Classes). The body class is set by tnli_mp_articles_body_class().
 * ---------------------------------------------------------------------- */
body.tnli-no-articles .tnli-articles-section {
	display: none !important;
}