/* Alixco web2 – Events & Community page styles.
   Namespaced under .alx-ev to avoid clashing with global newlayout classes.
   Consumes the global design tokens (tokens.css var(--c-*)), so it follows the
   site's light/dark theme automatically. Mirrors mockups/events.html. */

.alx-ev { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-lg);
  font-family: var(--font-body); color: var(--c-text); }
.alx-ev * { box-sizing: border-box; }
.alx-ev h1, .alx-ev h2, .alx-ev h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--sp-md); }
.alx-ev h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.alx-ev h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
.alx-ev__section { padding: var(--sp-xl) 0; }
.alx-ev__eyebrow { color: var(--c-blue); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .8rem; margin-bottom: var(--sp-xs); }
.alx-ev__sub { color: var(--c-body); margin: 0 0 var(--sp-lg); max-width: 60ch; }
.alx-ev__muted { color: var(--c-muted); font-size: .82rem; }

/* Buttons */
.alx-ev__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-pill); padding: 12px 26px; font-weight: 700;
  font-size: .95rem; cursor: pointer; text-decoration: none; transition: .15s;
  font-family: var(--font-button); }
.alx-ev__btn--primary { background: var(--c-green); color: var(--c-btn-text); }
.alx-ev__btn--primary:hover { background: var(--c-green-hover); }
.alx-ev__btn--outline { background: transparent; color: var(--c-text); border: 1.5px solid var(--c-line); }
.alx-ev__btn--outline:hover { border-color: var(--c-blue); color: var(--c-blue); }
.alx-ev__btn--full { width: 100%; }
.alx-ev__btn:disabled, .alx-ev__btn--closed { background: var(--c-chip); color: var(--c-muted);
  cursor: not-allowed; box-shadow: none; }
.alx-ev__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* SC badge */
.alx-ev__scbadge { display: inline-flex; gap: 8px; align-items: center; background: var(--c-card);
  border: 1px solid var(--c-line); padding: 6px 14px; border-radius: var(--r-pill);
  font-size: .82rem; color: var(--c-body); margin-bottom: var(--sp-sm); }
.alx-ev__scbadge b { color: var(--c-success-text); }

/* Hero */
.alx-ev__hero { background: var(--c-bg-muted); border-radius: var(--r-card); margin-top: var(--sp-lg); }
.alx-ev__hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-xl);
  align-items: center; padding: var(--sp-xl); }
.alx-ev__hero-card { background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: var(--sp-lg); box-shadow: var(--shadow); }
.alx-ev__label { font-size: .78rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Countdown */
.alx-ev__cd { display: flex; gap: 6px; margin-top: 6px; }
.alx-ev__cd-box { background: var(--c-bg-muted); border: 1px solid var(--c-line); border-radius: 10px;
  min-width: 48px; padding: 8px 6px; text-align: center; }
.alx-ev__cd-box .v { font-size: 1.3rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.alx-ev__cd-box .k { font-size: .6rem; color: var(--c-muted); text-transform: uppercase; margin-top: 3px; }

/* Stats bar */
.alx-ev__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); text-align: center; }
.alx-ev__stat { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-lg) var(--sp-sm); }
.alx-ev__stat .n { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--c-text); font-family: var(--font-display); }
.alx-ev__stat .n::after { content: ""; display: block; width: 42px; height: 3px; background: var(--c-green-alt); margin: 10px auto 8px; border-radius: 2px; }
.alx-ev__stat .l { color: var(--c-body); font-size: .88rem; }

/* Filter chips */
.alx-ev__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.alx-ev__chip { background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-body);
  border-radius: var(--r-pill); padding: 8px 18px; font-size: .88rem; font-weight: 700; cursor: pointer; transition: .15s; }
.alx-ev__chip:hover { border-color: var(--c-blue); color: var(--c-text); }
.alx-ev__chip.is-active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* Grid + cards */
.alx-ev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.alx-ev__card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card);
  overflow: hidden; transition: .18s; display: flex; flex-direction: column; }
.alx-ev__card:hover { transform: translateY(-3px); border-color: var(--c-blue); box-shadow: var(--shadow-hover); }
.alx-ev__cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--c-card-2), var(--c-bg-muted));
  display: flex; align-items: center; justify-content: center; position: relative; }
