/**
 * InsurePro - personal profile homepage
 *
 * Loaded after main.css and responsive.css, only on the front page / Homepage
 * template, so it can reuse every custom property and component class they
 * already define (buttons, .section, .cat-card, .entry--card, .testimonial,
 * .contact-details, .contact-form-wrap, .ip-reveal). This file only adds the
 * layout and polish that is unique to the one-page profile: the portrait
 * hero, the About Me split layout and small premium/editorial touches.
 *
 * Mobile-first, matching the breakpoints already used across the theme:
 * 480 / 680 / 860 / 1024 / 1280.
 *
 * @package InsurePro
 * @since   1.0.0
 */

/*--------------------------------------------------------------
Hero: portrait treatment
--------------------------------------------------------------*/

.hero--profile .hero__title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hero--profile .hero__media {
	max-width: 360px;
	margin-inline: auto;
}

.hero--profile .hero__media::before {
	content: "";
	position: absolute;
	inset: -14px;
	z-index: -1;
	background: radial-gradient(circle at 30% 20%, rgba(var(--ip-accent-rgb), 0.35), transparent 65%);
	border-radius: calc(var(--ip-radius-lg) + 14px);
}

.hero--profile .hero__img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	border: 3px solid rgba(255, 255, 255, 0.25);
}

/*--------------------------------------------------------------
About Me
--------------------------------------------------------------*/

.section--about {
	background: var(--ip-white);
}

.about {
	display: grid;
	gap: var(--ip-space-lg);
}

.about__intro .section-title {
	margin-top: 0.2rem;
}

.about__bio {
	max-width: 62ch;
	color: var(--ip-text);
	font-size: 1.04rem;
	line-height: 1.7;
}

.about__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--ip-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.about__credentials li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	background: rgba(var(--ip-accent-rgb), 0.1);
	border: 1px solid rgba(var(--ip-accent-rgb), 0.35);
	border-radius: var(--ip-radius-pill);
	color: var(--ip-primary-dark);
	font-size: 0.84rem;
	font-weight: 600;
}

.about__credentials svg {
	color: var(--ip-accent-dark);
	flex-shrink: 0;
}

.about__personal {
	padding: var(--ip-space-lg);
	background: var(--ip-bg);
	border-left: 4px solid var(--ip-accent);
	border-radius: var(--ip-radius-lg);
}

.about__personal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--ip-space-sm);
	background: var(--ip-white);
	border-radius: var(--ip-radius);
	color: var(--ip-primary);
	box-shadow: var(--ip-shadow-sm);
}

.about__personal-title {
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
}

.about__personal-text {
	margin: 0;
	color: var(--ip-muted);
	font-size: 0.96rem;
	line-height: 1.65;
}

/*--------------------------------------------------------------
Expertise
--------------------------------------------------------------*/

.section--expertise {
	background: var(--ip-bg);
}

/* Only three expertise cards ship out of the box; cap the grid at
   three columns so it never leaves an awkward gap on wide screens. */
.section--expertise .cat-grid {
	grid-template-columns: 1fr;
}

.cat-card--medical:hover .cat-card__icon {
	background: #c0392b;
}

.cat-card--liability:hover .cat-card__icon {
	background: var(--ip-accent-dark);
}

/*--------------------------------------------------------------
Blog
--------------------------------------------------------------*/

.section--blog {
	background: var(--ip-white);
}

/*--------------------------------------------------------------
Contact
--------------------------------------------------------------*/

.section--contact {
	background: var(--ip-bg);
}

.contact-details__social {
	margin-top: var(--ip-space-md);
	padding-top: var(--ip-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.social-menu--labelled {
	flex-wrap: wrap;
}

.social-menu--labelled a {
	display: inline-flex;
	padding: 0.35rem 0.8rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--ip-radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
}

.social-menu--labelled a:hover {
	background: var(--ip-accent);
	color: var(--ip-text);
}

/*--------------------------------------------------------------
680px
--------------------------------------------------------------*/
@media (min-width: 680px) {

	.section--expertise .cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
860px
--------------------------------------------------------------*/
@media (min-width: 860px) {

	.about {
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
	}

	.hero--profile .hero__media {
		max-width: none;
		margin-inline: 0;
	}
}

/*--------------------------------------------------------------
1024px
--------------------------------------------------------------*/
@media (min-width: 1024px) {

	.section--expertise .cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}