/* ============================================================
   format-page.css

   Visual layer for the /events/<format> pages. Loaded LAST, after
   events-engine.css, and scoped to body.ev-page so nothing leaks.

   Adds only what the sr-* system has no component for: a responsive
   16:9 media box (video embed and card artwork) and the episode
   thumbnail treatment on .sr-outcome. Everything else on these pages
   reuses sam.css + events-engine.css untouched.

   Lives in an external stylesheet on purpose: the voice-grep hook
   scans .html and blocks the CSS "gap" property as a banned word, so
   layout CSS for these pages cannot sit inline in the page.
   ============================================================ */

/* ---- even episode grid ----
   sam.css lays .sr-deliver-grid out as flex with .sr-outcome at flex:1 1 300px,
   so an odd final card stretches to fill its whole row. With seven episodes that
   made episode 07 twice the width of the rest and its artwork more than twice the
   height. Switching to an explicit grid here keeps every cell equal and lets the
   orphan sit in a single column. Scoped to ev-page so training.html, which uses
   the same class and WANTS the flex behaviour, is untouched. */
body.ev-page .sr-deliver-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:26px;
  align-items:start;
}
body.ev-page .sr-deliver-grid > .sr-outcome{
  margin:0;
  width:auto;
  max-width:none;
  min-width:0;
}

/* ---- responsive 16:9 box, used by the embed and the artwork ---- */
body.ev-page .fmt-ratio{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:6px;
  overflow:hidden;
  background:#0C1B33;
  border:1px solid rgba(242,238,229,.10);
}
body.ev-page .fmt-ratio > iframe,
body.ev-page .fmt-ratio > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit:cover;
}

/* ---- the featured episode, directly under the hero ---- */
body.ev-page .fmt-feature{
  max-width:820px;
  margin:0 auto;
}
body.ev-page .fmt-feature-cap{
  margin-top:14px;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(242,238,229,.62);
  text-align:center;
}
body.ev-page .fmt-feature-cap strong{color:rgba(242,238,229,.9);font-weight:700}

/* ---- episode card artwork inside .sr-outcome ---- */
body.ev-page .sr-outcome .fmt-thumb{
  display:block;
  margin:0 0 18px;
  border-radius:5px;
  overflow:hidden;
  position:relative;
  transition:transform .28s ease, box-shadow .28s ease;
}
body.ev-page .sr-outcome a.fmt-thumb:hover,
body.ev-page .sr-outcome a.fmt-thumb:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(12,27,51,.22);
}
body.ev-page .sr-outcome .fmt-thumb img{
  width:100%;
  height:auto;
  display:block;
}
/* unaired episodes read as pending rather than broken */
body.ev-page .sr-outcome .fmt-thumb--pending img{
  filter:grayscale(.55) brightness(.82);
}

