/* ===== لغة الرفوف =====
 * مأخوذة من مكتبة صاحبها: خزائن بيضاء بفواصل رأسية، ألواح رفوف تُلقي الكتبُ ظلَّها عليها،
 * وكعوبٌ داكنة بعناوين مذهّبة. كل عنصر في البوابة يجلس داخل هذا النظام لا فوقه.
 */

:root{
  --wood:#C8B69B;
  --wood-edge:#DCCDB4; --wood-deep:#8A7454;
  --gold:#A8863C; --gold-lit:#C9A961; --gold-dim:#7C6428;
  --olive:#3D4326; --bay-line:#E8E0D0;
  --shelf-h:11px;
}

/* ---------- الخزانة والرفّ ---------- */
.bay{position:relative;background:linear-gradient(180deg,#FFFDF8 0%,#FBF7EE 100%);
  border:1px solid var(--bay-line)}
/* الفواصل الرأسية للخزائن */
.bay-grid{display:grid;gap:0}
.bay-grid > *{border-inline-start:1px solid var(--bay-line)}
.bay-grid > *:first-child{border-inline-start:0}

/* لوح الرفّ: حافة خشب فاتح مع ظلّ الكتب واقعاً عليه */
.shelf-board{height:var(--shelf-h);border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,var(--wood-edge) 0%, #C4B295 55%, var(--wood-deep) 100%);
  box-shadow:0 -7px 12px -8px rgba(28,22,12,.45), 0 2px 5px -2px rgba(28,22,12,.28);
  position:relative;z-index:1}
.shelf-board.thin{--shelf-h:7px}

/* صفّ الكتب يقف على اللوح */
/* ارتفاعٌ محدَّد لا min-height: النِّسب على الكعوب لا تُحلّ إلا على ارتفاع قاطع */
.shelf-row{display:flex;align-items:flex-end;gap:3px;padding:0 14px;
  height:178px;overflow:hidden}
/* الصفوف التي تحمل بطاقات تفصيلية لا تُقصّ، وإلا اختفت البطاقة عند المرور */
.shelf-row.cards{overflow:visible}
.shelf-row.tall{height:205px}
.shelf-row.short{height:124px}

/* ---------- الكعب ---------- */
.spine{position:relative;flex:none;border-radius:2px 2px 0 0;cursor:pointer;
  background:linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(255,255,255,.10) 28%,
             rgba(255,255,255,.04) 62%, rgba(0,0,0,.26) 100%), var(--c,#2E3A2A);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.spine::before,.spine::after{content:'';position:absolute;inset-inline:3px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);opacity:.55}
.spine::before{top:9px} .spine::after{bottom:12px}
.spine .t{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--display);
  font-weight:700;font-size:12px;line-height:1.15;color:#E7D6A8;letter-spacing:.01em;
  max-height:calc(100% - 34px);overflow:hidden;text-shadow:0 1px 0 rgba(0,0,0,.45);
  padding-block:4px}
.spine:hover{transform:translateY(-9px);box-shadow:0 12px 18px -10px rgba(28,22,12,.55)}
.spine:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* مجموعة/سلسلة: مجلدات متجاورة — height:100% لازم وإلا لم تُحلّ نِسب المجلدات */
.set{display:flex;align-items:flex-end;gap:2px;height:100%;text-decoration:none}
.set .spine{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.set:hover .spine{transform:translateY(-5px)}
.set:hover .spine:nth-child(2n){transform:translateY(-9px)}

/* ---------- خانة القسم ---------- */
.cubby{display:block;padding:18px 18px 0;text-decoration:none;color:inherit;
  transition:background .25s;position:relative}
.cubby:hover{background:#FFFDF7;text-decoration:none}
.cubby .name{font-family:var(--display);font-weight:700;font-size:16.5px;display:block}
.cubby .meta{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.cubby .mini{display:flex;align-items:flex-end;gap:2px;height:58px;margin:14px 0 0;overflow:hidden}
.cubby .mini i{display:block;border-radius:1px 1px 0 0;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.08) 40%,rgba(0,0,0,.24))}
.cubby:hover .mini i{transform:translateY(-3px)}
.cubby .mini i{transition:transform .3s}

/* ---------- عناوين الأقسام ---------- */
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.sec-head h2{font-size:23px;white-space:nowrap}
.sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--bay-line),transparent)}
.sec-head a{font-size:13.5px;font-weight:600;white-space:nowrap;display:inline-flex;
  align-items:center;gap:5px}
