/* KWCS event-header styles — single event page banner. */

.event-header {
    position: relative;
    overflow: hidden;
    background: #FFC80B;
    background: radial-gradient(circle, rgba(255, 200, 11, 1) 0%, rgba(245, 166, 36, 1) 100%);
    /* The band bleeds edge to edge but its content sits in the same 1280px
       frame as the page heroes, so the title lines up with every other page
       header on wide screens instead of hugging the viewport edge. */
    --event-header-gutter: max(80px, calc((100% - 1280px) / 2));
    padding: 80px var(--event-header-gutter) 72px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
    align-items: center;
  }

.event-header-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
  }

.event-header-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy-deep);
    text-decoration: none;
    margin-bottom: 22px;
    opacity: 0.85;
    transition: opacity 0.18s;
  }

.event-header-back:hover { opacity: 1; }

.event-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

.event-header-meta .event-date-badge {
    position: static;
    background: rgba(255, 255, 255, 0.75);
    color: var(--navy-deep);
  }

/* The date badge is shared with the event cards, where it carries a bottom
   margin; in this row that margin lifted it above the location pill. Both
   pills get identical box metrics here so they sit level. */
.event-header-meta .event-date-badge,
.event-header-location {
    margin: 0;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.2;
  }

.event-header-location {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy-deep);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    text-decoration: none;
  }

.event-header-location:hover { background: rgba(255, 255, 255, 0.8); }

.event-header-title {
    font-size: clamp(38px, 4.6vw, 66px);
    line-height: 1.02;
    color: var(--navy-deep);
    margin-bottom: 18px;
  }

.event-header-desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--navy-deep);
    font-weight: 600;
    max-width: 620px;
    margin-bottom: 30px;
    opacity: 0.92;
  }

.event-header-visual {
    position: relative;
    z-index: 2;
  }

.event-header-visual img {
    width: 100%;
    border-radius: 22px;
    border: 6px solid white;
    box-shadow: 0 18px 44px rgba(20, 55, 107, 0.22);
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

/* The single-event body. Plain copy sits in a 760px reading column, but
   full-width blocks (core page sections, the KWCS bands) break out edge to
   edge exactly as they do on ordinary pages, and wide blocks get the wide
   frame. The column lives on the children rather than the wrapper so an
   alignfull section is never trapped inside it. */
.event-body {
    --event-body-gutter: 32px;
    padding: 72px 0 96px;
    font-size: 17.5px;
    line-height: 1.75;
  }

.event-body .wp-block-post-content > * {
    max-width: min(760px, calc(100% - var(--event-body-gutter) * 2));
    margin-left: auto;
    margin-right: auto;
  }

.event-body .wp-block-post-content > .alignwide {
    max-width: min(1200px, calc(100% - var(--event-body-gutter) * 2));
  }

.event-body .wp-block-post-content > .alignfull { max-width: none; }

/* A section band that opens or closes the body butts straight up against
   the header or the footer rather than floating in a strip of page colour. */
.event-body:has(.wp-block-post-content > .alignfull:first-child) { padding-top: 0; }
.event-body:has(.wp-block-post-content > .alignfull:last-child) { padding-bottom: 0; }

/* Prose rules apply to the reading column only, so they never override the
   headings and paragraphs inside a section band. */
.event-body .wp-block-post-content > :is(h2, h3) {
    color: var(--navy-deep);
    margin: 34px auto 14px;
  }

.event-body .wp-block-post-content > p { margin-bottom: 18px; }

.event-body .wp-block-post-content > :is(ul, ol) { padding-left: 22px; margin-bottom: 18px; }

.event-body .wp-block-post-content > :is(ul, ol) li { margin-bottom: 8px; }

@media (max-width: 1024px) {
  .event-header {
    grid-template-columns: 1fr;
    padding: 64px 32px 56px;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .event-header { padding: 48px 20px 44px; }
  .event-body { --event-body-gutter: 20px; padding: 48px 0 72px; }
}