/* --------------------------------------------|
|                                              |
| Component Section                            |
|                                              |
| Per-section options from the layout settings |
| drawer (blueprints/fields/layout-standard).  |
| Markup: snippets/inc/sections.inc.php        |
|                                              |
| "Default" emits no class at all, so an       |
| untouched section keeps looking exactly as   |
| before — including the site-wide section     |
| colour that event.css paints.                |
|                                              |
|-------------------------------------------- */

/* --------------------------------------------|
| Background                                   |
|-------------------------------------------- */

.section--bg-transparent .section__inner {
	background-color: transparent;
}

.section--bg-light .section__inner {
	background-color: var(--color-light);
	padding: 20px 40px;
}

.section--bg-accent .section__inner {
	background-color: var(--color-accent);
	color: var(--color-light);
	padding: 20px 40px;
}

/* Pair the text with the filled background instead of letting the global
   headline and link colours fight it. */
.section--bg-accent .section__inner :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, a) {
	color: inherit;
}

/* The legacy look: content card floating on the body pattern. */
.section--bg-card .section__inner {
	background-color: rgba(255, 255, 255, 0.88);
	padding: 10px 40px 30px 40px;
}

/* --------------------------------------------|
| Width                                        |
|-------------------------------------------- */

.section--w-narrow .section__inner {
	max-width: var(--layout-page-maxwidth-narrow);
}

.section--w-full .section__inner {
	max-width: none;
}

/* layout.css sets the small-screen side padding with !important; this file
   loads later in the bundle, so an equally important rule wins here. */
@media screen and (max-width: 1200px) {
	.section--w-full .section__inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* --------------------------------------------|
| Text alignment                               |
|-------------------------------------------- */

/* Applies to the whole row. Blocks carrying their own alignment class
   (heading, image) sit deeper and keep winning.

   text-align only reaches inline content. Flex/grid components (submenu,
   button rows, …) ignore it — they follow the section alignment by
   consuming the inherited custom property instead:
       justify-content: var(--section-justify, left);
   Wire any new flex component the same way (see .menu--sub in
   component.nav.css). */
.section--align-center .section__inner {
	text-align: center;
	--section-justify: center;
}

.section--align-right .section__inner {
	text-align: right;
	--section-justify: flex-end;
}

/* --------------------------------------------|
| Space below                                  |
|-------------------------------------------- */

/* The base rhythm comes from .block { margin-bottom: 40px } inside the grid,
   so these only nudge it. */
.section--gap-compact {
	margin-bottom: -20px;
}

.section--gap-large {
	margin-bottom: 40px;
}

/* --------------------------------------------|
| Page title block                             |
|-------------------------------------------- */

/* Deliberately not the global h1 colour: content headlines stay on the accent
   colour, the page title follows the primary colour like the legacy site.
   --color-page-title comes from the Event tab when it is filled. */
.pagetitle {
	color: var(--color-page-title, var(--color-primary));
}

/* Inside a filled section the pairing above wins — the title should not punch
   a dark hole into a coloured band. */
.section--bg-accent .pagetitle {
	color: inherit;
}