/* =====================================================================
   hub-events.css — Knowledge Hub events (redesign SPEC §5.1–5.2): the /events list and the
   event page with its details and registration box. Loaded by layouts/hub.php after crcgs.css;
   the registration form itself uses the form styles in hub-forms.css.
   Colours, fonts and sizes come from the kit's --ck- tokens only.
   Sections: 1 date block · 2 list · 3 empty state · 4 event page · 5 small screens · 6 reduced motion
   ===================================================================== */

/* ---- 1. The date as a small calendar leaf: month band, day, year ---- */
.hub-date{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:76px;overflow:hidden;
  border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius);background:var(--ck-white);text-align:center;line-height:1}
.hub-date__month{align-self:stretch;padding:6px 0 5px;background:var(--ck-navy);color:var(--ck-white);font:600 12px/1 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase}
.hub-date__day{padding:8px 0 2px;color:var(--ck-navy);font:700 30px/1 var(--ck-font-head)}
.hub-date__year{padding:2px 0 8px;color:var(--ck-muted);font:500 12px/1 var(--ck-font-body);font-variant-numeric:tabular-nums}
.hub-date--lg{width:96px}
.hub-date--lg .hub-date__month{padding:8px 0 7px;font-size:13px}
.hub-date--lg .hub-date__day{padding-top:10px;font-size:40px}
.hub-date--lg .hub-date__year{padding-bottom:10px;font-size:13px}
.is-past .hub-date__month{background:var(--ck-muted)}
.is-past .hub-date__day{color:var(--ck-muted)}

/* ---- 2. The list ---- */
.hub-events-page{padding-top:var(--ck-space-7);padding-bottom:var(--ck-space-8)}
.hub-events-page__head{max-width:46rem;margin:0 0 var(--ck-space-5)}
.hub-events-page__head h1{margin-bottom:var(--ck-space-2)}
.hub-events-section{margin:0 0 var(--ck-space-7)}
.ck .hub-events-section__title{margin:0 0 var(--ck-space-4);font-size:1.5rem}
.hub-event-list{display:grid;gap:var(--ck-space-4);margin:0;padding:0;list-style:none}
.hub-event-card{position:relative;display:flex;gap:var(--ck-space-5);align-items:flex-start;padding:var(--ck-space-5);background:var(--ck-white);
  border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow);
  transition:transform var(--ck-dur) ease,box-shadow var(--ck-dur) ease,border-color var(--ck-dur) ease}
.hub-event-card:hover{transform:translateY(-2px);box-shadow:var(--ck-shadow-lg);border-color:var(--ck-line-strong)}
.hub-event-card:focus-within{border-color:var(--ck-navy)}
.hub-event-card.is-past{background:var(--ck-neutral);box-shadow:none;--ck-blue-text:var(--ck-blue-text-deep)}
.hub-event-card__body{flex:1 1 auto;min-width:0}
.hub-event-card__meta,.hub-event-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--ck-space-2)}
.hub-event-card__past{color:var(--ck-muted);font-size:13px;font-weight:600}
.ck .hub-event-card__title{margin:0 0 6px;font-size:1.3rem;line-height:1.3}
.hub-event-card__title a{color:var(--ck-navy);text-decoration:none}
.hub-event-card__title a::after{content:"";position:absolute;inset:0;border-radius:var(--ck-radius)}   /* the whole card opens the event */
.hub-event-card__title a:hover{text-decoration:underline}
.hub-event-card__title a:focus-visible{outline:none;box-shadow:none}
.hub-event-card__title a:focus-visible::after{outline:3px solid var(--ck-navy);outline-offset:2px}
.ck .hub-event-card__when{margin:0;color:var(--ck-text);font-weight:600;font-size:15px}
.ck .hub-event-card__where{margin:2px 0 0;color:var(--ck-muted);font-size:15px}
.ck .hub-event-card__summary{margin:var(--ck-space-2) 0 0;color:var(--ck-text);font-size:15px;line-height:1.55}

/* ---- 3. No events to come: the honest line beside the newsletter sign-up ---- */
.hub-events-empty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--ck-space-5);align-items:stretch}
.hub-events-empty .ck-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ck-space-2)}
.hub-events-empty .ck-empty svg{color:var(--ck-blue-text)}
.ck .hub-events-empty__line{margin:0;color:var(--ck-navy);font:600 1.2rem/1.35 var(--ck-font-head)}

/* ---- 4. One event ---- */
.hub-event-page{padding-top:var(--ck-space-7);padding-bottom:var(--ck-space-8)}
.hub-event-head{display:flex;gap:var(--ck-space-5);align-items:flex-start;margin:0 0 var(--ck-space-6)}
.hub-event-head__text{min-width:0;max-width:48rem}
.ck .hub-event-head__title{margin:0 0 var(--ck-space-2)}
.hub-event-head .ck-lead{margin:0}
.ck .hub-event-head__meta .ck-eyebrow{display:inline;margin:0 var(--ck-space-1) 0 0}   /* "Event", before the format badges */
.hub-event-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-areas:"main aside";gap:var(--ck-space-6) var(--ck-space-7);align-items:start}
.hub-event-main{grid-area:main;min-width:0}
.hub-event-aside{grid-area:aside;display:grid;gap:var(--ck-space-4)}   /* not sticky: with the form it can be taller than the window */
.hub-event-box{padding:var(--ck-space-5);background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)}
.ck .hub-event-box__title{margin:0 0 var(--ck-space-3);font-size:1.25rem}
.hub-event-box p:last-child{margin-bottom:0}
.hub-event-facts{display:grid;gap:var(--ck-space-3);margin:0}
.hub-event-facts div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--ck-space-3)}
.hub-event-facts dt{color:var(--ck-muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.hub-event-facts dd{margin:0;color:var(--ck-text);font-size:15px;line-height:1.5}
.hub-event-register{border-top:3px solid var(--ck-orange)}
.hub-event-register .ck-btn .ext-ico{margin-left:2px}
.hub-event-done{text-align:center}
.hub-event-done p{color:var(--ck-text)}
.hub-event-image{margin:0 0 var(--ck-space-5)}
.hub-event-image img{display:block;width:100%;height:auto;border-radius:var(--ck-radius)}
.hub-event-back{margin:var(--ck-space-6) 0 0}

/* ---- 5. Small screens: the details and registration first, then the description ---- */
@media (max-width:900px){
  .hub-event-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"aside" "main"}
  .hub-events-empty{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .hub-event-card{gap:var(--ck-space-4);padding:var(--ck-space-4)}
  .hub-date{width:62px}
  .hub-date__day{font-size:26px}
  .hub-event-head{gap:var(--ck-space-4)}
  .hub-date--lg{width:72px}
  .hub-date--lg .hub-date__day{font-size:30px}
  .hub-event-facts div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---- 6. Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .hub-event-card{transition:none}
  .hub-event-card:hover{transform:none}
}