/* events.html + for-organizers.html (EN + AR): page-specific parts only. Shared components (crop, sec-cta, vpp,
   sloop, rail, htabs, drop, mm, hook, kf) come from system.css, home.css, pg-common.css and p-product.css.
   Here: audience chips, run of show, room math, all-features accordion, anatomy pins, sponsor placements, programs bridge. */

/* ---------- Audience chips in the hero ---------- */
.aud-pick { display: grid; gap: 8px; justify-items: start; }
.aud-pick > span { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.aud-pick ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aud-pick a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.aud-pick a:hover { border-color: var(--violet); background: var(--violet-soft); }
.aud-pick a small { font-weight: 500; color: var(--ink-3); }
.aud-pick svg { width: 16px; height: 16px; color: var(--violet-ink); }
[dir="rtl"] .aud-pick a { padding: 0 12px 0 16px; }
/* Hero on phones (shared .hero-mob): the real screens come right after the CTA row; the persona chips and facts follow. */
@media (max-width: 1020px) { .hero-mob .aud-pick { order: 15; } }

/* ---------- Problem chips (organizers) ---------- */
.prob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prob-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 123, 110, .14); color: #ff9d93; border: 1px solid rgba(255, 123, 110, .4); font-size: .84rem; font-weight: 650; }

/* ---------- Run of show (the rail itself is shared: [data-rail] in pg-common) ---------- */
#run, #flow, #series, #money { scroll-margin-top: 96px; }
.run .crop { aspect-ratio: 4 / 3; }
.run__shot { align-self: end; }
@media (max-width: 600px) { .run[data-rail] > li { grid-template-rows: auto auto auto 1fr; } }

/* ---------- Speed networking (match machine on the stage) ---------- */
.net-split { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
@media (max-width: 960px) { .net-split { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .math { justify-content: space-between; } }
@media (max-width: 600px) {
  .math { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 18px 0; }
  .math > div { grid-column: 2; display: flex; align-items: baseline; gap: 12px; padding: 8px 0; }
  .math > i { grid-column: 1; grid-row: span 1; padding: 0; text-align: center; width: 28px; }
  .math i.eq-sign { display: block; }
  .math .is-out { flex-basis: auto; }
  .math b { font-size: 2.4rem; min-width: 2.2ch; }
  .math > div:first-child { grid-column: 2; }
  .math > div:first-child::before { content: none; }
}

/* ---------- All features accordion ---------- */
.allf { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.allf > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 22px; cursor: pointer; font-weight: 650; list-style: none; }
.allf > summary::-webkit-details-marker { display: none; }
.allf > summary svg { width: 18px; height: 18px; transition: transform .25s var(--ease); color: var(--ink-3); }
.allf[open] > summary svg { transform: rotate(180deg); }
.allf > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: var(--r-lg); }
.allf .spec { margin: 0; padding: 0 22px 22px; }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.spec > div { padding: 14px 0; border-top: 1px solid var(--line); }
.spec dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
[lang="ar"] .spec dt { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .84rem; font-weight: 650; }
.spec dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 820px) { .spec { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Anatomy pins over a real screen: pins follow the image, never mirrored, never clipped ---------- */
.anat .shot-pins { position: relative; }
.anat .shot-pins > .crop { aspect-ratio: 16 / 10; }
.shot-pins .pin { left: clamp(16px, var(--px), calc(100% - 16px)) !important; right: auto !important; top: clamp(16px, var(--py), calc(100% - 16px)); transform: translate(-50%, -50%) !important; display: grid !important; }
.shot-pins .pin { box-shadow: 0 0 0 3px rgba(5, 4, 11, .6), 0 6px 16px rgba(0,0,0,.45); }
@media (max-width: 600px) { .anat .shot-pins > .crop { aspect-ratio: 16 / 10; } }
/* Phones: the frame stays as an overview, and each numbered note gets a close-up of its part of the screen. */
.anat-zoom { display: none; }
@media (max-width: 600px) {
  .anat-zoom { display: block; margin-top: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--stage-line, var(--line-2)); background: #0e0c18; }
  .anat-zoom > img.anat-zoom__strip { display: block; width: 100%; height: auto; }
  .notes--big li > span { min-width: 0; }
}

/* ---------- Sponsor placements (real screens) ---------- */
.spons { display: grid; gap: 14px; min-width: 0; }
.spons__fig { margin: 0; display: grid; gap: 10px; }
.spons__fig figcaption { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.spons__fig figcaption b { color: var(--ink); font-weight: 650; }
.spons__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: var(--on-violet, #fff); font-family: var(--f-mono); font-size: 11px; }
.spons__bar { border-radius: 14px; overflow: hidden; background: #08070d; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.spons__bar img { display: block; width: 100%; height: auto; }
.spons__bar--wide { display: grid; grid-template-columns: minmax(0, 1fr); }
.spons .crop { aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .spons .crop { aspect-ratio: var(--mar, 16 / 9); } }

/* ---------- Programs bridge as a split, with a real button ---------- */
.bridge-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.bridge-card__txt { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(24px, 3.5vw, 48px); }
.bridge-card__txt p { color: var(--ink-2); }
.bridge-card .h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.bridge-card__media { min-width: 0; background: var(--surface-2); border-inline-start: 1px solid var(--line); }
.bridge-card__media .crop { height: 100%; aspect-ratio: auto; min-height: 320px; }
@media (max-width: 900px) { .bridge-card { grid-template-columns: minmax(0, 1fr); } .bridge-card__media { border-inline-start: 0; border-top: 1px solid var(--line); } .bridge-card__media .crop { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------- Sloop of English-interface (left-to-right) screens on an AR page: the badge sits physically left,
   over the side panel, not over the speaker's face. ---------- */
.sloop--ltr .sloop__badge { inset-inline-start: auto; left: 14px; right: auto; }
@media (max-width: 600px) { .sloop--ltr .sloop__badge { left: 8px; } }

/* ---------- Tab media that switches to the real phone screen on phones (a <picture> inside .crop) ---------- */
@media (max-width: 600px) { .tp__media .crop.crop--m-tall { aspect-ratio: var(--mar, 16 / 10); } }

/* ---------- Prices: a button in the free card ---------- */
.prices .btn { justify-self: start; margin-top: 8px; }


/* .crop--fit moved to system.css (crop option) and its .sloop padding to pg-common.css; see team/COMPONENTS.md. */

/* After-the-event loop (for-organizers AR): step 03 is an English-interface screen whose button runs along the
   bottom right, so its badge moves to the bottom-left, over the community sidebar. */
[dir="rtl"] .after-sloop .sloop__shot:nth-child(3) .sloop__badge { inset-inline-start: auto; right: auto; left: 14px; }
@media (max-width: 600px) { [dir="rtl"] .after-sloop .sloop__shot:nth-child(3) .sloop__badge { left: 8px; } }