/* ==========================================================================
   SINGLE EVENT
   The page behind an events-page card: what the session is, who is running it,
   and the panel that takes a registration or hands over the calendar invite.
   Two columns on a desktop and one on a phone, with the registration panel
   first in the source order there so the decision is not below the biographies.
   ========================================================================== */

/* ---------- hero ----------
   Trimmed the same way the four certification pages are: the shared band's
   104px plus the section's 128px put most of a viewport between the title and
   the page. */
.single-event-new .phead .wrap{padding-top:40px;padding-bottom:32px}
.single-event-new .phead + .sec{padding-top:40px}
@media(min-width:1024px){
.single-event-new .phead .wrap{padding-top:48px;padding-bottom:40px}
.single-event-new .phead + .sec{padding-top:52px}
}

/* Words on the left, the title card on the right. The band used to be one
   column of text with a lot of air in it and the picture below the fold at the
   top of the article, which said the same thing twice — once in type and once
   as a graphic — before the brief. Side by side, the picture pays for the
   height the words already needed. */
.ev-head-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){
.ev-head-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px}
}
.ev-head-art{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--slate-200);
  background:var(--paper-100)}
.ev-head-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.ev-tagrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Smaller than the shared band's 3rem: this headline shares its line with a
   picture now, and an event title is usually a sentence rather than a phrase. */
.ev-head h1{margin-top:10px;font-size:1.75rem;line-height:1.15}
@media(min-width:768px){.ev-head h1{font-size:2.125rem}}
.ev-by{margin-top:12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-600)}
.ev-facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.ev-facts li{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-facts .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-500)}
.ev-facts .v{font-weight:600;color:var(--navy-900);font-size:.9375rem;line-height:1.35}

/* ---------- the two columns ---------- */
.ev-cols{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:1024px){
.ev-cols{grid-template-columns:minmax(0,1fr) 372px;gap:56px;align-items:start}
}
.ev-main{min-width:0;display:flex;flex-direction:column;gap:40px}
.ev-main h2{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
  font-size:1.5rem;line-height:1.24;margin:0 0 16px}
.ev-video{position:relative;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--slate-200);background:#000}
.ev-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.ev-brief p{color:var(--slate-600);font-size:1.0625rem;line-height:1.6}

.ev-obj{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ev-obj li{display:flex;align-items:flex-start;gap:12px;color:var(--navy-900);font-size:1rem;line-height:1.5}
.ev-obj svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--accent-800)}

.ev-speakers{display:flex;flex-direction:column;gap:22px}
.ev-speaker{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--r-panel);box-shadow:var(--sh-rest);padding:20px 22px}
.ev-sp-body{min-width:0}
.ev-speaker h3{font-family:'Inter Tight',sans-serif;font-weight:700;color:var(--navy-900);font-size:1.0625rem;line-height:1.3;margin:0}
.ev-sp-role{margin:4px 0 0;font-size:.875rem;color:var(--slate-600)}
.ev-sp-bio{margin:10px 0 0;font-size:.9375rem;line-height:1.55;color:var(--slate-600)}

/* The avatar is defined per page elsewhere, so this page carries its own copy
   rather than depending on a stylesheet it does not load. */
.ev-speaker .mc-avatar{flex:none;width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);font-family:'IBM Plex Mono',monospace;font-size:13px;
  font-weight:500;letter-spacing:.04em}

/* ---------- the registration panel ---------- */
.ev-side{min-width:0}
@media(min-width:1024px){
.ev-side{position:sticky;top:96px}
}
.ev-reg{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-panel);
  box-shadow:var(--sh-rest);padding:26px 26px 28px}
.ev-reg h2{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
  font-size:1.375rem;line-height:1.24;margin:0}
.ev-reg-sub{margin:12px 0 0;font-size:.9375rem;line-height:1.55;color:var(--slate-600)}
.ev-reg .btn{margin-top:20px;width:100%;justify-content:center}
.ev-reg .btn svg{width:17px;height:17px}
.ev-cal{gap:9px}

