/*!
 * Maestro Components - bundled styling
 * Ships with the Maestro plugin (INDEX Holding) so [speakers], [exhibitors],
 * [agenda], [products] and [abstracts] render a real card/grid design out of
 * the box, instead of depending on each site's theme to already have
 * matching CSS (which is what duphat.ae's theme happens to have today, and
 * no other subsidiary site is guaranteed to).
 *
 * Colors/spacing for .speaker-*, .exhibitor*, .card-custom-* and .litymodal
 * below were extracted from duphat.ae's live, currently-approved design
 * (index-child theme) - not invented - so switching a site onto this
 * stylesheet should look the same as it does there today. The Abstracts
 * section (.maestro-abstract-*) has no live reference anywhere in the
 * subsidiary sites we checked, so it's original design work kept in the
 * same visual language (same colors/radius/spacing) rather than copied
 * from anywhere.
 *
 * Palette used throughout:
 *   #005b8f  primary blue (names, links, times)
 *   #ff8b00  accent orange (hover states)
 *   #4f4d4d  body text
 *   #828282  secondary/muted text
 *   12px     card border-radius
 */

/* ---------------------------------------------------------------------- */
/* Defensive reset                                                         */
/* Every heading (h1-h6) the components below render - names, titles,     */
/* "Sessions by this speaker", card titles - sits inside one of these     */
/* wrapper classes. Sites with their own strong global h1-h6 styling      */
/* (letter-spacing/tracking, uppercase, brand accent colors on headings)  */
/* otherwise bleed straight through, because a directly-targeted element  */
/* rule beats an inherited color/spacing value regardless of specificity. */
/* Every specific color/size rule further down also carries !important   */
/* for the same reason - this mirrors duphat's own theme CSS, which uses  */
/* !important on exactly these same title rules already.                 */
/* ---------------------------------------------------------------------- */

.speaker-card h1, .speaker-card h2, .speaker-card h3, .speaker-card h4, .speaker-card h5, .speaker-card h6,
.speaker-wrapper h1, .speaker-wrapper h2, .speaker-wrapper h3, .speaker-wrapper h4, .speaker-wrapper h5, .speaker-wrapper h6,
.exhibitor h1, .exhibitor h2, .exhibitor h3, .exhibitor h4, .exhibitor h5, .exhibitor h6,
.sessions h1, .sessions h2, .sessions h3, .sessions h4, .sessions h5, .sessions h6,
.card-custom h1, .card-custom h2, .card-custom h3, .card-custom h4, .card-custom h5, .card-custom h6,
.maestro_ehome_speaker h1, .maestro_ehome_speaker h2, .maestro_ehome_speaker h3, .maestro_ehome_speaker h4, .maestro_ehome_speaker h5, .maestro_ehome_speaker h6,
.modalbox h1, .modalbox h2, .modalbox h3, .modalbox h4, .modalbox h5, .modalbox h6 {
	letter-spacing: normal !important;
	text-transform: none !important;
	font-family: inherit !important;
}

/* ---------------------------------------------------------------------- */
/* Shared card primitives                                                  */
/* ---------------------------------------------------------------------- */

.card-custom {
	border-radius: 12px;
}

.card-custom-agenda {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	justify-content: flex-end;
	margin: 16px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(199, 30, 98, 0.2);
	position: relative;
	transition: all 0.2s;
}

@media (max-width: 767px) {
	.card-custom-agenda {
		flex-direction: column-reverse;
	}
}

.card-custom-agenda__title {
	font-size: 18px;
	margin: 4px 0 0;
	font-weight: 600;
	color: #4f4d4d !important;
}

.card-custom-agenda__speakers {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 12px;
}

.card-custom-agenda__speaker {
	display: inline-block;
	font-size: 14px;
	background: rgba(199, 30, 98, 0.05);
	padding: 6px 8px;
	margin: 0 8px 8px 0;
	border-radius: 4px;
}

.card-custom-agenda__speaker:hover {
	background: #ff8b00;
}

.card-custom-agenda__speaker:hover a,
.card-custom-agenda__speaker:hover small {
	color: #fff !important;
}

.card-custom-agenda__speaker a {
	text-decoration: none !important;
	color: #005b8f;
	font-weight: 500;
}

.card-custom-agenda__speaker a small {
	font-size: 100% !important;
	color: #828282;
	font-weight: 400;
}

