/**
* Donara Events — public event page.
*
* Builds on the core Donara public stylesheet (.donara base, form controls,
* buttons, brand variables). Only Events-specific layout lives here. Mobile
* first; the organization's brand variables drive every color.
*/
.donara-event {
background: var(--donara-background);
color: var(--donara-text);
max-width: 44rem;
margin: 0 auto;
padding: 1rem;
}
@media (min-width: 64em) {
.donara-event {
max-width: 72rem;
padding: 0 1.5rem 2rem;
}
}
/*
* Block-theme width compatibility (belt-and-braces, second line of defense
* after the `alignfull` class the template already adds — see event.php).
* Many block themes constrain any child of their content region to a global
* content width via theme.json's `is-layout-constrained > *` mechanism, at
* the same specificity as our own bare `.donara-event` rule above; whichever
* stylesheet the theme happens to load later in the cascade then wins,
* regardless of `alignfull`, in themes/embedding contexts that don't fully
* honor that class (a classic, non-block theme; a shortcode dropped into a
* context that strips alignment classes). Repeating the class together with
* the `data-donara-event` attribute the template always renders raises the
* specificity just enough to win deterministically, without an `!important`
* and without touching anything outside this one component.
*/
.donara-event[data-donara-event] {
max-width: 44rem;
}
@media (min-width: 64em) {
.donara-event[data-donara-event] {
max-width: 72rem;
}
}
.donara-event__header {
margin-bottom: 1.5rem;
}
/*
* Layout. A single column, in source order (info, then registration), at
* every width up to desktop — the order a screen reader or keyboard user
* meets things never depends on viewport. At desktop the two regions become
* side-by-side grid tracks: a compact organization/event info column and a
* wider registration column. The registration column then splits itself
* (further down) into a main stepper area and a sticky order-summary rail,
* which is what reads as three columns at wide widths.
*/
.donara-event__layout {
display: block;
}
.donara-event__info {
min-width: 0;
}
@media (min-width: 64em) {
.donara-event__layout {
display: grid;
grid-template-columns: 21rem minmax(0, 1fr);
gap: 3rem;
align-items: start;
}
.donara-event__info {
position: sticky;
top: 1.5rem;
}
}
/*
* Hero. Always a photo (organization-uploaded) or a branded two-color
* gradient — never a broken image, an empty frame, or generic stock art. A
* scrim sits under the title/type text in both cases so the same white text
* stays readable regardless of what the photo looks like or which two brand
* colors an organization picked; it is a bottom-weighted gradient, not a
* flat dark panel over the whole image. Sized with aspect-ratio (not a fixed
* pixel height) so the reserved space is correct before the image finishes
* loading — no layout shift — while still scaling with viewport width.
*/
.donara-event__hero {
position: relative;
overflow: hidden;
margin: -1rem -1rem 1.5rem;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--donara-primary) 0%, var(--donara-primary-strong) 100%);
}
.donara-event__hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.donara-event__hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.32) 45%, rgba(0, 0, 0, 0) 75%);
}
.donara-event__hero-content {
position: absolute;
inset: auto 0 0 0;
padding: 1.25rem 1rem;
}
.donara-event__hero .donara-event__logo {
display: block;
max-height: 40px;
width: auto;
margin-bottom: 0.75rem;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.donara-event__hero .donara-event__type {
margin: 0 0 0.25rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
opacity: 0.9;
}
.donara-event__hero .donara-event__title {
margin: 0;
font-family: var(--donara-font-heading);
font-size: 1.5rem;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
@media (min-width: 48em) {
.donara-event__hero {
aspect-ratio: 2.4 / 1;
border-radius: var(--donara-radius);
margin: 0 0 1.5rem;
}
.donara-event__hero-content {
padding: 2rem 2.5rem;
}
.donara-event__hero .donara-event__title {
font-size: 2.25rem;
}
}
.donara-event__meta {
display: grid;
grid-template-columns: 1fr;
gap: 0.875rem;
margin: 0;
padding: 1rem;
background: var(--donara-surface);
border: 1px solid var(--donara-border);
border-radius: var(--donara-radius);
}
.donara-event__meta-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
/* Each row's fact is its own single-pair (see event.php); reset the
browser's default dl margin so it lays out flush with the icon exactly as
the old wrapper div did. */
.donara-event__meta-item dl {
margin: 0;
min-width: 0;
}
.donara-event__meta-icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
color: var(--donara-primary-strong);
}
.donara-event__meta-item dt {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--donara-muted);
margin: 0 0 0.125rem;
}
.donara-event__meta-item dd {
margin: 0;
color: var(--donara-heading);
}
.donara-event__tz {
display: block;
font-size: 0.8125rem;
color: var(--donara-muted);
}
.donara-event__description,
.donara-event__instructions {
margin: 1.25rem 0 0;
line-height: 1.6;
}
/* Cancellation/refund policy card — the same visual language as the meta
card, so it reads as one more fact about the event rather than a warning. */
.donara-event__policy {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 1.25rem 0 0;
padding: 1rem;
background: var(--donara-surface);
border: 1px solid var(--donara-border);
border-radius: var(--donara-radius);
}
.donara-event__policy .donara-event__meta-icon {
margin-top: 0.1875rem;
}
.donara-event__policy-title {
margin: 0 0 0.25rem;
font-weight: 600;
color: var(--donara-heading);
}
.donara-event__policy p {
margin: 0 0 0.375rem;
font-size: 0.875rem;
color: var(--donara-text);
}
.donara-event__policy p:last-child {
margin-bottom: 0;
}
.donara-event__register {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--donara-border);
}
.donara-event__register-heading {
margin: 0 0 1rem;
font-family: var(--donara-font-heading);
font-size: 1.375rem;
color: var(--donara-heading);
}
@media (min-width: 64em) {
/* Second grid track already reads as its own column; the divider that
separated it from the info card above in the single-column layout
would just be a stray line floating beside the info card. */
.donara-event__register {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* Stepper ----------------------------------------------------------------
* A progress indicator over the existing single-form/single-submit flow —
* every field from every step stays mounted in the same