/* ===================================================
   منصة ثانوية مكة المكرمة — التنسيق المشترك
   =================================================== */

:root{
  --bg:#F4F7F6;
  --surface:#FFFFFF;
  --ink:#16313A;
  --ink-soft:#5C7480;
  --line:#E1E9E7;

  --green:#1E6B5E;
  --gold:#B8912A;
  --blue:#3D7194;
  --plum:#7A5480;

  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
.wrap{max-width:940px;margin:0 auto;padding:0 24px;width:100%}
main{flex:1}

/* ===== الترويسة ===== */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:64px}
.topbar a.home{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;border-radius:8px;
}
.topbar a.home:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.mark{width:28px;height:28px;flex:none;color:var(--green)}
.school{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:600;font-size:16px;letter-spacing:-.2px;
}
.region{margin-inline-start:auto;color:var(--ink-soft);font-size:13.5px}

/* ===== الواجهة ===== */
.hero{
  position:relative;overflow:hidden;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%231E6B5E' stroke-width='1'><rect x='18' y='18' width='36' height='36'/><rect x='18' y='18' width='36' height='36' transform='rotate(45 36 36)'/></g></svg>");
  background-size:72px 72px;
  opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
}
.hero .wrap{position:relative;padding:66px 24px 58px}
.hero.compact .wrap{padding:44px 24px 40px}
.hero h1{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:700;
  font-size:clamp(28px,5vw,44px);
  line-height:1.35;margin:0 0 16px;letter-spacing:-.5px;
}
.hero.compact h1{font-size:clamp(26px,4.2vw,34px);margin-bottom:12px}
.hero p{margin:0;max-width:52ch;color:var(--ink-soft);font-size:17px}
.rule{width:56px;height:3px;background:var(--green);border-radius:2px;margin-bottom:24px}

.back{
  display:inline-block;margin-bottom:18px;
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;
  border-bottom:1px solid transparent;
}
.back:hover{color:var(--green);border-bottom-color:var(--green)}
.back:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

/* ===== الأقسام ===== */
.section{padding:52px 0 20px}
.section h2{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:600;font-size:19px;margin:0 0 6px;
}
.section .lead{margin:0 0 26px;color:var(--ink-soft);font-size:15.5px}

/* ===== أبواب الصفحة الرئيسية ===== */
.doors{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.door{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:4px solid var(--c);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .18s ease,transform .18s ease;
}
a.door:hover{border-color:var(--c);transform:translateY(-3px)}
a.door:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.door .icon{width:44px;height:44px}
.door .name{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:600;font-size:19px;line-height:1.5;
}
.door .desc{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.65}
.door .foot{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--c);font-weight:500}

/* ===== صفوف العناصر ===== */
.list{display:flex;flex-direction:column;gap:14px}
.item{
  display:flex;align-items:flex-start;gap:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-inline-start:4px solid var(--c);
  padding:22px 22px 22px 20px;
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
a.item:hover{border-color:var(--c);transform:translateX(-3px)}
a.item:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.item.soon{opacity:.72}

.icon{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;border-radius:11px;
  background:color-mix(in srgb,var(--c) 11%,transparent);
  color:var(--c);
}
.icon svg{width:22px;height:22px}
.door .icon svg{width:23px;height:23px}
.body{flex:1;min-width:0}
.name{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-weight:600;font-size:17.5px;margin:0 0 4px;
  line-height:1.5;display:block;
}
.desc{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.65}
.state{
  flex:none;align-self:center;
  font-size:13px;font-weight:500;
  padding:5px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);
  white-space:nowrap;
}
.state.open{
  color:var(--green);
  border-color:color-mix(in srgb,var(--green) 30%,transparent);
  background:color-mix(in srgb,var(--green) 7%,transparent);
}

.empty{
  background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius);padding:34px 24px;text-align:center;
  color:var(--ink-soft);font-size:15px;
}

/* ===== التذييل ===== */
footer{
  margin-top:48px;padding:26px 0 38px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:14px;
}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
footer .rights{margin-inline-end:auto}

/* ===== حركة الدخول ===== */
@media (prefers-reduced-motion:no-preference){
  .item,.door{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
  .item:nth-child(1),.door:nth-child(1){animation-delay:.05s}
  .item:nth-child(2),.door:nth-child(2){animation-delay:.12s}
  .item:nth-child(3),.door:nth-child(3){animation-delay:.19s}
  .item:nth-child(4),.door:nth-child(4){animation-delay:.26s}
  .item:nth-child(5),.door:nth-child(5){animation-delay:.33s}
  .item:nth-child(6),.door:nth-child(6){animation-delay:.40s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}}
}

@media (max-width:560px){
  .hero .wrap{padding:48px 24px 42px}
  .item{flex-wrap:wrap;gap:14px}
  .state{align-self:flex-start;margin-inline-start:60px}
  .region{display:none}
}