.card-custom-agenda__time {
	margin-right: 16px;
	margin-top: 0 !important;
	font-weight: 600;
	position: absolute;
	top: -10px;
	left: 10px;
	padding: 0 10px;
	background: #fff;
	border-radius: 12px;
	color: #005b8f !important;
}

.card-custom-agenda__time h4 {
	font-size: 16px !important;
	margin: 0 !important;
	color: #005b8f !important;
	font-weight: 600 !important;
}

@media (max-width: 767px) {
	.card-custom-agenda__time {
		margin-bottom: 12px;
		align-self: flex-start;
	}
}

.card-custom-session {
	background: #fff;
	padding: 24px 16px 14px;
	position: relative;
	margin: 16px 0;
	border: 1px solid rgba(130, 130, 130, 0.2);
}

.card-custom-session__title {
	font-size: 18px;
	margin-bottom: 10px;
	color: #4f4d4d;
}

.card-custom-session__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.card-custom-session__speakers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.card-custom-session__speaker {
	font-size: 14px;
	background: rgba(49, 177, 162, 0.1);
	padding: 6px 8px;
	margin: 0 8px 8px 0;
	border-radius: 4px;
}

.card-custom-session__speaker:hover {
	background: #ff8b00;
}

.card-custom-session__speaker:hover a {
	color: #fff !important;
}

.card-custom-session__speaker a {
	text-decoration: none !important;
	color: #ff8b00;
}

.card-custom-session__time h4 {
	margin-top: 0;
	font-weight: 600 !important;
	color: #005b8f;
	font-size: 16px !important;
}

/* "Sessions by this speaker" / "Lectures by this speaker" list, rendered
   inside the dark .litymodal popup (see SpeakerComponent.php) - needs its
   own color since it sits on a dark background, and needs the agenda
   card's floating time-badge flattened back into normal flow since the
   modal is a narrow single column, not the wide grid the standalone
   [agenda] page uses .card-custom-agenda for. */
.sessions {
	color: #fff !important;
	border-top: 1px solid #828282;
	border-bottom: 0;
}

.sessions .card-custom {
	flex-direction: column-reverse;
}

.sessions .card-custom-agenda__time {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	padding: 0 !important;
	margin-bottom: 3px;
}

.sessions .card-custom-agenda__time h4 {
	margin-top: 0;
	font-weight: 600 !important;
	margin-bottom: 0 !important;
}

.sessions__title {
	font-size: 24px;
	margin: 24px 0 12px;
	color: #fff !important;
}

.sessions__day {
	width: 100%;
	font-weight: 400;
	opacity: 0.5;
	color: #fff !important;
}

/* ---------------------------------------------------------------------- */
/* Speakers - [speakers]                                                   */
/* ---------------------------------------------------------------------- */

