/* ==================================================================
   JISETF — the inner pages

   Rules, categories, contact, register, the five form pages and 404.
   Each has one section of its own; everything else is base.css.
   ================================================================== */

/* ==================================================================
   Rules — two documents, then the note that binds you to them
   ================================================================== */
.doclist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}
.doc {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding: clamp(22px, 2.6vw, 34px);
    background: var(--paper);
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
}
.doc:nth-child(even) { border-radius: 0 var(--card-radius) 0 var(--card-radius); }
.doc__icon { width: clamp(52px, 5vw, 76px); height: auto; flex: none; }
.doc__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.doc__name { font-size: var(--text-md); font-weight: 800; }
.doc__lang { font-size: var(--text-sm); color: var(--slate); }
.doc__cta { flex: none; }

.docs__note {
    margin-top: clamp(26px, 3.4vw, 44px);
    padding: 20px 24px;
    border-inline-start: 4px solid var(--gold);
    background: var(--paper);
    color: rgba(49, 49, 49, 0.86);
    max-width: 78ch;
}

/* the two secondary documents: a list, not another pair of cards */
.alsodocs__list {
    margin-top: clamp(22px, 3vw, 34px);
    display: flex;
    flex-direction: column;
}
.alsodocs__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
}
.alsodocs__list li:first-child { border-top: 1px solid var(--hairline); }
.alsodocs__name { font-size: var(--text-md); font-weight: 700; }
.alsodocs__list a {
    font-weight: 700;
    color: var(--blue);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
    white-space: nowrap;
}
.alsodocs__list a:hover { color: var(--ink); }

/* ==================================================================
   Categories — ten of them, so five columns fill two rows exactly
   ================================================================== */
.catlist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    counter-reset: cat;
}
.cat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 2.2vw, 30px);
    background: var(--paper);
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
}
.cat:nth-child(even) { border-radius: 0 var(--card-radius) 0 var(--card-radius); }
.cat__icon { width: clamp(48px, 4.4vw, 64px); height: auto; }
.cat__name { display: flex; flex-direction: column; gap: 2px; }
.cat__ar { font-size: var(--text-md); font-weight: 800; line-height: 1.25; }
.cat__en {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--slate);
    /* the English name is a label on the Arabic one, so it stays LTR */
    direction: ltr;
    text-align: right;
}
.cat__desc { font-size: var(--text-sm); line-height: 1.72; color: rgba(49, 49, 49, 0.78); }

.cats__note {
    margin-top: clamp(24px, 3vw, 40px);
    color: var(--slate);
    max-width: 70ch;
}

/* ==================================================================
   Contact — three ways in, side by side
   ================================================================== */
.reach__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.reach__card {
    background: var(--white);
    padding: clamp(26px, 3vw, 42px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reach__card h3 { font-size: var(--text-md); font-weight: 800; }
.reach__card p,
.reach__card address { color: var(--slate); font-size: var(--text-sm); line-height: 1.7; }
.reach__mail {
    margin-top: auto;
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--blue);
    border-bottom: 3px solid var(--gold);
    align-self: flex-start;
    padding-bottom: 3px;
    word-break: break-word;
}
.reach__mail:hover { color: var(--ink); }

.reach__social { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.reach__social a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--slate);
    transition: color 0.18s var(--ease);
}
.reach__social a:hover { color: var(--blue); }
/* the social marks are drawn white for the footer; on paper they are
   knocked back to ink instead of shipping a second set of files */
.reach__social img {
    width: 22px;
    height: 22px;
    flex: none;
    filter: brightness(0);
    opacity: 0.55;
    transition: opacity 0.18s var(--ease);
}
.reach__social a:hover img { opacity: 1; }

/* the WhatsApp panel, shared by contact and register */
.keeptouch__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: clamp(26px, 5vw, 66px);
    align-items: center;
}
.keeptouch__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.keeptouch__copy p { color: rgba(255, 255, 255, 0.9); font-size: var(--text-md); max-width: var(--measure); }
.keeptouch__copy strong { color: var(--gold); }
.keeptouch__badge { width: 56px; height: 56px; }
.keeptouch__art { width: 100%; height: auto; max-width: 300px; justify-self: center; }

