/* 14 Oct 2026 — Birthday hero is the spacing reference.
   Scope deliberately limited to the FIRST Classes and What's On heroes.
   Keep all existing content, colours, fonts, images, event behaviour and links. */

/* Shared Birthday hero frame: same responsive desktop height + outer padding. */
body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro,
body.compact-rhythm main > section.whats-latest-hero {
  box-sizing:border-box;
  min-height:clamp(455px,57svh,560px)!important;
  height:auto!important;
  padding:clamp(30px,4vw,54px) var(--pad)!important;
  align-items:center!important;
}

/* Classes: group the kicker WITH its heading, body and CTA, as Birthday does.
   The image remains in the same right column and the grid is centered. */
body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro {
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:0!important;
}
body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro > .classes-colour-inner {
  width:100%;
  margin:0!important;
  align-items:center!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy > .eyebrow {
  display:block;
  margin:0!important;
  line-height:1.4!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 {
  margin:12px 0 24px!important;
  line-height:.89!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 > .hand {
  margin:clamp(12px,1.3vw,18px) 0 0 auto!important;
  padding:0 3px 4px!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy > p {
  margin:16px 0 0!important;
  line-height:1.38!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-hero-link {
  margin-top:18px!important;
  display:flex!important;
  width:max-content;
  max-width:100%;
}

/* What's On: the same kicker -> title -> handwriting -> copy -> CTA rhythm. */
body.compact-rhythm main > section.whats-latest-hero .whats-latest-copy {
  align-self:center!important;
}
body.compact-rhythm main > section.whats-latest-hero .whats-latest-copy h1.co-overlay-title {
  margin:12px 0 24px!important;
}
body.compact-rhythm main > section.whats-latest-hero .whats-latest-copy > p {
  margin:16px 0 0!important;
  line-height:1.38!important;
}
body.compact-rhythm main > section.whats-latest-hero .whats-hero-links {
  margin-top:18px!important;
}
/* Wider but shallower event photo keeps the full LIVE event/date/buttons visible,
   without changing carousel mechanics or event banner imagery. Desktop only. */
@media(min-width:1081px) {
  body.compact-rhythm main > section.whats-latest-hero .latest-event-banner {
    aspect-ratio:2.1/1!important;
  }
}
/* Like Birthday, small screens grow with actual content, not a forced panel.
   Preserve event card/CTA visibility and the existing stacked image layout. */
@media(max-width:1080px) {
  body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro,
  body.compact-rhythm main > section.whats-latest-hero {
    min-height:0!important;
    align-items:stretch!important;
  }
  body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro > .classes-colour-inner {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:20px!important;
  }
}
@media(max-width:760px) {
  body.compact-rhythm main > section.co-classes-compact-hero.classes-colour-intro,
  body.compact-rhythm main > section.whats-latest-hero {
    padding:26px var(--pad) 22px!important;
  }
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1,
  body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1.co-overlay-title {
    margin:12px 0 24px!important;
  }
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 > .hand,
  body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1 > .hand {
    margin:12px 0 0 auto!important;
  }
  body.compact-rhythm main > .co-classes-compact-hero .classes-colour-inner,
  body.compact-rhythm main > .whats-latest-hero {gap:12px!important;}
  body.compact-rhythm main > .whats-latest-hero .whats-hero-links,
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-hero-link {
    margin-top:18px!important;
  }
}