/* webinars.css — /webinars, in the language of the solution archetype.
   Reuses .panel/.hero/.stat-grid/.sec-head from solution.css; everything here
   is card + scroller specific. */

/* hero stat grid is four across here, not the archetype's six */
.stat-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:560px){.stat-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the card ---------- */
.web-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.web-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.web-grid{grid-template-columns:1fr}}

.web-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-lg);transition:border-color .15s,transform .15s}
.web-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}

/* image slot — a placeholder panel until real session art exists */
.web-card__shot{position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  padding:var(--sp-4);text-align:center;
  background-color:var(--surface-solutions);background-image:var(--solutions-fx)}
.web-card__shot span{font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-solutions-soft)}
.web-card__badge{position:absolute;top:var(--sp-3);left:var(--sp-3);margin:0;
  background:var(--action);color:var(--action-text);border-radius:20px;
  padding:2px var(--sp-3);font-family:var(--font-mono);font-size:var(--step--2);
  font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.web-card__badge--past{background:var(--surface-chrome);color:var(--text-soft)}

.web-card__body{display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-5);flex:1}
.web-card__date{margin:0;font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.web-card__title{margin:0;font-size:var(--step-1);line-height:1.25;
  color:var(--text-heading);overflow-wrap:anywhere}
.web-card__desc{margin:0;color:var(--text-soft);font-size:var(--step--1)}

.web-card__speakers{border-top:var(--border) solid var(--line);padding-top:var(--sp-3)}
.web-card__speakers-label{margin:0 0 2px;font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint)}
.web-card__speakers-list{margin:0;font-size:var(--step--1);color:var(--text)}

.web-card__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;gap:var(--sp-3);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.web-card__time{margin:0;font-family:var(--font-mono);font-size:var(--step--1);
  color:var(--text-soft)}
.btn--tiny{padding:6px var(--sp-4);font-size:var(--step--1)}

.web-card__tag{align-self:flex-start;font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint)}
.web-card__tag:hover{color:var(--accent)}

.web-empty{text-align:center;color:var(--text-soft)}

/* ---------- past: compact recording cards, no images ---------- */
.rec-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rec-grid{grid-template-columns:1fr}}

.rec{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;
  padding:var(--sp-5);background:var(--surface);
  border:var(--border) solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .15s,transform .15s}
.rec:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.rec__date{margin:0;font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.rec__title{margin:0;font-size:var(--step-0);line-height:1.3;
  color:var(--text-heading);overflow-wrap:anywhere}
.rec__meta{margin:0;font-size:var(--step--1);color:var(--text-soft);
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.rec__tag{font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.rec__tag:hover{color:var(--accent)}
.rec__dot{color:var(--line-strong)}
.rec__cta{margin-top:auto;display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-mono);font-size:var(--step--1);font-weight:650;
  color:var(--accent)}
.rec__cta:hover{text-decoration:none}
.rec__cta:hover .rec__title{text-decoration:underline}
.rec__play{display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--surface-accent);color:var(--accent);
  font-size:9px;padding-left:1px}
/* session cover (macros/cover.html) sits under the Upcoming badge */
.web-card__shot{overflow:hidden}
.web-card__shot .web-card__badge{position:absolute;z-index:2}

/* CFRE Approved Provider badge under the "Register now" heading */
.web-cfre{display:inline-flex;align-items:center;gap:14px;margin-top:var(--sp-5);padding:10px 18px 10px 10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;text-align:left;color:var(--text);text-decoration:none;
  box-shadow:0 10px 24px -18px rgba(30,27,75,.5)}
.web-cfre:hover{border-color:var(--line-strong);text-decoration:none}
.web-cfre img{width:64px;height:auto;display:block}
.web-cfre b{display:block;font-size:var(--step-0);color:var(--text-heading)}
.web-cfre span{font-size:var(--step--1);color:var(--text-soft);line-height:1.4}

/* recording request dialog (v1 parity) */
.rec-modal{width:min(560px,calc(100vw - 32px));border:0;border-radius:20px;padding:var(--sp-8);
  box-shadow:0 30px 80px rgba(14,22,51,.35);text-align:center}
.rec-modal::backdrop{background:rgba(14,22,51,.55);backdrop-filter:blur(2px)}
.rec-modal h2{margin:var(--sp-3) 0 var(--sp-2);font-size:28px}
.rec-modal__webinar{margin:0 0 var(--sp-2);font-weight:650;color:var(--action,#ff8300);line-height:1.35}
.rec-modal__lede{margin:0 0 var(--sp-5);color:var(--ink-500)}
.rec-modal form{text-align:left}
.rec-modal .trial-submit{width:100%;margin-top:var(--sp-4)}
.rec-modal__close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink-500)}

/* form fields for the recording dialog — copied from landing.css (cf-* / form-status), so /webinars needn't load it */
.cf-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr 1fr}
@media(max-width:560px){.cf-grid{grid-template-columns:1fr}}
.cf-field{display:flex;flex-direction:column;gap:var(--sp-1);grid-column:1/-1}
.cf-field--half{grid-column:span 1}
@media(max-width:560px){.cf-field--half{grid-column:1/-1}}
.cf-field label{font-size:var(--step--1);font-weight:650;color:var(--text)}
.cf-field .req{color:var(--action)}
.cf-field input,.cf-field textarea,.cf-field select{border:var(--border) solid var(--line-strong);
  border-radius:var(--radius-sm);padding:var(--sp-3);font:inherit;font-size:var(--step-0);
  color:var(--text);background:var(--surface);resize:vertical}
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:2px solid var(--focus);
  outline-offset:1px;border-color:var(--accent)}
.cf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d5a70' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.trial-submit{margin-top:var(--sp-4)}
.contact-submit{margin-top:var(--sp-5);width:100%;justify-content:center;font-size:var(--step-0)}
.cf-note{font-size:var(--step--1);color:var(--text-faint);margin-top:var(--sp-3)}
.cf-direct{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:var(--border) solid var(--line);font-size:var(--step--1)}
.cf-direct b{display:block;font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- form status + reCAPTCHA (contact + trial) ---------- */
.cf-recaptcha{margin-top:var(--sp-4)}
.form-status{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);
  font-size:var(--step--1);font-weight:600}
.form-status.is-ok{background:var(--live-bg);color:var(--live);
  border:var(--border) solid color-mix(in srgb,var(--live) 40%,transparent)}
.form-status.is-err{background:rgba(194,51,77,.1);color:#c2334d;
  border:var(--border) solid rgba(194,51,77,.3)}
.contact-submit[disabled],.trial-submit[disabled]{opacity:.6;cursor:progress}