/* ==================================================================
   Register — the clock, then the one open track

   The three tracks are not equal any more: projects is open, the other
   two are not. So the open one leads at full width and the closed two
   sit under it, muted and unlinked. The layout carries that fact; the
   labels only confirm it.
   ================================================================== */

/* ---- the countdown ---------------------------------------------- */
.clock {
    padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 36px);
    margin-bottom: clamp(34px, 4.5vw, 62px);
    background: var(--gold);
    color: var(--ink);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
}
.clock__label { font-size: var(--text-md); font-weight: 800; }

/* Four cells, ruled against one another — the same object the home page
   uses for its figures, so a number in a box reads the same way twice. */
.clock__units {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(16px, 2vw, 22px);
    background: rgba(49, 49, 49, 0.16);
    border: 1px solid rgba(49, 49, 49, 0.16);
    border-radius: 10px;
    overflow: hidden;
}
.clock__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: clamp(12px, 1.6vw, 20px) 6px;
    background: var(--white);
}
.clock__n {
    font-size: clamp(30px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}
.clock__u { font-size: var(--text-sm); font-weight: 700; color: var(--slate); }

.clock__over {
    margin-top: clamp(16px, 2vw, 22px);
    padding: 18px;
    background: var(--white);
    border-radius: 10px;
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--blue);
    text-align: center;
}

/* The rail is the same span the numbers count down: it says how much of
   the window is gone as well as how much is left. */
.clock__rail {
    position: relative;
    height: 6px;
    margin-top: clamp(20px, 2.6vw, 28px);
    background: rgba(49, 49, 49, 0.18);
    border-radius: 99px;
}
.clock__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--blue);
    border-radius: 99px;
    transition: width 0.6s var(--ease);
}
.clock__pip {
    position: absolute;
    top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0.72;
    white-space: nowrap;
}
.clock__pip--start { inset-inline-start: 0; }
.clock__pip--end   { inset-inline-end: 0; }

.clock__note {
    margin-top: 46px;
    font-size: var(--text-sm);
    font-weight: 600;
    opacity: 0.8;
}

.forms__h { margin-bottom: clamp(24px, 3vw, 38px); }

/* ---- the tracks -------------------------------------------------- */
.lanes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}
.lane {
    display: flex;
    gap: clamp(16px, 2vw, 34px);
    padding: clamp(22px, 2.6vw, 38px);
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
}
.lane__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; }
.lane__name { font-size: var(--text-lg); font-weight: 900; line-height: 1.2; }
.lane__note { font-size: var(--text-sm); line-height: 1.65; max-width: 46ch; }

.lane__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 800;
}

/* ---- the open one ------------------------------------------------ */
.lane--open {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    align-items: center;
    background: var(--blue);
    color: var(--white);
}
.lane--open .lane__note { color: rgba(255, 255, 255, 0.84); font-size: var(--text-base); }
.lane__badge--live { background: var(--white); color: var(--blue); }
.lane__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    animation: lane-pulse 2.2s var(--ease) infinite;
}
@keyframes lane-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.45; }
}
.lane--open .lane__cta {
    margin-top: 8px;
    padding: 14px 30px;
    background: var(--green);
    color: var(--white);
    border-radius: 99px;
    font-size: var(--text-base);
    font-weight: 800;
    transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.lane--open:hover .lane__cta { background: var(--green-dark); }

/* The art sits in a slowly turning cluster of the logo's own shapes —
   the same three marks the home page hero uses, so this reads as the
   site's motion and not as a new idea. */
.lane__media {
    position: relative;
    flex: 0 0 auto;
    width: clamp(180px, 22vw, 300px);
    display: grid;
    place-items: center;
}
.lane__art { width: 100%; height: auto; position: relative; z-index: 1; }
.lane--open .lane__art { transition: transform 0.4s var(--ease); }
.lane--open:hover .lane__art { transform: scale(1.05); }

.lane__halo { position: absolute; inset: -14%; pointer-events: none; }
.lane__shape { position: absolute; opacity: 0.3; filter: brightness(0) invert(1); }
.lane__shape--a { top: 2%;  inset-inline-end: 4%;  width: 15%; animation: lane-drift 9s ease-in-out infinite; }
.lane__shape--b { bottom: 8%; inset-inline-start: 0; width: 22%; animation: lane-turn 26s linear infinite; }
.lane__shape--c { top: 34%; inset-inline-start: 6%; width: 13%; animation: lane-turn 40s linear infinite reverse; }
@keyframes lane-drift {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(16deg); }
}
@keyframes lane-turn { to { transform: rotate(360deg); } }

