/**
 * Loopin Modern — public frontend (explore, profile, pin, stories).
 * Shell: Home; people grids: Results; media cards: Home hero.
 */

.loopin-theme--modern.loopin-social,
.loopin-theme--modern#loopin-social-wrap {
	background: transparent;
}

.loopin-theme--modern .loopin-social-nav,
.loopin-theme--modern .loopin-social-subheader {
	border-radius: var(--loopin-ref-radius-card);
	background: var(--loopin-ref-glass-strong);
	border: 1px solid var(--loopin-ref-hairline);
	box-shadow: var(--loopin-ref-shadow-control);
	overflow: visible;
}

@media (max-width: 767px) {
	.loopin-theme--modern .loopin-social-subheader {
		/* Full-bleed top bar: pill radius was clipping the login CTA */
		border-radius: 0;
		border-inline: 0;
		border-top: 0;
		margin-inline: 0;
		width: 100%;
		max-width: none;
		overflow: visible;
	}
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.loopin-theme--modern .loopin-social-nav {
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}
}

.loopin-theme--modern .loopin-public-profile-header,
.loopin-theme--modern .loopin-profile-hero {
	border-radius: var(--loopin-ref-radius-card-large);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: var(--loopin-ref-shadow-card);
	padding: 1.25rem;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
	.loopin-theme--modern .loopin-public-profile-header {
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
	}
}

.loopin-theme--modern .loopin-public-profile-avatar img,
.loopin-theme--modern .loopin-profile-avatar img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 8px 20px rgba(120, 90, 140, 0.16);
	background: var(--loopin-ref-gradient-iridescent);
}

.loopin-theme--modern .loopin-public-profile-actions .loopin-btn,
.loopin-theme--modern .loopin-follow-button,
.loopin-theme--modern .loopin-save-post-button {
	min-height: 44px;
	border-radius: var(--loopin-ref-radius-pill);
}

.loopin-theme--modern .loopin-follow-button.is-following,
.loopin-theme--modern .loopin-save-post-button.is-saved {
	background: var(--loopin-ref-ink);
	color: #fff;
	border-color: var(--loopin-ref-ink);
}

/* Kill Classic Pinterest-red CTAs on public surfaces */
.loopin-theme--modern .loopin-explore-search-submit,
.loopin-theme--modern .loopin-pin-save,
.loopin-theme--modern .loopin-browse-toolbar button[type="submit"],
body.loopin-ui-theme--modern .loopin-explore-search-submit,
body.loopin-ui-theme--modern .loopin-pin-save {
	background: var(--loopin-ref-ink);
	background-image: none;
	color: #fff;
	border: 1px solid var(--loopin-ref-ink);
	border-radius: var(--loopin-ref-radius-pill);
	box-shadow: var(--loopin-ref-shadow-cta);
	min-height: 44px;
	font-weight: 500;
}

.loopin-theme--modern .loopin-explore-search-submit:hover,
.loopin-theme--modern .loopin-pin-save:hover,
body.loopin-ui-theme--modern .loopin-explore-search-submit:hover,
body.loopin-ui-theme--modern .loopin-pin-save:hover {
	background: #1a1a1c;
	color: #fff;
}

.loopin-theme--modern .loopin-pin-icon-btn.is-liked .loopin-pin-icon-heart,
.loopin-theme--modern .loopin-like-btn.is-liked svg {
	fill: var(--loopin-ref-ink);
	stroke: var(--loopin-ref-ink);
}

.loopin-theme--modern .loopin-explore-search,
.loopin-theme--modern .loopin-browse-search,
.loopin-theme--modern .loopin-explore-search-form {
	border-radius: var(--loopin-ref-radius-pill);
	background: var(--loopin-ref-glass-strong);
	border: 1px solid var(--loopin-ref-hairline);
	box-shadow: var(--loopin-ref-shadow-control);
}

.loopin-theme--modern #loopin-feed-grid,
.loopin-theme--modern #loopin-profile-portfolio-grid,
.loopin-theme--modern .loopin-portfolio-grid {
	gap: 0.85rem;
}

.loopin-theme--modern .loopin-portfolio-card,
.loopin-theme--modern .loopin-feed-card {
	border-radius: var(--loopin-ref-radius-card-large);
}

.loopin-theme--modern .loopin-specialist-card,
.loopin-theme--modern .loopin-artist-card {
	gap: 0.5rem;
}

.loopin-theme--modern .loopin-specialist-card .loopin-specialist-name,
.loopin-theme--modern .loopin-artist-card .loopin-artist-name {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--loopin-ref-ink);
	line-height: 1.15;
}

.loopin-theme--modern .loopin-specialist-card .loopin-specialist-meta,
.loopin-theme--modern .loopin-artist-card .loopin-artist-meta,
.loopin-theme--modern .loopin-specialist-location {
	font-size: 0.68rem;
	color: var(--loopin-ref-muted-2);
	line-height: 1.2;
}

.loopin-theme--modern .loopin-stories-bar,
.loopin-theme--modern .loopin-global-stories {
	padding-block: 0.65rem;
}

.loopin-theme--modern .loopin-story-item .loopin-story-avatar,
.loopin-theme--modern .loopin-stories-item img {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
}

.loopin-theme--modern .loopin-pin-page-wrap,
.loopin-theme--modern .loopin-pin-layout {
	gap: 1rem;
}

.loopin-theme--modern .loopin-pin-meta,
.loopin-theme--modern .loopin-pin-comments {
	border-radius: var(--loopin-ref-radius-card);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.36));
	border: 1px solid rgba(255, 255, 255, 0.78);
	box-shadow: var(--loopin-ref-shadow-card);
	padding: 1rem;
}

@media (min-width: 1024px) {
	.loopin-theme--modern #loopin-feed-grid,
	.loopin-theme--modern #loopin-profile-portfolio-grid {
		gap: 1.1rem;
	}
}