/* Public profile pages: /ro/artist/{slug} and /ro/organizator/{slug}, and the "Pe scena" cast on the
   event page. Loaded by both templates (classic and Dynamic Ticket). Global rules, not a tenant's, so
   they live here and not in media/css/tenant/. The accent colour comes inline from style_settings.
   Based on the artist page prototype validated with the client. */

.profile-page {
	padding-top: 18px;
	padding-bottom: 48px;
	color: #2b2f28;
}

.profile-crumbs {
	font-size: 12px;
	color: #8a8d82;
	margin-bottom: 14px;
}

.profile-crumbs a {
	color: #8a8d82;
	text-decoration: none;
}

.profile-crumbs a:hover {
	text-decoration: underline;
}

.profile-crumbs span {
	margin: 0 5px;
}

/* Artist: portrait on the left, role, name and bio on the right */
.profile-hero {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	margin-bottom: 8px;
}

.profile-portrait {
	flex: 0 0 210px;
	width: 210px;
	/* 7:10, the "Poster portret" upload type the artist photo is cropped to: shown whole, no extra crop. */
	aspect-ratio: 7 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(150deg, #3f4a44, #232b27);
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.profile-initials {
	font-size: 46px;
	font-weight: 700;
	color: rgba(255, 255, 255, .85);
	font-family: 'Yanone Kaffeesatz', sans-serif;
}

.profile-intro {
	flex: 1 1 auto;
	min-width: 0;
}

.profile-role {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 2px 0 4px;
}

.profile-name {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 46px;
	line-height: 1;
	margin: 0 0 12px;
	font-weight: 700;
}

.profile-bio {
	color: #55594f;
	font-size: 14.5px;
	line-height: 1.65;
	max-width: 62ch;
	margin: 0;
}

.profile-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.profile-chip {
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid #ddd8ce;
	color: #55594f;
	background: #f6f4f0;
}

.profile-chip-solid {
	color: #fff;
	border-color: transparent;
	font-weight: 500;
}

/* Organizer: one wide banner image, the name and description below. 1.91:1, the "Event banner"
   upload type (1200x628) it is cropped to: shown whole, no extra crop. */
.profile-banner {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1.91 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(120deg, #1f3a32, #3f4a44);
	background-size: cover;
	background-position: center;
}

.profile-banner-text {
	margin: 16px 0 8px;
}

/* Sections */
.profile-block-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid #e6e1d8;
	padding-top: 18px;
	margin-top: 26px;
}

.profile-block-title h2 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 30px;
	margin: 0;
	font-weight: 600;
}

.profile-block-title span {
	font-size: 12.5px;
	color: #8a8d82;
}

.profile-block-note {
	font-size: 13px;
	color: #8a8d82;
	margin: 4px 0 0;
}

/* Popular events: a carousel of the events' banners (1.91:1), each linking to its event; large
   see-through arrows, no page dots */
.profile-popular {
	margin-top: 14px;
}

.profile-popular .splide__slide a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #e6e1d8;
}

.profile-popular .splide__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 1.91 / 1;
	object-fit: cover;
	transition: transform .2s ease;
}

.profile-popular .splide__slide a:hover img {
	transform: scale(1.03);
}

.profile-popular .splide__arrow {
	width: 52px;
	height: 52px;
	background: #fff;
	opacity: .6;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
	transition: opacity .15s ease;
}

.profile-popular .splide__arrow:hover:not(:disabled) {
	opacity: .95;
}

.profile-popular .splide__arrow svg {
	width: 22px;
	height: 22px;
	fill: #2b2f28;
}

.profile-popular .splide__arrow--prev {
	left: 14px;
}

.profile-popular .splide__arrow--next {
	right: 14px;
}

/* Past events: compact list, no links (an ended event has no page of its own) */
.profile-past {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.profile-past > li {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	border: 1px solid #e6e1d8;
	border-radius: 9px;
	padding: 11px 14px;
	background: #f7f5f1;
}

.profile-date {
	text-align: center;
	line-height: 1;
	font-family: 'Yanone Kaffeesatz', sans-serif;
}

.profile-date b {
	display: block;
	font-size: 27px;
	font-weight: 700;
	color: #8a8d82;
}

.profile-date span {
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #8a8d82;
	font-family: 'Poppins', sans-serif;
}

.profile-past-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

.profile-past-where {
	display: block;
	font-size: 12.5px;
	color: #8a8d82;
	margin-top: 2px;
}

.profile-empty {
	border: 1px dashed #cfc8ba;
	border-radius: 10px;
	padding: 30px 20px;
	text-align: center;
	background: #f7f5f1;
	margin-top: 22px;
}

.profile-empty p {
	margin: 0;
	font-size: 15px;
	color: #55594f;
}

.profile-empty .profile-empty-sub {
	font-size: 13px;
	color: #8a8d82;
	margin-top: 6px;
}

.profile-btn {
	display: inline-block;
	margin-top: 16px;
	font-size: 12.5px;
	font-weight: 500;
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	white-space: nowrap;
	text-decoration: none;
}

a.profile-btn:hover {
	color: #fff;
	opacity: .92;
}

/* "Pe scena" on the event page: small cards, every artist, a swipe carousel on phones */
.event-cast {
	margin: 26px 0 10px;
}

.event-cast h3 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 26px;
	margin: 0 0 12px;
	font-weight: 600;
}

.event-cast-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 12px;
	max-width: 760px;
}

.event-cast-list a,
.event-cast-list .event-cast-nolink {
	display: block;
	border: 1px solid #e6e1d8;
	border-radius: 9px;
	padding: 0 0 8px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.event-cast-list a:hover {
	border-color: #cfc8ba;
	box-shadow: 0 8px 20px -14px rgba(28, 31, 27, .45);
}

.event-cast-photo,
.event-cast-initials {
	width: 100%;
	aspect-ratio: 4 / 5;
	display: block;
	object-fit: cover;
	object-position: center top;
	background: #e6e1d8;
	margin-bottom: 7px;
}

.event-cast-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, #4a7f68, #23453a);
	color: #fff;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 26px;
	font-weight: 600;
}

.event-cast-name {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	padding: 0 6px;
}

.event-organizer {
	margin: 14px 0 6px;
	font-size: 14px;
}

.event-organizer a {
	font-weight: 600;
}

@media (max-width: 767px) {
	.profile-hero {
		gap: 16px;
	}

	.profile-portrait {
		flex-basis: 128px;
		width: 128px;
	}

	.profile-name {
		font-size: 32px;
	}

	.profile-popular .splide__arrow {
		width: 42px;
		height: 42px;
	}

	.profile-popular .splide__arrow svg {
		width: 18px;
		height: 18px;
	}

	.profile-popular .splide__arrow--prev {
		left: 8px;
	}

	.profile-popular .splide__arrow--next {
		right: 8px;
	}

	/* On phones the cast is a horizontal swipe carousel, up to 4 cards in view. */
	.event-cast-list {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 8px;
		padding-bottom: 4px;
	}

	.event-cast-list a,
	.event-cast-list .event-cast-nolink {
		flex: 0 0 calc((100% - 24px) / 4);
		min-width: 70px;
		scroll-snap-align: start;
	}

	.event-cast-name {
		font-size: 11px;
		padding: 0 4px;
	}
}

@media (max-width: 480px) {
	.profile-hero {
		flex-direction: column;
	}

	.profile-portrait {
		width: 148px;
		flex-basis: auto;
	}
}