/**
 * Classes & Events page template: hero banner and page layout.
 * Built on design-system.css and class-types.css.
 *
 * Hero values are copied from Elementor's generated CSS so this page matches
 * the Shop and Services heroes without loading Elementor:
 * - Container: uploads/elementor/css/post-33448.css (#7523ba54): min-height
 *   335px, content width 1163px from 768px up, flex column, justify center,
 *   classic background image (no size or position set, so it tiles at
 *   500x500 from the top left).
 * - Container defaults: Elementor frontend.css .e-con padding 10px; kit
 *   (post-33386.css) widget spacing 20px.
 * - The Elementor hero starts with an empty text widget (a leftover Beaver
 *   Builder block), which adds one 20px gap above the title. Reproduced as
 *   extra top padding so the title sits at the same height as on Shop.
 * - Title: post-33448.css (#7710d191) Tipique, color global fd255e7
 *   (#F8F7F0), centered; no size set, so the theme's h1 size (2.5rem) applies;
 *   Elementor .elementor-heading-title line-height 1. Elementor sets weight
 *   600, which fakes bold on Tipique; normal weight here on purpose.
 */

/* Hero ------------------------------------------------------------------- */

.ql-classes-events .ql-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 335px;
	margin: 0;
	padding: 30px 10px 10px;
	background-color: #a65f46; /* Average color of the image, shown while it loads. */
	background-image: url("../../../../uploads/2025/07/il_fullxfull.7001210792_ib16.jpg");
	color: #f8f7f0;
}

.ql-classes-events .ql-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.ql-classes-events .ql-hero__inner {
		max-width: 1163px;
	}
}

.ql-classes-events .ql-hero__title {
	margin: 0;
	padding: 0;
	color: #f8f7f0;
	font-family: var(--ql-font-heading);
	font-size: 2.5rem;
	line-height: 1;
	text-align: center;
}

/* Tipique only has a Regular weight; anything bolder is browser-faked. */
.ql-classes-events .ql-hero h1 {
	font-weight: normal;
}

/* Page body -------------------------------------------------------------- */

.ql-classes-events .ql-classes-events__body {
	max-width: calc(var(--ql-container-width) + 2 * var(--ql-space-4));
	margin: 0 auto;
	padding: var(--ql-space-8) var(--ql-space-4);
}

.ql-classes-events .ql-classes-events__intro {
	max-width: 70ch;
	margin: 0 0 var(--ql-space-6);
	font-size: max(1.25rem, 20px);
}

.ql-classes-events .ql-classes-events__intro > :first-child {
	margin-top: 0;
}

.ql-classes-events .ql-classes-events__intro > :last-child {
	margin-bottom: 0;
}