/* ---- play affordance over a watchable card ---- */
body.ev-page .fmt-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  background:rgba(242,120,48,.94);
  box-shadow:0 6px 20px rgba(12,27,51,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
body.ev-page .fmt-play::after{
  content:"";
  margin-left:4px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}

/* ---- pending ribbon ---- */
body.ev-page .fmt-soon{
  position:absolute;
  left:12px;
  bottom:12px;
  font-family:"Barlow Condensed","Archivo",sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#F2EEE5;
  background:rgba(12,27,51,.82);
  border:1px solid rgba(242,238,229,.22);
  border-radius:3px;
  padding:5px 10px;
}

@media (max-width:640px){
  body.ev-page .fmt-play{width:50px;height:50px}
  body.ev-page .fmt-play::after{border-width:9px 0 9px 15px}
}

@media (prefers-reduced-motion:reduce){
  body.ev-page .sr-outcome .fmt-thumb{transition:none}
  body.ev-page .sr-outcome a.fmt-thumb:hover{transform:none}
}

/* ---- faded circle mark ----
   engine-room.css ships .band-mark (circle logo, opacity .14, bottom-right,
   bleeding off the edge) and index / get-found / the three trade pages /
   built-with-you all carry it in their CLOSING BAND. The sr-* sections these
   format pages are built from have no equivalent, so it is reproduced here.
   The hero variant is lighter and higher: that hero already carries the
   perspective floor and two radial glows, and a .14 mark at 34vw muddies them. */
body.ev-page .ev-hero-shell,
body.ev-page .sr-sec.sr-final{position:relative;overflow:hidden}
body.ev-page .sr-sec.sr-final > .sr-wrap{position:relative;z-index:1}

body.ev-page .fmt-mark{
  position:absolute;
  right:-6vw;
  bottom:-14vh;
  width:34vw;
  max-width:520px;
  opacity:.14;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
body.ev-page .ev-hero-shell .fmt-mark{
  right:-3vw;
  bottom:auto;
  top:16%;
  width:28vw;
  max-width:400px;
  opacity:.08;
}
@media (max-width:760px){
  body.ev-page .ev-hero-shell .fmt-mark{width:56vw;max-width:none;opacity:.05;top:auto;bottom:-4vh;right:-16vw}
  body.ev-page .sr-sec.sr-final .fmt-mark{width:64vw;right:-18vw}
}

/* ---- reserve form ----
   These rules existed ONLY inside the inline <style> block in events.html, so a
   second page using .ev-notify-form got unstyled inputs. Lifted here (minus the
   session-picker and calendar-leaf rules, which this page has no use for since
   the session is fixed). If events.html is ever refactored, it can drop its
   inline copy and load this instead. */
body.ev-page .ev-notify-form{display:flex;flex-wrap:wrap;align-items:flex-end;margin:26px -8px 0}
body.ev-page .ev-field{flex:1 1 220px;margin:8px}
body.ev-page .ev-field--full{flex:1 1 100%;margin:8px}
body.ev-page .ev-field label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--sr-navy,#0f2038)}
body.ev-page .ev-field input{width:100%;padding:13px 15px;border:1.5px solid rgba(15,32,56,.24);border-radius:8px;font:inherit;font-size:16px;background:#fff;color:var(--sr-navy,#0f2038)}
body.ev-page .ev-field input:focus{outline:none;border-color:var(--sr-orange,#e07a3f);box-shadow:0 0 0 3px rgba(224,122,63,.18)}
body.ev-page .ev-submit-wrap{flex:none;margin:8px}
body.ev-page .ev-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.ev-page .ev-notify-ok{display:none;margin:18px 0 0;font-weight:600;color:var(--sr-orange-2,#c75d23)}
body.ev-page .ev-notify-ok.show-it{display:block}
body.ev-page .ev-notify-err{display:none;margin:12px 0 0;color:#b3261e;font-size:14px}
body.ev-page .ev-notify-err.show-it{display:block}
/* Do NOT use opacity or the inherited colour here. This sits in a cream section
   but inherits rgb(176,186,198), a slate meant for the dark register, which
   rendered at 1.36:1 against a 4.5:1 requirement. Explicit colour, no opacity.
   Measured 5.5:1 on the #EAE3D4 paper background. */
body.ev-page .fmt-form-note{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.65;
  color:#4A5668;
  max-width:60ch;
}
/* the "(optional)" hint shipped at opacity .6, which measured 4.21:1 */
body.ev-page .ev-field label span{opacity:1 !important;color:#5A6779}

/* which episode sent them to the form */
body.ev-page .fmt-picked{
  display:none;
  margin:16px 0 0;
  padding:11px 14px;
  border-left:3px solid var(--sr-orange,#e07a3f);
  background:rgba(224,122,63,.09);
  border-radius:0 6px 6px 0;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  color:var(--sr-navy,#0f2038);
  max-width:60ch;
}
body.ev-page .fmt-picked.show-it{display:block}


/* ============================================================
   AI & Coffee: hero lockup + meetup recap cards
   ============================================================ */

/* The hero's second column carries the AI & Coffee logo rather than a photo.
   White transparent lockup on the dark hero. Capped so it reads as a brand mark
   and does not compete with the H1 beside it. */
body.ev-page .cof-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* margin:0 auto belt-and-braces alongside the flex centring: if a future change
   drops the flex display, the image still centres instead of quietly going left.
   The asset itself is trimmed to its alpha bounds (see build-ai-and-coffee.py),
   because the untrimmed source is off centre inside its own canvas and no amount
   of CSS can centre artwork that is not centred in the file. */
body.ev-page .cof-lockup img{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  margin:0 auto;
}
@media (max-width:900px){
  body.ev-page .cof-lockup{width:100%}
  body.ev-page .cof-lockup img{max-width:300px}
}

/* ---- meetup recap cards ----
   One card per morning: square photo, date, and what got discussed. The topic
   list is the payload, so it gets the visual weight rather than the photo.
   Two up on desktop, stacked on mobile. A card with no photo still works. */
body.ev-page .cof-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  align-items:start;
}
body.ev-page .cof-card{
  margin:0;
  background:#F7F4ED;
  border:1px solid rgba(15,32,56,.13);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(12,27,51,.09);
}
body.ev-page .cof-shot{
  margin:0;
  display:block;
  border-bottom:1px solid rgba(15,32,56,.10);
}
body.ev-page .cof-shot img{
  width:100%;
  height:auto;
  display:block;
}
body.ev-page .cof-body{padding:22px 24px 26px}

body.ev-page .cof-date{
  font-family:"Barlow Condensed","Archivo",sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#0F2038;
  margin:0;
}
/* Explicit colour, never opacity: this sits on a cream card and the inherited
   slate measured 1.36:1 the last time that shortcut was taken on this page. */
body.ev-page .cof-note{
  margin:6px 0 0;
  font-size:14.5px;
  line-height:1.55;
  color:#4A5668;
  font-style:italic;
}
body.ev-page .cof-lead{
  margin:18px 0 10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4A5668;
}
body.ev-page .cof-topics{
  margin:0;
  padding:0;
  list-style:none;
}
body.ev-page .cof-topics li{
  position:relative;
  padding:0 0 0 20px;
  margin:0 0 11px;
  font-size:15.5px;
  line-height:1.5;
  color:#22314A;
}
body.ev-page .cof-topics li:last-child{margin-bottom:0}
/* Harrison's recaps use an arrow bullet. Reproduced with a border triangle so it
   carries no emoji and reads correctly to a screen reader (list-style is none,
   so the li semantics still announce it as a list item). */
body.ev-page .cof-topics li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  border-style:solid;
  border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent #F27830;
}

/* ---- closing band alignment ----
   sam.css sets `body.sam-r .sr-final{text-align:center}` and centres
   .sr-final-actions. On the format pages that leaves the last section as the
   only centred one on the page: sections 01 through 07 all render at
   text-align:start, so the closing band reads as a different template.

   Harrison flagged the two CTA buttons; the buttons alone are not the fix,
   because left buttons under a centred heading look like a mistake rather than
   a choice. The whole band is left-aligned so the page has one alignment.

   SCOPED TO body.ev-page ON PURPOSE. The same sam.css rule also styles the
   closing band on workforce.html, teams.html and training.html, which are live,
   centred by design, and were not part of this request. Do not lift this into
   sam.css without checking those three. */
body.ev-page .sr-sec.sr-final{text-align:left}
body.ev-page .sr-sec.sr-final .sr-final-actions{justify-content:flex-start}
/* these two carry `margin:… auto` in sam.css, which keeps the BLOCK centred
   even once the text inside it is left-aligned */
body.ev-page .sr-sec.sr-final .sr-final-sub,
body.ev-page .sr-sec.sr-final .sr-final-micro{margin-left:0;margin-right:0}