/* User Profile redesign — same design tokens as home-v2.css/pin-detail.css: brand red #e74c3c,
   navy headings #1f2f3d/#2d3e4f, neutral border #e9e7e3, soft navy shadow, 12px pill radius.
   See agent/modules/pending/user-profile/new.md for the element-by-element mapping this implements. */

.profile-v2-layout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 24px 24px 60px;
	box-sizing: border-box;
}
.profile-v2-main { flex: 1 1 auto; min-width: 0; }

/* ── Header card (cover + avatar + name + stats + tabs) ── */
.profile-head-card {
	background: #fff;
	border: 1px solid #eeece8;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(45,62,79,.08);
}

.profile-cover {
	position: relative;
	/* Same ratio the cover is uploaded at (986x281), so the banner scales with the card width
	   instead of being cropped to a fixed 260px strip on wide screens. */
	aspect-ratio: 986 / 281;
	/* No min-height: combined with aspect-ratio it widened the box past the card on phones
	   (160px x 3.85 = 616px) and cropped the banner's sides. head.phtml sets the real ratio inline. */
	background: linear-gradient(135deg,#2d3e4f,#1a2432);
	overflow: hidden;
}
.profile-cover .set { margin: 0; height: 100%; }
.profile-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.profile-cover-change-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: rgba(17,17,17,.55);
	color: #fff;
	border: 0;
	border-radius: 20px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	backdrop-filter: blur(3px);
	transition: background-color .15s;
}
.profile-cover-change-btn:hover { background: rgba(17,17,17,.75); }
.profile-cover-change-btn svg { width: 14px; height: 14px; }
/* The dropdown menu itself (Upload photo / Reposition / Remove) reuses the site's generic
   nav.dropdown > .dropdown-wrapper hover-reveal mechanism as-is (same box/shadow styling as
   every other dropdown on the site) — this just repositions it under our new trigger button
   and restores the hover-reveal, which main.css only wires up for the old ".profile .cover
   .change" class path we moved away from. */
.change.event-change-cover-holder { position: absolute; top: 16px; right: 16px; z-index: 3; }
.change.event-change-cover-holder .profile-cover-change-btn { position: static; }
.change.event-change-cover-holder .dropdown { top: 100%; right: 0; left: auto; padding-top: 8px; }
.change.event-change-cover-holder:hover .dropdown { opacity: 1; visibility: visible; }
.profile-cover-reposition-bar {
	/* Hidden by default, same as the legacy ".profile .cover .reposition-buttons" rule this
	   replaces — shown via plain jQuery .show()/.hide() (see Head widget's JS), which restores
	   a block-level display, not flex, so spacing between the two buttons uses margin on the
	   first child rather than a parent `gap` that would only apply while display:flex holds. */
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: none;
}
.profile-cover-reposition-bar > a:first-child { margin-right: 8px; }

/* ── Avatar overlapping the cover ── */
.profile-avatar-wrap {
	position: relative;
	width: 128px;
	height: 128px;
	margin: -64px 0 0 32px;
	z-index: 4;
}
.profile-avatar-wrap img {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	background: #f4f3f1;
	border: 4px solid #fff;
	box-shadow: 0 2px 10px rgba(45,62,79,.16);
	display: block;
}
.profile-avatar-change-btn {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e74c3c;
	color: #fff;
	border: 3px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(231,76,60,.3);
}
.profile-avatar-change-btn svg { width: 14px; height: 14px; }

/* Online/offline status — a badge on the avatar frame itself (top-right, since the
   change-picture camera button already sits bottom-right on own-profile views) rather than a
   separate dot/label elsewhere on the page. */