.sec-head a svg{transition:transform .2s}
.sec-head a:hover svg{transform:translateX(-3px)}
section.band{padding:58px 0}
section.band + section.band{padding-top:0}

/* ---------- بطاقة كتاب ---------- */
.bookcard{position:absolute;inset-inline-start:0;bottom:calc(100% + 10px);width:230px;
  max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  box-shadow:0 18px 40px -18px rgba(28,22,12,.4);opacity:0;visibility:hidden;
  transition:opacity .18s, transform .18s;transform:translateY(4px);z-index:6;pointer-events:none}
.spine-wrap{position:relative}
.spine-wrap:hover .bookcard, .spine-wrap:focus-within .bookcard{opacity:1;visibility:visible;transform:none}
.bookcard .bt{font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.35}
.bookcard .ba{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.bookcard .locus{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 10px}
.bookcard .locus b{font-weight:600;color:var(--ink-2)}

/* ---------- أدوات ---------- */
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:22px;height:22px}
.gold{color:var(--gold)}

@media (max-width:860px){
  .bookcard{inset-inline-start:50%;transform:translate(50%,4px)}
  .spine-wrap:hover .bookcard,.spine-wrap:focus-within .bookcard{transform:translate(50%,0)}
  .shelf-row{height:146px;padding:0 10px}
  .shelf-row.tall{height:164px}
  .shelf-row.short{height:110px}
  .spine .t{font-size:11px}
  .bookcard{width:200px}
}
@media (prefers-reduced-motion:reduce){
  .spine,.set .spine,.cubby .mini i,.bookcard{transition:none}
  .spine:hover{transform:none}
}

/* ===== الخزانة الكاملة =====
 * محاكاة بنية المكتبة الحقيقية: أعمدة خزائن بفواصل رأسية، خمسة رفوف في كل عمود،
 * وخانةٌ واحدة تُترك مفتوحة يجلس فيها عنوان البوابة وشريط البحث.
 */
.bookcase{position:relative;display:grid;grid-template-columns:minmax(360px,1.45fr) repeat(3,minmax(0,1fr));
  background:linear-gradient(180deg,#FFFEFB 0%,#FBF7EE 100%);
  border:1px solid var(--bay-line);border-radius:3px;overflow:hidden;
  box-shadow:0 50px 80px -60px rgba(28,22,12,.55), 0 1px 0 rgba(255,255,255,.8) inset}
.bookcase::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(130% 80% at 78% -10%, rgba(255,255,255,.5), transparent 55%),
             linear-gradient(0deg, rgba(60,45,25,.07), transparent 22%)}
/* min-width:0 ضروري: الكعوب ذات عرض ثابت وتفرض حداً أدنى يخنق خانة النصّ */
.bay-col{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  border-inline-start:1px solid var(--bay-line);
  box-shadow:-1px 0 0 rgba(255,255,255,.9) inset}
.bay-col:first-child{border-inline-start:0;box-shadow:none}
.bay-col .shelf-row{height:var(--sh,132px)}
.bay-col .shelf-row.top{height:calc(var(--sh,132px) + 22px)}

/* الخانة المفتوحة: نصّ البوابة داخل الخزانة */
.open-bay{justify-content:center;padding:44px 34px;background:
  linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,253,247,.92));
  position:relative;z-index:2}
.open-bay::before{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--bay-line)}

@media (max-width:1180px){
  .bookcase{grid-template-columns:minmax(320px,1.35fr) repeat(2,minmax(0,1fr))}
  .bay-col:nth-child(4){display:none}
}
@media (max-width:900px){
  .bookcase{grid-template-columns:1fr}
  .open-bay{padding:30px 20px;order:-1}
  .bay-col:not(.open-bay){border-inline-start:0;border-top:1px solid var(--bay-line)}
  .bay-col .shelf-row{--sh:124px}
  .bay-col .shelf-row.top{height:calc(var(--sh) + 14px)}
}