/**
 * Dr. Max Polo gallery landing page accordion.
 */

.polo-gallery-accordion {
	background-color: #f8f7f1;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.polo-gallery-accordion__panel {
	background-color: var(--polo-panel-bg, #334a52);
	margin: 133px 0 0;
	padding: 132px 20px 48px;
	position: relative;
	text-align: center;
}

.polo-gallery-accordion__panel:first-child {
	margin-top: 80px;
}

.polo-gallery-accordion__media {
	border-radius: 50%;
	height: 205px;
	left: 50%;
	margin: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 205px;
	z-index: 2;
}

.polo-gallery-accordion__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.polo-gallery-accordion__title {
	color: #ffffff;
	font-family: Jost, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 24px;
	text-align: center;
}

.polo-gallery-accordion__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.polo-gallery-accordion__item {
	margin: 0 0 25px;
}

.polo-gallery-accordion__item:last-child {
	margin-bottom: 0;
}

.polo-gallery-accordion__item a {
	color: #ffffff;
	display: inline-block;
	font-family: Jost, sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
}

.polo-gallery-accordion__item a:hover,
.polo-gallery-accordion__item a:focus {
	color: #e4dfd3;
	text-decoration: underline;
}

.polo-gallery-accordion__toggle-text {
	color: #ffffff;
	font-family: Jost, sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.6px;
	margin: 33px 0 15px !important;
	text-transform: uppercase;
}

.polo-gallery-accordion__toggle {
	align-items: center;
	background-color: #709dc1;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	height: 50px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 50px;
}

.polo-gallery-accordion__toggle:focus {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.polo-gallery-accordion__icon {
	display: block;
	flex-shrink: 0;
	height: 12px;
	width: 12px;
	position: relative;
}

.polo-gallery-accordion__icon::before {
	border-bottom: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 12px;
	transform: rotate(45deg) translateY(-3px);
	transform-origin: center center;
	width: 12px;
	position: absolute;
    right: 2px;
}

.polo-gallery-accordion__panel.is-expanded .polo-gallery-accordion__icon::before {
	transform: rotate(-135deg) translateY(3px);
	top: 4px;
}

.polo-gallery-accordion__panel.is-expanded .polo-gallery-accordion__toggle-text {
	display: none;
}

.polo-gallery-accordion__panel.is-expanded .polo-gallery-accordion__toggle {
	margin-top: 20px;
}

/* Mobile: hide legacy procedure button columns only (not appointment/reviews). */
@media (max-width: 767px) {
	body.polo-gallery-landing .polo-gallery-legacy-grid > .fl-row-content-wrap > .fl-row-content > .fl-col-group.fl-node-xejdqlinwu4y,
	body.polo-gallery-landing .polo-gallery-legacy-grid > .fl-row-content-wrap > .fl-row-content > .fl-col-group.fl-node-bf890s4v2jn6 {
		display: none !important;
	}

	body.polo-gallery-landing .fl-row:has([data-polo-gallery-accordion]) > .fl-row-content-wrap,
	body.polo-gallery-landing .fl-row:has([data-polo-gallery-accordion]) > .fl-row-content-wrap > .fl-row-content {
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.polo-gallery-landing .fl-row:has([data-polo-gallery-accordion]) .fl-col-content,
	body.polo-gallery-landing .fl-row:has([data-polo-gallery-accordion]) .fl-module-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.polo-gallery-accordion {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: 100vw;
		width: 100vw;
	}

	.polo-gallery-accordion__panel {
		width: 100%;
	}

	.polo-gallery-accordion__panel:not(.is-expanded) .polo-gallery-accordion__list {
		display: none;
	}
}

/* Desktop: show legacy grid, hide accordion row. */
@media (min-width: 768px) {
	body.polo-gallery-landing [data-polo-gallery-accordion] {
		display: none !important;
	}

	.polo-gallery-accordion {
		max-width: 480px;
	}

	.polo-gallery-accordion__panel:not(.is-expanded) .polo-gallery-accordion__toggle-text {
		display: none;
	}

	.polo-gallery-accordion__panel:not(.is-expanded) .polo-gallery-accordion__item:nth-child(n + 2) {
		display: list-item;
	}

	.polo-gallery-accordion__toggle {
		display: none;
	}
}