/* =========================================================
   HivePress Freelancer Profile – Frontend
   ========================================================= */

/* ---------- Reset / Base ---------- */
.hpfp-card {
	--hpfp-primary:   #2563eb;
	--hpfp-accent:    #0ea5e9;
	--hpfp-bg:        #ffffff;
	--hpfp-surface:   #f8fafc;
	--hpfp-border:    #e2e8f0;
	--hpfp-text:      #1e293b;
	--hpfp-muted:     #64748b;
	--hpfp-radius:    14px;
	--hpfp-shadow:    0 2px 16px rgba(0,0,0,.07);
	--hpfp-green:     #22c55e;
	--hpfp-yellow:    #f59e0b;
	--hpfp-red:       #ef4444;

	background: var(--hpfp-bg);
	border: 1px solid var(--hpfp-border);
	border-radius: var(--hpfp-radius);
	box-shadow: var(--hpfp-shadow);
	overflow: hidden;
	margin: 2rem 0;
	font-family: inherit;
	color: var(--hpfp-text);
}

/* ---------- TABS ---------- */
.hpfp-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--hpfp-border);
	background: var(--hpfp-surface);
	padding: 0 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hpfp-tabs::-webkit-scrollbar { display: none; }

.hpfp-tab {
	background: none;
	border: none;
	padding: .85rem 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--hpfp-muted);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: color .2s;
}
.hpfp-tab::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0; right: 0;
	height: 2px;
	background: var(--hpfp-primary);
	transform: scaleX(0);
	transition: transform .2s;
}
.hpfp-tab:hover { color: var(--hpfp-primary); }
.hpfp-tab.active { color: var(--hpfp-primary); }
.hpfp-tab.active::after { transform: scaleX(1); }

/* ---------- PANELS ---------- */
.hpfp-tab-panel {
	display: none;
	padding: 1.75rem;
	animation: hpfpFade .2s ease;
}
.hpfp-tab-panel.active { display: block; }

@keyframes hpfpFade {
	from { opacity:0; transform: translateY(4px); }
	to   { opacity:1; transform: translateY(0); }
}

/* ---------- TAGLINE ---------- */
.hpfp-tagline {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hpfp-text);
	margin: 0 0 1rem;
	line-height: 1.4;
}

/* ---------- META PILLS ---------- */
.hpfp-meta-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.25rem;
}

.hpfp-avail-badge,
.hpfp-rate-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	font-weight: 600;
	padding: .3rem .75rem;
	border-radius: 999px;
	background: var(--hpfp-surface);
	border: 1px solid var(--hpfp-border);
}

.hpfp-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--hpfp-muted);
	flex-shrink: 0;
}
.hpfp-avail--green .hpfp-dot { background: var(--hpfp-green); }
.hpfp-avail--yellow .hpfp-dot { background: var(--hpfp-yellow); }
.hpfp-avail--red .hpfp-dot { background: var(--hpfp-red); }

/* ---------- BIO ---------- */
.hpfp-bio {
	font-size: .95rem;
	line-height: 1.75;
	color: var(--hpfp-text);
	margin-bottom: 1.5rem;
}
.hpfp-bio p { margin: 0 0 .75rem; }
.hpfp-bio p:last-child { margin-bottom: 0; }

/* ---------- SECCIÓN LABEL ---------- */
.hpfp-section-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hpfp-muted);
	margin: 0 0 .6rem;
}

/* ---------- SKILLS ---------- */
.hpfp-skills { margin-bottom: 1.5rem; }

.hpfp-skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.hpfp-skill-tag {
	font-size: .78rem;
	font-weight: 500;
	padding: .3rem .7rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--hpfp-primary) 10%, white);
	color: var(--hpfp-primary);
	border: 1px solid color-mix(in srgb, var(--hpfp-primary) 20%, white);
	transition: background .15s;
}
.hpfp-skill-tag:hover {
	background: color-mix(in srgb, var(--hpfp-primary) 18%, white);
}

/* ---------- SOCIAL ---------- */
.hpfp-social { margin-top: 1.5rem; }

.hpfp-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.hpfp-social-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8rem;
	font-weight: 600;
	padding: .4rem .85rem;
	border-radius: 8px;
	background: var(--hpfp-surface);
	border: 1px solid var(--hpfp-border);
	color: var(--hpfp-text);
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .15s;
}
.hpfp-social-btn:hover {
	background: var(--hpfp-primary);
	border-color: var(--hpfp-primary);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}
.hpfp-social-btn svg {
	width: 15px; height: 15px;
	flex-shrink: 0;
}

/* ---------- TIMELINE ---------- */
.hpfp-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}
.hpfp-timeline::before {
	content: '';
	position: absolute;
	left: 10px; top: 14px; bottom: 14px;
	width: 2px;
	background: var(--hpfp-border);
}

.hpfp-timeline--edu::before { background: color-mix(in srgb, #8b5cf6 30%, white); }

.hpfp-timeline-item {
	display: flex;
	gap: 1rem;
	padding-bottom: 1.5rem;
	position: relative;
}
.hpfp-timeline-item:last-child { padding-bottom: 0; }

.hpfp-timeline-dot {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--hpfp-primary);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--hpfp-primary);
	flex-shrink: 0;
	margin-top: 2px;
	position: relative;
	z-index: 1;
}
.hpfp-timeline--edu .hpfp-timeline-dot { background: #8b5cf6; box-shadow: 0 0 0 2px #8b5cf6; }

.hpfp-timeline-body { flex: 1; min-width: 0; }

.hpfp-timeline-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .5rem;
	flex-wrap: wrap;
}

.hpfp-timeline-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--hpfp-text);
}

.hpfp-timeline-period {
	font-size: .75rem;
	color: var(--hpfp-muted);
	white-space: nowrap;
	background: var(--hpfp-surface);
	padding: .2rem .5rem;
	border-radius: 4px;
}

.hpfp-timeline-sub {
	display: block;
	font-size: .82rem;
	color: var(--hpfp-accent);
	font-weight: 600;
	margin-top: .2rem;
}

.hpfp-timeline-desc {
	font-size: .85rem;
	color: var(--hpfp-muted);
	margin: .4rem 0 0;
	line-height: 1.6;
}

/* ---------- PORTAFOLIO ---------- */
.hpfp-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

.hpfp-portfolio-item {
	border: 1px solid var(--hpfp-border);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .2s, transform .2s;
	background: var(--hpfp-bg);
}
.hpfp-portfolio-item:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
	transform: translateY(-3px);
}

.hpfp-portfolio-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hpfp-surface);
}
.hpfp-portfolio-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .3s;
}
.hpfp-portfolio-item:hover .hpfp-portfolio-img img { transform: scale(1.04); }
.hpfp-portfolio-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hpfp-portfolio-img--placeholder svg { width: 48px; height: 48px; }

.hpfp-portfolio-info { padding: 1rem; }

.hpfp-portfolio-name {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--hpfp-text);
	margin-bottom: .35rem;
}

.hpfp-portfolio-desc {
	font-size: .8rem;
	color: var(--hpfp-muted);
	margin: 0 0 .6rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hpfp-portfolio-link {
	font-size: .8rem;
	font-weight: 600;
	color: var(--hpfp-primary);
	text-decoration: none;
	transition: color .15s;
}
.hpfp-portfolio-link:hover { color: var(--hpfp-accent); text-decoration: underline; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
	.hpfp-tab-panel { padding: 1.25rem; }
	.hpfp-portfolio-grid { grid-template-columns: 1fr; }
	.hpfp-timeline-header { flex-direction: column; }
}