.speaker-listing {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.speaker-card {
	margin: 8px;
	margin-bottom: 16px;
	width: calc(20% - 16px);
	text-align: left;
	background: #fff;
	padding: 16px;
	border-radius: 12px;
	transition: all 0.2s;
}

.speaker-card:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.speaker-card a {
	text-decoration: none;
}

@media (max-width: 1400px) {
	.speaker-card {
		width: calc(25% - 16px);
	}
}

@media (max-width: 1100px) {
	.speaker-card {
		width: calc(33.33% - 16px);
	}
}

@media (max-width: 780px) {
	.speaker-card {
		width: calc(50% - 16px);
	}
}

@media (max-width: 520px) {
	.speaker-card {
		width: 100%;
	}
}

.speaker__img {
	width: 100%;
	height: auto;
	object-position: top;
	border-radius: 12px;
}

.speaker__name {
	font-size: 20px;
	color: #005b8f;
	margin: 12px 0 4px;
	padding-left: 12px;
}

.speaker__title {
	color: #828282;
	overflow: hidden;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 0;
	padding-left: 12px;
}

/* Speaker / exhibitor / product detail modal (opened via Lity) */
.speaker-wrapper {
	display: flex;
	flex-direction: column;
	color: #fff;
}

/* Photo on the left, name/title stacked to its right (aligned to the
   bottom of the photo) - same as duphat.ae. Falls back to stacked/column
   on narrow screens since there's no room for two columns there. */
.speaker-wrapper__heading {
	display: flex;
	align-items: flex-end;
}

@media (max-width: 767px) {
	.speaker-wrapper__heading {
		flex-direction: column;
		align-items: flex-start;
	}
}

.speaker-wrapper__img {
	width: 200px;
	height: auto;
	border-radius: 12px;
	margin-bottom: 12px;
	object-fit: cover;
	flex-shrink: 0;
}

.speaker-wrapper__subdetails {
	display: flex;
	flex-direction: column;
}

.speaker-wrapper__name {
	font-size: 26px;
	margin: 0 0 0 24px;
	color: #fff !important;
}

.speaker-wrapper__title {
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 20px 24px;
	color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 767px) {
	.speaker-wrapper__name,
	.speaker-wrapper__title {
		margin-left: 0;
	}
}

.speaker-wrapper__desc {
	opacity: 0.85;
}

/* ---------------------------------------------------------------------- */
/* Exhibitors / Products - [exhibitors] / [products]                       */
/* Products reuses .speaker-listing / .speaker-card above.                 */
/* ---------------------------------------------------------------------- */

.exhibitor-listing {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
}

.exhibitor {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 24px;
	background: #fff;
	border-radius: 12px;
	transition: all 0.5s;
}

.exhibitor:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.exhibitor__image {
	width: 120px;
	height: 120px;
	padding: 12px;
	border: 1px solid rgba(130, 130, 130, 0.1);
	object-fit: contain;
	border-radius: 12px;
}

.exhibitor__detail {
	margin-left: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 640px) {
	.exhibitor__detail {
		margin-left: 0;
		margin-top: 24px;
	}
}

.exhibitor__detail a {
	text-decoration: none;
	color: #005b8f;
}

.exhibitor__title {
	font-size: 22px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	font-weight: 600;
	color: #4f4d4d;
}

.exhibitor__title span {
	font-weight: 400;
	font-size: 14px;
	padding: 4px 8px;
	background: rgba(255, 153, 0, 0.3);
	border-radius: 8px;
	color: #ff9900;
	margin-left: 12px;
}

.exhibitor__location {
	font-weight: 600;
	font-size: 16px;
	color: #828282;
	margin-bottom: 10px;
}

.exhibitor__summary {
	color: #4f4d4d;
	opacity: 0.8;
	margin-bottom: 8px;
}

.exhibitor__summary.truncated {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.exhibitor__categories span {
	display: inline-block;
	background: rgba(130, 130, 130, 0.2);
	padding: 4px 10px;
	border-radius: 6px;
	margin: 8px 6px 0 0;
}

/* ---------------------------------------------------------------------- */
/* Abstracts - [abstracts]                                                 */
/* No live reference site uses this shortcode, so this is original design */
/* work matched to the same palette/spacing as the rest of the plugin,    */
/* not a copy of anything.                                                */
/* ---------------------------------------------------------------------- */

.maestro_ehome_speaker {
	margin-top: 24px;
}

.speaker_box {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.speaker_box .box-left {
	flex: 0 0 150px;
}

.speaker_box .box-right {
	flex: 1 1 auto;
	min-width: 0;
}

.speaker_box .ehome_speaker_image {
	width: 100%;
	max-width: 150px;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
}

.ehome_speaker_title {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #4f4d4d;
	margin-bottom: 6px;
}

.ehome_speaker_bio {
	color: #828282;
	margin: 8px 0 12px;
}

.speaker_box .btn.btn-info {
	display: inline-block;
	background: #005b8f;
	color: #fff !important;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none !important;
	font-size: 14px;
}

.speaker_box .btn.btn-info:hover {
	background: #ff8b00;
}

.modalbox {
	color: #fff;
}

.modalbox .ehome_speaker_image {
	width: 100%;
	max-width: 125px;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* Pagination footer used by paginga.jquery.js (Abstracts) */
.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 24px 0;
}

.pager > div {
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid rgba(130, 130, 130, 0.3);
	color: #4f4d4d;
}

.pager > div:hover {
	background: #005b8f;
	border-color: #005b8f;
	color: #fff;
}

.pager .pageNumbers span,
.pager .pageNumbers a {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: 6px;
	cursor: pointer;
	color: #4f4d4d;
	text-decoration: none;
}

.pager .pageNumbers .active {
	background: #005b8f;
	color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Lity modal wrapper used by every component's detail popup               */
/* ---------------------------------------------------------------------- */

.litymodal {
	max-height: 5000px !important;
	background: #1c1c1c;
	padding: 32px;
	border-radius: 12px;
	max-width: 1366px;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.litymodal {
		padding: 20px;
	}
}