/*
 * Layout only.
 *
 * Markup deliberately mirrors the lsi theme's tag structure (.keyspeakerbox
 * with h3/h6/.job_title, .qabox-img + .qabox-content, .agenda-innerboxhead h5,
 * .venuebg-content-topleft/right), because the theme styles those descendant
 * tags rather than classes. Typography and colour therefore come from the
 * theme; this file only positions things, and each widget's Style tab
 * overrides both.
 *
 * Section-level theme classes (.keyspeakers, .agendabg, .sponsorsbg, .venuebg)
 * are NOT used: they carry their own background and 50-60px vertical padding,
 * which would fight the padding you set on the Elementor container.
 */

/* --- cards, shared ---------------------------------------------------- */

.lsi-eb-card {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.lsi-eb-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.lsi-eb-empty {
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: 0.6;
	text-align: center;
}

.lsi-eb__heading {
	margin-top: 0;
}

/* --- speakers grid ---------------------------------------------------- */

.lsi-eb-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px;
}

.lsi-eb-grid .lsi-eb-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Theme sets .keyspeakerbox h3 { margin: 20px 0 15px }; keep the rhythm but
   let the card control its own spacing when the theme is absent. */
.lsi-eb-grid .keyspeakerbox > :last-child {
	margin-bottom: 0;
}

/* --- agenda ----------------------------------------------------------- */

.lsi-eb-session + .lsi-eb-session {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.lsi-eb-session__head {
	display: grid;
	grid-template-columns: minmax(80px, 160px) 1fr;
	gap: 24px;
	align-items: start;
}

.lsi-eb-session__time,
.lsi-eb-session__title {
	margin: 0;
}

.lsi-eb-session__desc {
	margin-top: 12px;
}

.lsi-eb-session__people {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 20px;
}

/* .qabox is display:flex in the theme; photo column is fixed, text flows. */
.lsi-eb-person .qabox-img {
	flex: 0 0 auto;
}

.lsi-eb-person .qabox-img img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.lsi-eb-person .qabox-content {
	min-width: 0;
}

.lsi-eb-person .qabox-content > * {
	margin-top: 0;
	margin-bottom: 4px;
}

.lsi-eb-person .qabox-content > :last-child {
	margin-bottom: 0;
}

/* --- sponsors --------------------------------------------------------- */

.lsi-eb-sponsors__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
}

.lsi-eb-sponsor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

/* Logos vary wildly in aspect ratio, so constrain by height and let width
   follow. The theme's .sponsorlogo img rule is !important on width/max-width,
   which this agrees with rather than fights. */
.lsi-eb-sponsor img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 90px;
	height: auto;
	object-fit: contain;
}

.lsi-eb-sponsor a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.lsi-eb-sponsors--grey .lsi-eb-sponsor img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.lsi-eb-sponsors--grey .lsi-eb-sponsor:hover img,
.lsi-eb-sponsors--grey .lsi-eb-sponsor a:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lsi-eb-sponsors--grey .lsi-eb-sponsor img {
		transition: none;
	}
}

/* --- venue ------------------------------------------------------------ */

.lsi-eb-venue__inner {
	display: grid;
	grid-template-columns: 25% 1fr;
	gap: 40px;
	align-items: start;
}

.lsi-eb-venue__inner--no-media {
	grid-template-columns: 1fr;
}

.lsi-eb-venue__media {
	order: 0;
}

.lsi-eb-venue__body {
	order: 1;
	min-width: 0;
}

.lsi-eb-venue__media img {
	display: block;
	width: 100%;
	height: auto;
}

.lsi-eb-venue__name {
	margin-top: 0;
}

.lsi-eb-venue__body > :last-child {
	margin-bottom: 0;
}

.lsi-eb-venue__details {
	margin-top: 16px;
}

.lsi-eb-venue__details > summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.lsi-eb-venue__details > summary::-webkit-details-marker {
	display: none;
}

.lsi-eb-venue__details > summary::after {
	content: " ▾";
}

.lsi-eb-venue__details[open] > summary::after {
	content: " ▴";
}

.lsi-eb-venue__details-body {
	margin-top: 12px;
}

/* --- breakpoints ------------------------------------------------------ */

@media (max-width: 1024px) {
	.lsi-eb-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lsi-eb-session__people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lsi-eb-sponsors__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.lsi-eb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lsi-eb-session__head {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.lsi-eb-session__people {
		grid-template-columns: 1fr;
	}

	.lsi-eb-sponsors__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lsi-eb-venue__inner {
		grid-template-columns: 1fr;
	}

	.lsi-eb-venue__media {
		order: 0;
	}
}

/*
 * The location_and_address field is authored freely in ACF and on this site
 * opens with its own <h1>, which would otherwise render at browser default
 * 2em with large margins. These are floors, not a design: the widget's Body
 * typography control and the theme's .venuebg-content-topright rules both
 * override them.
 */
.lsi-eb-venue__body h1 {
	font-size: 1.6em;
	line-height: 1.25;
	margin: 0 0 0.5em;
}

.lsi-eb-venue__body h2 {
	font-size: 1.4em;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

.lsi-eb-venue__body h3,
.lsi-eb-venue__body h4 {
	font-size: 1.15em;
	line-height: 1.35;
	margin: 0 0 0.5em;
}

.lsi-eb-venue__body p {
	margin: 0 0 1em;
}

.lsi-eb-venue__body > :last-child,
.lsi-eb-venue__address > :last-child,
.lsi-eb-venue__details-body > :last-child {
	margin-bottom: 0;
}

/*
 * In the Elementor editor cards render as inert divs (no anchor, no modal), so
 * clicking one selects the widget instead of opening a popup or navigating.
 */
.elementor-editor-active .lsi-eb-card {
	cursor: default;
}