/* scoped: si-page-event-detail */

  /* ── Hero ── */
  .event-hero:where(.si-page-event-detail, .si-page-event-detail *){
    width: 100%;
    min-height: 296px;
    padding: 70px 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  .event-hero-bg:where(.si-page-event-detail, .si-page-event-detail *){
    position: absolute;
    inset: 0;
    background-image: url('/11. Membership hero.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }

  .event-hero-bg::after{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }

  .event-hero-content:where(.si-page-event-detail, .si-page-event-detail *){
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 960px;
  }

  .event-title:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 110%;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
  }

  .event-underline:where(.si-page-event-detail, .si-page-event-detail *){
    width: 80px;
    height: 5px;
    background: #D62121;
    flex-shrink: 0;
  }

  .event-hero-sub:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Alata', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
  }

  /* ── Body ── */
  .event-body:where(.si-page-event-detail, .si-page-event-detail *){
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    box-sizing: border-box;
  }

  .event-back:where(.si-page-event-detail, .si-page-event-detail *){
    display: inline-block;
    font-family: 'Alata', sans-serif;
    font-size: 15px;
    color: #D62121;
    text-decoration: none;
    margin-bottom: 28px;
  }

  .event-back:hover:where(.si-page-event-detail, .si-page-event-detail *){ text-decoration: underline; }

  .event-columns:where(.si-page-event-detail, .si-page-event-detail *){
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }

  .event-main:where(.si-page-event-detail, .si-page-event-detail *){
    flex: 1 1 640px;
    min-width: 0;
  }

  /* The class tiles are only 200x200 and blur when enlarged, so show them small.
     Raise this once the designer supplies larger (e.g. 600x600) exports. */
  .event-image:where(.si-page-event-detail, .si-page-event-detail *){
    width: 250px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin-bottom: 28px;
  }

  .event-description:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 165%;
    color: #2B2B33;
  }

  .event-description p:where(.si-page-event-detail, .si-page-event-detail *){ margin: 0 0 16px; }

  /* ── Info card ── */
  .event-info-card:where(.si-page-event-detail, .si-page-event-detail *){
    flex: 0 0 340px;
    background: #FFFFFF;
    border: 1px solid #E4E4EA;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(20, 20, 30, 0.08);
    padding: 28px;
    box-sizing: border-box;
    position: sticky;
    top: 110px;
  }

  .event-info-heading:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    color: #14141E;
    margin: 0 0 18px;
  }

  .event-info-row:where(.si-page-event-detail, .si-page-event-detail *){
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px solid #EFEFF4;
  }

  .event-info-label:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Alata', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9499A8;
  }

  .event-info-value:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 145%;
    color: #14141E;
  }

  .event-tickets:where(.si-page-event-detail, .si-page-event-detail *){
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #EFEFF4;
  }

  .event-tickets-heading:where(.si-page-event-detail, .si-page-event-detail *){
    font-family: 'Alata', sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #14141E;
    margin: 0 0 10px;
  }

  .event-ticket-row:where(.si-page-event-detail, .si-page-event-detail *){
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #2B2B33;
    padding: 6px 0;
  }

  .event-ticket-price:where(.si-page-event-detail, .si-page-event-detail *){ font-weight: 700; }

  .event-register-btn:where(.si-page-event-detail, .si-page-event-detail *){
    display: block;
    margin-top: 22px;
    background: #D62121;
    color: #FFFFFF;
    font-family: 'Alata', sans-serif;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 6px;
  }

  .event-register-btn:hover:where(.si-page-event-detail, .si-page-event-detail *){ opacity: 0.9; }

  /* ── Native booking (explicit descendants — beat Tailwind preflight + avoid stale :where cache) ── */
  .si-page-event-detail .event-booking{
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 24px 90px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .si-page-event-detail .event-booking-heading{
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 34px;
    text-transform: uppercase;
    color: #14141E;
    margin: 0;
    text-align: center;
  }

  .si-page-event-detail .event-booking-underline{
    width: 80px;
    height: 5px;
    background: #D62121;
  }

  .si-page-event-detail .event-booking-closed{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #5B5B66;
    text-align: center;
    margin: 8px 0 0;
    max-width: 40rem;
  }

  .si-page-event-detail .event-booking-form{
    width: 100%;
    border: 1px solid #E4E4EA;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 28px 24px;
    box-sizing: border-box;
  }

  .si-page-event-detail .event-booking-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .si-page-event-detail .event-booking-section-title{
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    color: #14141E;
    margin: 0 0 16px;
  }

  .si-page-event-detail .event-tickets-table{
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
  }

  .si-page-event-detail .event-tickets-table th,
  .si-page-event-detail .event-tickets-table td{
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #E4E4EA;
  }

  .si-page-event-detail .event-ticket-spaces{
    min-width: 64px;
    padding: 8px 10px;
    border: 1px solid #C9C9D1;
    border-radius: 6px;
    font-size: 15px;
    background: #FFFFFF;
  }

  .si-page-event-detail .event-booking-summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 2px solid #14141E;
    font-family: 'Alata', sans-serif;
    font-size: 18px;
  }

  .si-page-event-detail .event-booking-input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #C9C9D1;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
    color: #14141E;
  }

  .si-page-event-detail .event-booking-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .si-page-event-detail .event-booking-cards{
    display: block;
    height: 28px;
    width: auto;
    margin: 0 0 12px;
  }

  .si-page-event-detail .event-booking-consent{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #3A3A44;
    margin: 8px 0 16px;
  }

  .si-page-event-detail .event-booking-consent a{ color: #D62121; }

  .si-page-event-detail .event-booking-error{
    color: #D62121;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin: 0 0 12px;
  }

  .si-page-event-detail .event-booking-submit{
    display: block;
    width: 100%;
    border: 0;
    background: #D62121;
    color: #FFFFFF;
    font-family: 'Alata', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 6px;
    cursor: pointer;
  }

  .si-page-event-detail .event-booking-submit:disabled{
    opacity: 0.7;
    cursor: wait;
  }

  /* ── Mobile ── */
  @media (max-width: 900px) {
    .event-hero:where(.si-page-event-detail, .si-page-event-detail *){ padding: 54px 24px; }
    .event-title:where(.si-page-event-detail, .si-page-event-detail *){ font-size: 30px; }
    .event-columns:where(.si-page-event-detail, .si-page-event-detail *){ flex-direction: column; }
    .event-info-card:where(.si-page-event-detail, .si-page-event-detail *){
      position: static;
      flex: 1 1 auto;
      width: 100%;
    }
    .si-page-event-detail .event-booking-grid{
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }