/* IAG Expo — home page (front page 63) and the event components it is made of (ex-home.php). Sizes and colours copy
   the Elementor page (call-to-action cards, kit headings in Roboto 600); gaps use one set of values. */

/* ---------- Home layout: the page's blocks, 1,140 px column, the promo video full width ---------- */
.ex-home {
	--ex-home-gutter: 32px;
	padding-bottom: var(--ex-s-6);
}
.ex-home > * {
	box-sizing: border-box;
	width: min(var(--ex-width), calc(100% - 2 * var(--ex-home-gutter)));
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}
.ex-home > .alignfull,
.ex-home > .ex-promo.alignfull { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
/* GeneratePress's own spacing around the main column and inside groups (no theme.json) is not wanted here. */
body .site-main.ex-home-main { margin: 0; padding: 0; }
.ex-home .wp-block-group__inner-container { max-width: none; padding: 0; }
.ex-home a { text-decoration: none; }

/* Headings in the components are the kit's: Roboto 600, white, centred (not the display face of page titles). */
.ex-event-card__title,
.ex-home h2 {
	font-family: var(--ex-body);
	font-weight: 600;
	color: var(--ex-text);
	text-align: center;
}

/* Intro and middle text: 23 px Roboto, as the Elementor text widgets. */
.ex-home .ex-home-lead { font-size: 23px; line-height: 1.5; }
.ex-home .ex-home-lead p { margin: 0 0 var(--ex-flow); }
.ex-home .ex-home-lead p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .ex-home .ex-home-lead { padding: 0 3em; } }

/* Gaps between the sections: one rule (the spacing rules of ex-site.css, at home-page scale). Every section starts
   --ex-s-6 below the one before; a section's own parts sit closer: the event cards under the intro (--ex-s-4), the
   PAGCOR title under its letter (--ex-flow), the stacked banners touch (they read as one strip), and the Sponsor
   Section block keeps the content rule (--ex-flow-section; its saved 45px margins give way). Elementor had 112, 30,
   80, 80, 160, 80, 20, 180, 0 here. */
.ex-home > * + * { margin-top: 120px; } /* sections well apart, as the Elementor home had (112–180px) */
.ex-home > .screen-reader-text + *, .ex-home > .ex-promo { margin-top: 0; }
.ex-home > .ex-home-intro + .ex-event-cards { margin-top: var(--ex-flow-block); }
.ex-home > .ex-home-endorse + .ex-home-endorse-title { margin-top: var(--ex-flow); }
.ex-home > .ex-home-banner + .ex-home-banner { margin-top: 0; }
.ex-home > .sponsor-section { margin-top: var(--ex-flow-section) !important; margin-bottom: 0 !important; padding: var(--ex-s-2) !important; }

.ex-home .wp-block-image { margin-bottom: 0; }
.ex-home .wp-block-image img { display: block; width: 100%; height: auto; }
.ex-home .ex-home-endorse { text-align: center; }
.ex-home .ex-home-endorse img { display: inline-block; width: auto; max-width: 100%; margin: 0 auto; }
.ex-home .ex-home-endorse-title {
	margin-bottom: 0;
	font-size: 32px;
	line-height: 1;
}

/* Promo video under the transparent header (desktop); below the solid header on phones and tablets. */
.ex-promo { margin: 0; }
.ex-promo video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}
@media (max-width: 56.25em) {
	.ex-home { padding-top: var(--ex-header-h, 90px); }
}
@media (max-width: 767px) {
	.ex-home > * + * { margin-top: 72px; }
	/* The banners at the foot run edge to edge on phones, as they did. */
	.ex-home > .ex-home-banner { width: 100%; }
}

/* ---------- Event cards ([ex_event_cards], ex-events.php): rows of three columns, each a card and its highlight
   panel; --ex-event-color = the event's colour field ---------- */
.ex-event-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--ex-s-3);
	margin-bottom: var(--ex-flow-block);
}
.ex-home > .ex-event-cards { margin-bottom: 0; }
@media (max-width: 767px) { .ex-event-cards { grid-template-columns: minmax(0, 1fr); } }
.ex-event-col { --ex-event-color: #1a1c4b; }

/* Card (was Elementor's call-to-action, classic skin): picture on top, a coloured panel below at least 300 px tall
   with its text centred, rounded corners, the picture zooms slowly on hover. */
.ex-event-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 500px;
	margin-bottom: var(--ex-s-3);
	border-radius: var(--ex-radius);
	background-color: var(--ex-event-color);
	color: #fff;
	text-align: center;
}
/* Header images at their own aspect ratio, never cropped (Cory 2026-10-28). */
.ex-event-card__img { flex: 0 0 auto; overflow: hidden; }
.ex-event-card__img a,
.ex-event-card__img img {
	display: block;
	width: 100%;
	height: auto;
}
.ex-event-card__img img {
	transition: transform 1.5s ease;
}
.ex-event-card:hover .ex-event-card__img img { transform: scale(1.2); }
.ex-event-card__body {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--ex-s-4) var(--ex-s-3);
}
.ex-event-card__title {
	margin: 0 0 var(--ex-s-3);
	font-size: 23px;
	line-height: 1.2;
}
.ex-event-card__text {
	margin: 0 0 var(--ex-s-3);
	font-size: 16px;
	line-height: 1.5;
}
.ex-event-card__button,
.ex-content .ex-event-card__button {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid #fff;
	border-radius: var(--ex-radius);
	background: transparent;
	color: var(--ex-link);
	font-family: var(--ex-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.ex-event-card__button:hover,
.ex-event-card__button:focus { background: #fff; color: var(--ex-navy); }

/* Highlight panel: the label, then the video or picture, on the event's colour. */
.ex-event-media {
	padding: var(--ex-s-2);
	border-radius: var(--ex-radius);
	background-color: var(--ex-event-color);
}
.ex-event-media__label {
	margin: 0 0 var(--ex-s-2);
	font-family: var(--ex-body);
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	text-align: center;
}
.ex-event-media figure { margin: 0; }
.ex-event-media__img img { display: block; width: 100%; height: auto; }