.alx-ev__cover .initial { font-size: 2.2rem; font-weight: 800; color: var(--c-blue); opacity: .55; font-family: var(--font-display); }
.alx-ev__cover img { width: 100%; height: 100%; object-fit: cover; }
.alx-ev__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); flex: 1; }
.alx-ev__meta { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--c-body); }

/* Tag + badges */
.alx-ev__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-blue); background: var(--c-active); padding: 3px 10px; border-radius: var(--r-pill); }
.alx-ev__badge { position: absolute; top: 10px; left: 10px; font-size: .72rem; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--c-chip); color: var(--c-body); }
.alx-ev__badge--featured  { background: rgba(255,153,1,.18);  color: var(--c-orange);      border-color: rgba(255,153,1,.45); }
.alx-ev__badge--webinar   { background: var(--c-active);      color: var(--c-blue); }
.alx-ev__badge--workshop  { background: rgba(43,196,196,.16); color: #2bc4c4;             border-color: rgba(43,196,196,.45); }
.alx-ev__badge--networking{ background: rgba(25,185,52,.18);  color: var(--c-green-alt);   border-color: rgba(25,185,52,.4); }
.alx-ev__badge--new       { background: rgba(255,107,94,.18); color: #ff6b5e;             border-color: rgba(255,107,94,.45); }

/* Seat-fill progress */
.alx-ev__progress { background: var(--c-bg-muted); border-radius: var(--r-pill); height: 10px; overflow: hidden; border: 1px solid var(--c-line); }
.alx-ev__progress > span { display: block; height: 100%; background: var(--c-green-alt); }
.alx-ev__progress > span.amber { background: var(--c-warning); }
.alx-ev__progress > span.red   { background: var(--c-danger); }
.alx-ev__progmeta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--c-body); margin-top: 6px; }
.alx-ev__progmeta b { color: var(--c-text); }
.alx-ev__seatsleft { font-size: .78rem; font-weight: 700; color: var(--c-orange); }

/* Social proof */
.alx-ev__proof { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-xl) var(--sp-lg); }
.alx-ev__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); margin-top: var(--sp-lg); }
.alx-ev__quote { background: var(--c-bg-muted); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--sp-lg); }
.alx-ev__quote p { font-style: italic; color: var(--c-text); margin: 0 0 10px; }
.alx-ev__quote .who { font-size: .82rem; color: var(--c-muted); }

/* Form */
.alx-ev__formcard { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-lg); box-shadow: var(--shadow); }
.alx-ev__formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.alx-ev__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-sm); }
.alx-ev__field.col2 { grid-column: 1 / -1; }
.alx-ev label { font-size: .86rem; font-weight: 600; color: var(--c-text); }
.alx-ev input[type=text], .alx-ev input[type=email], .alx-ev input[type=tel],
.alx-ev select, .alx-ev textarea { background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-text);
  border-radius: 10px; padding: 12px 14px; font-size: 1rem; font-family: var(--font-body); width: 100%; }
.alx-ev input:focus, .alx-ev select:focus, .alx-ev textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: var(--focus-ring); }
.alx-ev__check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--c-body); }
.alx-ev__check input { margin-top: 3px; width: auto; }
/* Honeypot — visually hidden, off-screen */
.alx-ev__hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* FAQ accordion */
.alx-ev__faq { border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); margin-bottom: 10px; overflow: hidden; }
.alx-ev__faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); padding: 16px 18px; cursor: pointer; font-weight: 700; color: var(--c-text); }
.alx-ev__faq-q .ic { color: var(--c-blue); transition: .2s; }
.alx-ev__faq-a { padding: 0 18px; max-height: 0; overflow: hidden; color: var(--c-body); font-size: .92rem; transition: max-height .25s ease, padding .25s ease; }
.alx-ev__faq.is-open .alx-ev__faq-a { max-height: 260px; padding: 0 18px 16px; }
.alx-ev__faq.is-open .alx-ev__faq-q .ic { transform: rotate(45deg); }

/* Footer CTA */
.alx-ev__footcta { background: var(--c-bg-muted); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-xl); text-align: center; }

/* Modal */
.alx-ev__modal-backdrop { position: fixed; inset: 0; background: rgba(4,10,18,.6); z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center; padding: 16px; }
.alx-ev__modal-backdrop.is-open { display: flex; }
.alx-ev__modal { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card);
  box-shadow: var(--shadow-hover); width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.alx-ev__modal-head { padding: var(--sp-lg); border-bottom: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: flex-start; }