.profile-avatar-status {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #97a3ad;
	border: 3px solid #fff;
	box-shadow: 0 1px 3px rgba(45,62,79,.2);
}
.profile-avatar-status.is-online { background: #2ecc71; }

/* ── Info row: name, edit, bio, meta ── */
.profile-info { padding: 12px 32px 20px; }
.profile-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.profile-name {
	font-size: 22px;
	font-weight: 800;
	color: #1f2f3d;
	margin: 0;
	letter-spacing: -.2px;
}
.profile-name-edit {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #97a3ad;
	background: #f4f3f1;
	flex-shrink: 0;
}
.profile-name-edit:hover { color: #e74c3c; background: #fdeceb; }
.profile-name-edit svg { width: 12px; height: 12px; }
.profile-edit-btn,
.profile-follow-btn,
.profile-message-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.profile-edit-btn,
.profile-message-btn {
	background: #fff;
	border: 1.5px solid #e9e7e3;
	color: #2d3e4f;
}
.profile-edit-btn:hover,
.profile-message-btn:hover { border-color: #ddd9d3; background: #f9f9f8; }
.profile-follow-btn {
	background: #e74c3c;
	border: 0;
	color: #fff;
	box-shadow: 0 2px 8px rgba(231,76,60,.28);
}
.profile-follow-btn:hover { background: #ec7063; transform: translateY(-1px); }
.profile-follow-btn.active { background: #f4f3f1; color: #6b7680; box-shadow: none; }
.profile-follow-btn.active:hover { background: #ecebe8; }
.profile-settings-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1.5px solid #e9e7e3;
	background: #fff;
	color: #6b7680;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.profile-settings-btn:hover { border-color: #ddd9d3; color: #2d3e4f; }
.profile-settings-btn svg { width: 16px; height: 16px; }
.profile-handle { font-size: 13.5px; color: #97a3ad; margin: 2px 0 0; }
.profile-bio {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: #4a5560;
	max-width: 640px;
}
.profile-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	font-size: 13px;
	color: #6b7680;
	font-weight: 600;
}
.profile-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.profile-meta-row svg { width: 14px; height: 14px; color: #e74c3c; flex-shrink: 0; }
.profile-meta-row a { color: #6b7680; text-decoration: none; }
.profile-meta-row a:hover { color: #e74c3c; }

/* ── Secondary stats row — clickable, but visually de-emphasized under the primary tabs.
   Some entries (Was there / Places / Want there) come from the Location module's own
   menu-driven widgets (profileLinkLeft/profileLinkRight) — their markup isn't ours to control,
   so this styles the generic <li>/<a>/.num shape those widgets already use, rather than a
   custom class only our own <li>s would carry. */
.profile-stats-row {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 0;
	margin: 20px 0 0;
	padding: 16px 32px;
	border-top: 1px solid #f1f0ed;
}
.profile-stats-row li {
	display: flex;
	padding: 0 16px;
	border-right: 1px solid #f1f0ed;
}
.profile-stats-row li:last-child { border-right: 0; }
.profile-stats-row li a {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7680;
	text-decoration: none;
	white-space: nowrap;
}
.profile-stats-row li a:hover { color: #e74c3c; }
.profile-stats-row li a.active { color: #e74c3c; font-weight: 800; }
.profile-stats-row .num {
	font-size: 15px;
	font-weight: 800;
	color: #1f2f3d;
}
.profile-stats-row li a:hover .num,
.profile-stats-row li a.active .num { color: #e74c3c; }

/* ── Primary tab row (My Pins / My Boards / My Reels / My Ads) + sort ── */
.profile-tabs-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 32px;
	background: #f9f9f8;
	border-top: 1px solid #f1f0ed;
}
.profile-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 20px;
	border: 1px solid #e9e7e3;
	background: #fff;
	color: #6b7680;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(45,62,79,.04);
	transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.profile-tab:hover { border-color: #ddd9d3; transform: translateY(-1px); color: #2d3e4f; }
.profile-tab.is-active { background: #e74c3c; border-color: #e74c3c; color: #fff; box-shadow: 0 4px 12px rgba(231,76,60,.28); }
.profile-tab.is-active:hover { background: #ec7063; border-color: #ec7063; }
.profile-tab svg { width: 14px; height: 14px; }

.profile-sort select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	font-family: Lato, sans-serif;
	padding: 9px 34px 9px 16px;
	border: 1px solid #e9e7e3; border-radius: 20px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667686' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 13px;
	box-shadow: 0 1px 2px rgba(45,62,79,.04);
	color: #6b7680; font-size: 13px; font-weight: 700;
	outline: none; cursor: pointer;
}
.profile-sort select:hover { border-color: #ddd9d3; }
.profile-sort select:focus { border-color: #df4a37; box-shadow: 0 0 0 3px rgba(223,74,55,.12); }

/* ── Sidebar ── */
.profile-v2-sidebar {
	width: 300px;
	flex-shrink: 0;
	position: sticky;
	top: 76px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.profile-sidebar-card {
	background: #fff;
	border: 1px solid #eeece8;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba(45,62,79,.06);
}
.profile-sidebar-title { font-size: 14px; font-weight: 800; color: #1f2f3d; margin: 0 0 14px; }
.profile-sidebar-header {
	display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.profile-sidebar-link { font-size: 12px; font-weight: 700; color: #e74c3c; text-decoration: none; }
.profile-sidebar-link:hover { color: #ec7063; }

.profile-about-top { display: flex; align-items: center; gap: 12px; }
.profile-about-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f4f3f1; }
.profile-about-name { font-size: 14.5px; font-weight: 800; color: #1f2f3d; text-decoration: none; display: block; }
.profile-about-name:hover { color: #e74c3c; }
.profile-about-handle { font-size: 12px; color: #97a3ad; margin: 1px 0 0; }
.profile-about-edit {
	margin-left: auto;
	padding: 5px 14px;
	border-radius: 16px;
	background: #fdeceb;
	color: #e74c3c;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
}
.profile-about-edit:hover { background: #fbdbd7; }
.profile-about-bio { margin: 14px 0 0; font-size: 13px; line-height: 19px; color: #4a5560; }
.profile-about-meta { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.profile-about-meta span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6b7680; font-weight: 600; }
.profile-about-meta svg { width: 13px; height: 13px; color: #e74c3c; flex-shrink: 0; }
.profile-about-meta a { color: #6b7680; text-decoration: none; }
.profile-about-meta a:hover { color: #e74c3c; }

.profile-quote-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg,#fdeceb,#fff5f4);
	border: 1px solid #f6d9d5;
}
.profile-quote-icon {
	width: 40px; height: 40px; border-radius: 12px;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	color: #e74c3c;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(45,62,79,.06);
}
.profile-quote-icon svg { width: 18px; height: 18px; }
.profile-quote-text { font-size: 14px; font-weight: 800; color: #c0392b; line-height: 19px; }

.profile-suggest-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.profile-suggest-row:first-of-type { padding-top: 0; }
.profile-suggest-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f4f3f1; }
.profile-suggest-info { min-width: 0; flex: 1; }
.profile-suggest-name { font-size: 13px; font-weight: 700; color: #1f2f3d; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-suggest-handle { font-size: 11.5px; color: #97a3ad; }
.profile-suggest-follow {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 16px;
	border: 1.5px solid #e74c3c;
	color: #e74c3c;
	background: #fff;
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.profile-suggest-follow:hover { background: #fdeceb; }
.profile-suggest-follow.active { background: #f4f3f1; color: #97a3ad; border-color: #e9e7e3; }

.profile-ad-card { padding: 14px; }
.profile-ad-sponsored { display: block; font-size: 11px; color: #97a3ad; margin-bottom: 8px; }
.profile-ad-media { display: block; border-radius: 8px; overflow: hidden; }
.profile-ad-media img { width: 100%; display: block; }

@media (max-width: 980px) {
	.profile-v2-sidebar { display: none; }
	.profile-avatar-wrap { margin-left: 20px; }
	.profile-info { padding-left: 20px; padding-right: 20px; }
	.profile-stats-row, .profile-tabs-row { padding-left: 20px; padding-right: 20px; }
}

/* ── Boards tab: fit the main column instead of the legacy fixed 1300px container ──
   main.css sizes ".container.wide" to 1300px and each ".board" to 403px, which pushes the
   grid underneath the 300px sidebar on laptop widths (1366px). Boards keep their 403px
   design width (thumbnails inside are fixed-size) but flow into as many columns as fit. */
.profile-v2-main .container.wide { width: auto; max-width: 100%; margin: 0; }
.profile-v2-main .boards-card .boardcontainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, 403px);
	justify-content: center;
	gap: 0 14px;
}
/* .boardcontainer also carries the legacy .clearfix class, whose ::before/::after (content:"")
   become real grid items once it's display:grid — the ::before took the first cell and left an
   empty gap before the first board. Floats aren't used here any more, so drop them. */
.profile-v2-main .boards-card .boardcontainer::before,
.profile-v2-main .boards-card .boardcontainer::after { content: none; display: none; }
.profile-v2-main .boards-card .board { margin: 0 0 14px; max-width: 100%; }
/* Legacy ".no-results .container" is a fixed-width desktop container — let it fit the column,
   and keep the end-of-list line small like the user grids' "No more users!". */
.profile-v2-main .no-results .container { width: auto; max-width: 100%; }
.profile-v2-main .no-results p { font-size: 13px; font-weight: 600; color: #97a3ad; }
@media (max-width: 460px) {
	.profile-avatar-wrap { width: 96px; height: 96px; margin-top: -48px; }
	.profile-avatar-wrap img { width: 96px; height: 96px; }
	.profile-v2-main .boards-card .boardcontainer { grid-template-columns: minmax(0, 403px); }
	.profile-v2-main .boards-card .board { width: 100%; }
}

/* ── Story Highlights tray on Profile ── */
.profile-highlights-wrap {
	padding: 16px 32px;
	border-top: 1px solid #f1f0ed;
	background: #fff;
	overflow-x: auto;
	scrollbar-width: none;
}
.profile-highlights-wrap::-webkit-scrollbar { display: none; }
.profile-highlights-row {
	display: flex;
	align-items: center;
	gap: 20px;
}
.profile-highlight-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	width: 76px;
	flex-shrink: 0;
	text-decoration: none;
	user-select: none;
}
.profile-highlight-ring {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(135deg, #e74c3c, #ff7675);
	box-sizing: border-box;
	box-shadow: 0 3px 10px rgba(231,76,60,.2);
	transition: transform .15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.profile-highlight-item:hover .profile-highlight-ring {
	transform: scale(1.06);
}
.profile-highlight-ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: #f4f3f1;
}
.profile-highlight-add .profile-highlight-ring {
	background: #fdeceb;
	box-shadow: none;
	border: 2px dashed #e74c3c;
	padding: 0;
}
.profile-highlight-icon {
	font-size: 24px;
	font-weight: 700;
	color: #e74c3c;
	line-height: 1;
}
.profile-highlight-label {
	font-size: 12px;
	font-weight: 700;
	color: #2d3e4f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 76px;
	text-align: center;
}


/* Cooking challenge winner badge (Challenge module) */
.profile-badge-winner { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.profile-badge-winner:hover { background: #ffeab0; color: #6b4600; }