.ev-form{margin:0}
.ev-field{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.ev-field label{font-size:.875rem;font-weight:600;color:var(--navy-900)}
.ev-field .opt{font-weight:500;color:var(--slate-500)}
.ev-field input,.ev-field select{font-family:'Inter',sans-serif;font-size:.9375rem;color:var(--navy-900);
  background:var(--white);border:1px solid var(--slate-400);border-radius:var(--r-btn);padding:11px 13px;width:100%}
.ev-field input:focus,.ev-field select:focus{outline:2px solid var(--accent-500);outline-offset:1px;border-color:var(--accent-800)}
.ev-fine{margin:14px 0 0;font-size:.8125rem;line-height:1.5;color:var(--slate-500)}

/* Off-screen rather than display:none - a bot reading the markup fills what it
   can see in the source, and a person never reaches it. */
.ev-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ev-note{border-radius:var(--r-card);padding:16px 18px;margin-bottom:20px}
.ev-note h2{font-size:1.125rem;margin:0}
.ev-note p{margin:8px 0 0;font-size:.9375rem;line-height:1.55}
.ev-note.ok{background:var(--brand-50);border:1px solid var(--brand-200);color:var(--navy-900)}
.ev-note.bad{background:#FEF2F2;border:1px solid #FECACA;color:#7F1D1D}

.ev-back{display:inline-block;margin-top:22px;font-weight:600;font-size:.9375rem;color:var(--accent-800)}

/* On a phone the panel leads: the date and the decision come before the
   biographies, which is the order somebody reads this page in. */
@media(max-width:1023px){
.ev-cols{display:flex;flex-direction:column}
.ev-side{order:-1}
}

/* ---------- the event's title card ----------
   A 16:9 card carrying the event's name and, where there is one, the speaker.
   It repeats what the band above already says in real text, so it is decorative
   and sits at the top of the column rather than above the headline: the words
   should be read from the markup, not from a picture of words. */
/* .ev-banner is gone: the title card is in the band now, as .ev-head-art. */

/* ---------- who is running it, in the band ----------
   The presenter row the masterclass pages lead with. Named ev-hpres and not
   ev-hp: that one is the honeypot, parked off-screen at -9999px, and a name
   sharing it would have vanished with it. */
.ev-hero-pres{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:20px}
.ev-hpres{display:flex;align-items:center;gap:12px;min-width:0}
.ev-hero-pres .mc-avatar{flex:none;width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:500;letter-spacing:.04em}
.ev-hero-pres .who{min-width:0}
.ev-hero-pres .nm{display:block;font-weight:600;color:var(--navy-900);font-size:.875rem;line-height:1.3}
.ev-hero-pres .rl{display:block;font-size:.78rem;color:var(--slate-600);line-height:1.3}

/* ---------- reading rhythm ----------
   The brief is editor content, and nothing in the cascade was giving its
   paragraphs a bottom margin, so three paragraphs ran together as one wall of
   text under the heading. Set here rather than globally: page-content.css is
   shared with every sectioned page and the developers are working in it. */
.single-event-new .ev-brief h2{margin:0 0 18px}
.single-event-new .ev-brief p{margin:0 0 16px;color:var(--slate-600);font-size:1.0625rem;line-height:1.6}
.single-event-new .ev-brief p:last-child{margin-bottom:0}
.single-event-new .ev-brief h3{margin:28px 0 10px;font-size:1.125rem;color:var(--navy-900)}
.single-event-new .ev-brief ul,.single-event-new .ev-brief ol{margin:0 0 16px;padding-left:22px}
.single-event-new .ev-brief li{margin-bottom:8px;color:var(--slate-600);line-height:1.6}
.single-event-new .ev-main h2{margin:0 0 20px}
.single-event-new .ev-sp-bio{line-height:1.6}

/* ---------- the recording, for signed-out readers ----------
   The session's still, dimmed, with a way in on top. Same 16:9 box as the player. */
.mc-gate{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:var(--navy-900);color:var(--white);text-align:center}
.mc-gate-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:blur(2px)}
.mc-gate-in{position:relative;z-index:1;padding:24px;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mc-gate-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.mc-gate-ic svg{width:21px;height:21px}
.mc-gate h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--white);margin:4px 0 0;text-wrap:balance}
.mc-gate p{font-size:.9rem;color:rgba(255,255,255,.78);margin:0}
.mc-gate-go{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:8px}
.mc-gate-alt{color:var(--white);font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.mc-gate{aspect-ratio:auto;min-height:260px}.mc-gate-in{padding:28px 18px}}