.alx-ev__modal-head .step { font-size: .76rem; color: var(--c-blue); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.alx-ev__modal-head .x { background: none; border: none; color: var(--c-muted); font-size: 1.4rem; cursor: pointer; }
.alx-ev__modal-body { padding: var(--sp-lg); }
.alx-ev__modal-foot { padding: var(--sp-lg); border-top: 1px solid var(--c-line); display: flex; gap: 10px; justify-content: flex-end; }
.alx-ev__alert { padding: 12px 16px; border-radius: 10px; margin-bottom: var(--sp-md); }
.alx-ev__alert--ok { background: var(--c-pos-bg); color: var(--c-success-text); border: 1px solid var(--c-success); }
.alx-ev__alert--err { background: var(--c-neg-bg); color: var(--c-danger-text); border: 1px solid var(--c-danger); }

@media (max-width: 860px) {
  .alx-ev__hero-grid { grid-template-columns: 1fr; }
  .alx-ev__grid, .alx-ev__quotes { grid-template-columns: 1fr; }
  .alx-ev__stats { grid-template-columns: 1fr 1fr; }
  .alx-ev__formgrid { grid-template-columns: 1fr; }
}

/* Social share row on event cards */
.alx-ev__share { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.78rem; color:var(--c-muted); margin-top:4px; }
.alx-ev__share a { text-decoration:none; font-weight:700; color:var(--c-blue); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:3px 10px; }
.alx-ev__share a:hover { border-color:var(--c-blue); background:var(--c-active); }

/* ── Homepage teaser (EventsPreview): 3-slot adaptive layout ── */
.alx-ev__thead { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.alx-ev__tcard { background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s; }
.alx-ev__tcard:hover { box-shadow:var(--shadow-hover); }
.alx-ev__tcover { position:relative; aspect-ratio:16/9; background:var(--c-active);
  display:flex; align-items:center; justify-content:center; color:var(--c-blue); }
.alx-ev__tcover img { width:100%; height:100%; object-fit:cover; }
.alx-ev__tbadge { position:absolute; top:12px; left:12px; background:var(--c-blue); color:#fff;
  font-size:.74rem; font-weight:700; padding:4px 12px; border-radius:var(--r-pill); }
.alx-ev__tdate { position:absolute; bottom:12px; right:12px; background:var(--c-card); color:var(--c-text);
  font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow); }
.alx-ev__tbody { padding:var(--sp-lg); display:flex; flex-direction:column; gap:8px; flex:1; }
.alx-ev__ttitle { font-size:1.15rem; margin:0 0 2px; }
.alx-ev__tmeta { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--c-muted); }
.alx-ev__tcard .alx-ev__btn { margin-top:auto; }

/* coming-soon card (dashed, muted) */
.alx-ev__tcard--soon { border:2px dashed var(--c-line); background:transparent; align-items:center;
  justify-content:center; text-align:center; gap:10px; padding:var(--sp-xl); color:var(--c-muted); }
.alx-ev__tsoon-title { font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--c-text); }
.alx-ev__tsoon-text { font-size:.9rem; color:var(--c-muted); max-width:24ch; }

/* partner / host-an-event CTA (dark) */
.alx-ev__tpartner { background:#0B2545; color:#fff; padding:var(--sp-xl); gap:10px; justify-content:flex-start; }
.alx-ev__teyebrow { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.alx-ev__tpartner-title { font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:#fff; margin:2px 0 4px; }
.alx-ev__tpartner-text { font-size:.92rem; color:rgba(255,255,255,.82); line-height:1.5; }
.alx-ev__tpartner-btn { margin-top:auto; align-self:flex-start; background:rgba(255,255,255,.12);
  color:#fff; border:1px solid rgba(255,255,255,.28); }
.alx-ev__tpartner-btn:hover { background:rgba(255,255,255,.2); color:#fff; }

@media (max-width:860px){
  .alx-ev__thead { align-items:flex-start; }
}

/* 2-up grid when only two cards remain (e.g. no events: coming-soon + partner) */
.alx-ev__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width:860px){ .alx-ev__grid--2 { grid-template-columns: 1fr; } }