/* ==================================================================
   JISETF — the introductory sessions

   One component in two sizes, loaded by the home page and the
   registration page only:

   .sp         the panel itself — a dialog with the illustration, the
               three dates and the button out to the form
   .sp--brief  the home page's version: pops up on arrival, carries the
               dates and nothing else
   .sp--full   the registration page's version: opened from its lane,
               carries what the session covers as well

   .lane--sessions is the registration page's banner. It lives here and
   not in pages.css so that the whole feature can be removed by taking
   out one stylesheet, one script and the markup that uses them.
   ================================================================== */

/* ---- the dialog --------------------------------------------------- */
.sp {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
}
.sp[hidden] { display: none; }

.sp__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 63, 99, 0.72);
    animation: sp-fade 0.3s var(--ease) both;
}

.sp__panel {
    position: relative;
    width: min(460px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
    box-shadow: 0 30px 80px rgba(14, 63, 99, 0.35);
    animation: sp-rise 0.42s var(--ease) both;
}
.sp--full .sp__panel { width: min(620px, 100%); }
.sp__panel:focus { outline: none; }

@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

.sp__close {
    position: absolute;
    z-index: 2;
    inset-block-start: 12px;
    inset-inline-end: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: var(--blue);
    background: rgba(255, 255, 255, 0.85);
    transition: background-color 0.18s var(--ease);
}
.sp__close:hover { background: var(--white); }
.sp__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* the illustration sits on its own tinted band, so the panel reads as
   a card with a picture on it rather than a picture with text under it */
.sp__art {
    display: grid;
    place-items: center;
    padding: 18px 24px 4px;
    background: #eaf1f7;
}
.sp__art img { width: min(200px, 56%); height: auto; }
.sp--full .sp__art img { width: min(250px, 52%); }

.sp__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* no bottom padding: the sticky button row carries its own */
    padding: clamp(20px, 3vw, 30px) clamp(22px, 3.4vw, 34px) 0;
}

.sp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 5px 14px;
    border-radius: 99px;
    background: rgba(15, 186, 137, 0.12);
    color: var(--green-dark);
    font-size: 12.5px;
    font-weight: 800;
}
.sp__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.sp__title {
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1.35;
    color: var(--ink);
}
.sp__lede { font-size: var(--text-sm); line-height: 1.75; color: rgba(49, 49, 49, 0.82); }

.sp__h {
    margin-top: 4px;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--blue);
}

/* what the session covers */
.sp__topics { display: flex; flex-direction: column; gap: 8px; }
.sp__topics li {
    position: relative;
    padding-inline-start: 20px;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(49, 49, 49, 0.86);
}
.sp__topics li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

/* the three dates: the one object on the panel worth scanning, so each
   is its own row with the day large enough to find at a glance */
.sp__dates { display: flex; flex-direction: column; gap: 8px; }
.sp__date {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1.5px solid var(--hairline);
    border-radius: 12px;
}
.sp__day {
    flex: none;
    width: 46px;
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--blue);
}
.sp__when { display: flex; flex-direction: column; gap: 1px; }
.sp__when strong { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.sp__when span { font-size: 13px; color: var(--slate); }

/* a date that has already happened stays in the list, struck through,
   so nobody wonders whether they misread the poster */
.sp__date.is-past { opacity: 0.45; }
.sp__date.is-past .sp__when strong { text-decoration: line-through; }
.sp__date.is-past .sp__when span::after { content: " · انتهت"; }

.sp__note { font-size: 13px; line-height: 1.7; color: var(--slate); }

/* the pop-up's version of the dates: three chips on one row, because on
   arrival the question is only "which Saturday", and the month and hour
   are the same for all three */
.sp__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 9px;
    border: 1.5px solid var(--hairline);
    border-radius: 12px;
}
.sp__chip-day { font-size: 28px; font-weight: 900; line-height: 1; color: var(--blue); }
.sp__chip-wd { font-size: 12.5px; font-weight: 700; color: var(--slate); }
.sp__chip.is-past { opacity: 0.4; }
.sp__chip.is-past .sp__chip-day { text-decoration: line-through; }

.sp__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    /* the button stays in view however far the panel has to scroll on a
       short phone — the reason the panel exists is the click on it */
    position: sticky;
    bottom: 0;
    padding-block: 16px clamp(22px, 3.2vw, 30px);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 18px);
}
.sp__actions .btn { width: 100%; justify-content: center; }
.sp__more {
    align-self: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--blue);
    border-bottom: 2px solid var(--gold);
}
.sp__later {
    align-self: center;
    font-size: 13px;
    color: var(--slate);
    border-bottom: 1px solid transparent;
}
.sp__later:hover { border-bottom-color: currentColor; }

/* ---- the registration page's banner -------------------------------- */
.lane--sessions {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    align-items: center;
    background: #eaf1f7;
    color: var(--ink);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
}
.lane--sessions .lane__name { color: var(--blue); }
.lane__badge--online { background: var(--white); color: var(--green-dark); }
.lane__badge--online::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}
.lane--sessions .lane__cta {
    margin-top: 8px;
    padding: 14px 30px;
    background: var(--blue);
    color: var(--white);
    border-radius: 99px;
    font-size: var(--text-base);
    font-weight: 800;
    transition: background-color 0.18s var(--ease);
}
.lane--sessions:hover .lane__cta { background: var(--blue-deep); }
.lane--sessions .lane__media { width: clamp(180px, 22vw, 290px); }
.lane--sessions .lane__art { transition: transform 0.4s var(--ease); }
.lane--sessions:hover .lane__art { transform: scale(1.04) rotate(-1deg); }

@media (max-width: 860px) {
    .lane--sessions { flex-direction: column-reverse; align-items: flex-start; }
    .lane--sessions .lane__media { width: min(240px, 66%); align-self: center; }
}

@media (max-width: 480px) {
    .sp { padding: 12px; }
    .sp__art img, .sp--full .sp__art img { width: min(190px, 60%); }
}

@media (prefers-reduced-motion: reduce) {
    .sp__backdrop, .sp__panel { animation: none; }
    .lane--sessions:hover .lane__art { transform: none; }
}