/* ---- the two that are not open yet ------------------------------- */
/* the same object as the open track, at half the scale and none of the
   emphasis — so the difference between them is state, not kind */
.lane--soon {
    align-items: center;
    background: var(--paper);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
}
.lane--soon .lane__media { width: clamp(96px, 11vw, 136px); }
/* muted, because the track is */
.lane--soon .lane__art { filter: grayscale(1); opacity: 0.55; }
.lane--soon .lane__name { color: var(--slate); }
.lane--soon .lane__note { color: var(--slate); }
.lane__badge--soon {
    background: transparent;
    color: var(--slate);
    border: 1.5px solid rgba(92, 110, 126, 0.4);
}
.lane__cta--soon {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--blue);
    border-bottom: 2px solid var(--gold);
    cursor: pointer;
}
.lane__msg {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--slate);
    max-width: 42ch;
}
.lane__msg a { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--gold); }

/* ---- narrower screens -------------------------------------------- */
@media (max-width: 860px) {
    .lane--open { flex-direction: column-reverse; align-items: flex-start; }
    .lane--open .lane__media { width: min(260px, 70%); align-self: center; }
}
@media (max-width: 700px) {
    .lanes { grid-template-columns: minmax(0, 1fr); }
    .lane--soon .lane__media { width: clamp(84px, 22vw, 116px); }
    .clock__units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clock__pip { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .lane__shape, .lane__dot { animation: none; }
    .lane--open:hover .lane__art { transform: none; }
    .clock__fill { transition: none; }
}

/* ---- the "before you start" panel ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14, 63, 99, 0.72); }
.modal__panel {
    position: relative;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(26px, 3.4vw, 42px);
    background: var(--white);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
}
.modal__close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 16px;
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 1;
    color: var(--slate);
}
.modal__close:hover { color: var(--ink); }
.modal__art { width: 150px; height: auto; margin-bottom: 10px; }
.modal__title { font-size: var(--text-lg); font-weight: 900; margin-bottom: 14px; }
.modal__list { display: flex; flex-direction: column; gap: 10px; }
.modal__list li {
    position: relative;
    padding-inline-start: 22px;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(49, 49, 49, 0.86);
}
.modal__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
}
.modal__list strong { color: var(--blue); }
.modal__list a { color: var(--blue); border-bottom: 2px solid var(--gold); }
.modal__actions { margin-top: 22px; }
.modal__actions .btn { width: 100%; }

/* ==================================================================
   The embedded forms
   ================================================================== */
.formhost__frame {
    background: var(--paper);
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    padding: clamp(10px, 1.4vw, 20px);
}
.formhost__frame iframe {
    display: block;
    width: 100%;
    /* tall enough that Google's own scrollbar is the only one in play */
    height: clamp(760px, 105vh, 1500px);
    border: 0;
    background: var(--white);
}
.formhost__fallback { margin-top: 18px; color: var(--slate); font-size: var(--text-sm); }
.formhost__fallback a { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--gold); }

/* ==================================================================
   404
   ================================================================== */
.lost__inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.lost__lede { font-size: var(--text-md); color: var(--slate); }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==================================================================
   Narrower screens
   ================================================================== */
@media (max-width: 1180px) {
    .catlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .doclist { grid-template-columns: minmax(0, 1fr); }
    .reach__grid { grid-template-columns: minmax(0, 1fr); }
    .formlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .keeptouch__grid { grid-template-columns: minmax(0, 1fr); }
    .keeptouch__art { order: -1; max-width: 220px; }
}

@media (max-width: 620px) {
    .catlist,
    .formlist { grid-template-columns: minmax(0, 1fr); }
    .doc { flex-wrap: wrap; }
    .doc__cta { width: 100%; }
    .lost__links .btn { flex: 1 1 200px; }
    .formhost__frame iframe { height: clamp(900px, 130vh, 1600px); }
}