/*
 * Featured Sessions (keynotes) component.
 *
 * Ported 1:1 from the approved Mainstage reference build
 * (onug-featured-keynotes-handoff/keynotes-component.css). The reference was
 * already scoped under .onug-keynotes, so it drops into the theme as-is; the
 * only change is dropping its global html/body reset, which belongs to the
 * standalone demo page and not to a component embedded in existing pages.
 */

.onug-keynotes{
      --k-green:#8fc73e; --k-green-d:#6fa02c;
      --k-ink:#12161a; --k-muted:#5a6672; --k-line:#e7ebee;
      --k-bg:#0b0d0f;
      font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      background:var(--k-bg);
      padding:64px 22px 72px;
      color:#fff;
    }
    .onug-keynotes *{box-sizing:border-box;}
    .onug-keynotes .k-head{max-width:1040px;margin:0 auto 34px;text-align:center;}
    .onug-keynotes .k-eyebrow{
      display:inline-block;letter-spacing:.16em;text-transform:uppercase;
      font-size:12px;font-weight:700;color:var(--k-green);margin-bottom:12px;
    }
    .onug-keynotes h1.k-h1{
      font-size:clamp(30px,4.2vw,46px);line-height:1.04;font-weight:700;
      margin:0 0 10px;color:#fff;letter-spacing:-.01em;
    }
    .onug-keynotes h2.k-h2{
      font-size:clamp(16px,2vw,20px);line-height:1.4;font-weight:400;
      margin:0 auto;max-width:680px;color:#b8c0c8;
    }
    .onug-keynotes .k-grid{
      max-width:1600px;margin:0 auto;display:grid;gap:20px;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    }
    .onug-keynotes .k-card{
      position:relative;display:flex;flex-direction:column;
      background:#fff;border-radius:18px;overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,.28);
      border:1px solid rgba(255,255,255,.06);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .onug-keynotes .k-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.36);}
    /* shared row tracks: intro / speakers / CTA align across every card in a row */
    @supports (grid-template-rows: subgrid) {
      .onug-keynotes .k-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;}
      .onug-keynotes .k-top{align-self:start;}
      .onug-keynotes .k-foot{align-self:end;}
    }
    .onug-keynotes .k-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--k-green);}
    .onug-keynotes .k-intro{padding:22px 22px 0;}
    .onug-keynotes .k-top{display:flex;align-items:center;gap:14px;padding:16px 22px 4px;border-top:1px solid var(--k-line);}
    .onug-keynotes .k-foot{margin-top:auto;padding:12px 22px 22px;display:flex;}
    .onug-keynotes .k-photo{
      flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;
      object-position:top center;border:3px solid var(--k-green);
      box-shadow:0 0 0 4px rgba(143,199,62,.14);
    }
    .onug-keynotes .k-who{min-width:0;}
    /* two-speaker variant: side by side */
    .onug-keynotes .k-top.k-duo{flex-direction:column;align-items:stretch;gap:12px;}
    .onug-keynotes .k-duo .k-pair{display:flex;gap:10px;}
    .onug-keynotes .k-duo .k-spk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
    .onug-keynotes .k-duo .k-photo{width:62px;height:62px;border-width:2px;box-shadow:0 0 0 3px rgba(143,199,62,.14);}
    .onug-keynotes .k-duo .k-name{font-size:15px;margin:0 0 2px;line-height:1.15;}
    .onug-keynotes .k-duo .k-role{font-size:11.5px;margin:0 0 6px;line-height:1.3;}
    .onug-keynotes .k-duo .k-logo{height:16px;max-width:96px;margin:0 auto;}
    /* four-plus speakers: facepile + roster */
    .onug-keynotes .k-top.k-panel{flex-direction:column;align-items:center;gap:12px;}
    .onug-keynotes .k-facepile{display:flex;justify-content:center;}
    .onug-keynotes .k-facepile .k-photo{width:56px;height:56px;border-width:2.5px;box-shadow:0 0 0 3px #fff;}
    .onug-keynotes .k-facepile .k-photo + .k-photo{margin-left:-14px;}
    .onug-keynotes .k-roster{width:100%;display:flex;flex-direction:column;gap:4px;}
    .onug-keynotes .k-roster .k-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.35;}
    .onug-keynotes .k-roster .k-row b{color:var(--k-green);font-weight:700;white-space:nowrap;}
    .onug-keynotes .k-roster .k-row span{color:var(--k-muted);text-align:right;min-width:0;}
    /* four speakers: 2x2 grid with per-speaker logos */
    .onug-keynotes .k-top.k-quad{flex-direction:column;align-items:stretch;gap:10px;}
    .onug-keynotes .k-quad .k-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px 10px;}
    .onug-keynotes .k-quad .k-spk{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
    .onug-keynotes .k-quad .k-photo{width:52px;height:52px;border-width:2px;box-shadow:0 0 0 2px rgba(143,199,62,.14);}
    .onug-keynotes .k-quad .k-name{font-size:14px;margin:0;line-height:1.15;}
    .onug-keynotes .k-quad .k-role{font-size:11px;margin:0 0 2px;line-height:1.25;}
    .onug-keynotes .k-quad .k-logo{height:20px;max-width:128px;object-fit:contain;margin:2px auto 0;}

    .onug-keynotes .k-name{font-size:18px;font-weight:700;color:var(--k-green);line-height:1.1;margin:0 0 3px;}
    .onug-keynotes .k-role{font-size:13px;font-weight:500;color:var(--k-muted);line-height:1.3;margin:0 0 8px;}
    .onug-keynotes .k-logo{height:20px;width:auto;max-width:130px;object-fit:contain;display:block;}
    .onug-keynotes .k-sesslabel{
      font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      color:var(--k-green-d);margin:0 0 6px;
    }
    .onug-keynotes .k-session{
      font-size:16px;font-weight:600;line-height:1.28;color:var(--k-ink);
      margin:0 0 10px;letter-spacing:-.01em;
    }
    .onug-keynotes .k-desc{
      font-size:14px;line-height:1.5;color:var(--k-muted);margin:0 0 18px;
      display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
    }
    .onug-keynotes .k-more{
      display:inline-flex;align-items:center;gap:8px;
      font-size:14px;font-weight:700;color:var(--k-green-d);text-decoration:none;
      align-self:flex-start;
    }
    .onug-keynotes .k-more .k-arrow{transition:transform .18s ease;}
    .onug-keynotes .k-card:hover .k-more .k-arrow{transform:translateX(4px);}
    .onug-keynotes .k-more:hover{text-decoration:underline;}
    @media (max-width:720px){
      .onug-keynotes{padding:48px 18px 54px;}
      .onug-keynotes .k-grid{grid-template-columns:1fr;gap:18px;}
      .onug-keynotes .k-top{padding:22px 20px 16px;gap:14px;}
      .onug-keynotes .k-photo{width:76px;height:76px;}
      .onug-keynotes .k-intro{padding:22px 20px 0;}
      .onug-keynotes .k-foot{padding:12px 20px 22px;}
    }


/* ---------------------------------------------------------------------------
 * Theme integration
 *
 * Two additions to the reference CSS, both because this component now renders
 * live site data rather than the hand-shortened copy in the demo.
 * ------------------------------------------------------------------------- */

/* The theme's global typography sets its own sizes on p; the component's own
   rules are class-based and still win, this only catches anything unstyled. */
.onug-keynotes p { font-family: inherit; }

/* Job titles on the site run much longer than the reference's shortened ones
   ("CTO and Head of Enterprise Technology Services (Infrastructure), Memorial
   Sloan Kettering Cancer Center" against "CTO, Memorial Sloan Kettering"). In
   the multi-speaker variants that pushes a card far taller than its row, so
   the role is clamped there and the full text stays available on hover. */
.onug-keynotes .k-duo .k-role,
.onug-keynotes .k-quad .k-role {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}