/* Book pages (al-kalam-al-qurani.html, al-awwal-wal-awla.html). All classes are bk-* (no clash with site/pages/service.css) */

/* hero: text + cover */
.bk-hgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:80px;align-items:center}
.bk-cover{display:block;transform:rotate(-2deg);transition:transform .4s var(--ease)}
.bk-cover:hover{transform:rotate(0)}
.bk-cover img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 1px 0 rgba(21,35,26,.06),0 34px 60px -30px rgba(15,46,30,.45)}
.bk-hgrid .spec-row{margin:40px 0 0;max-width:none}

/* how to read: a real page excerpt with numbered pins + the matching keys */
.bk-read{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center;margin-top:56px}
.bk-sheet{position:relative;margin:0;background:#fff;border-radius:14px;padding:18px;box-shadow:0 44px 80px -44px rgba(0,0,0,.65)}
.bk-sheet img{display:block;width:100%;height:auto}
.bk-img{position:relative}
.bk-pin{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--gold-l);color:var(--g9);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;line-height:1;transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(217,181,106,.3)}
.bk-keys{list-style:none;margin:0;padding:0;display:grid;gap:24px;counter-reset:k}
.bk-keys li{counter-increment:k;position:relative;padding-inline-start:54px}
.bk-keys li::before{content:counter(k,arabic-indic);position:absolute;inset-inline-start:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--gold-l);color:var(--g9);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;line-height:1}
.bk-keys b{display:block;font-family:var(--display);font-weight:700;font-size:23px;line-height:1.4;color:var(--cream)}
.bk-keys p{margin-top:4px;font-size:16px;line-height:1.85;color:rgba(246,242,231,.78)}

/* contents: page number after each part */
.bk-pg{display:inline-block;margin-inline-start:6px;font-size:14px;font-weight:600;color:var(--gold-d);white-space:nowrap;border-bottom:1.5px solid rgba(133,98,31,.3);transition:border-color .3s}
.bk-pg:hover{border-color:var(--gold-d)}

/* pages from the book */
.bk-pages{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.bk-page{display:block;margin:0;color:inherit}
.bk-page .pg{display:block;aspect-ratio:714/1011;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(21,35,26,.06),0 24px 44px -28px rgba(15,46,30,.45);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.bk-page img{display:block;width:100%;height:100%;object-fit:contain}
.bk-page:hover .pg,.bk-page:focus-visible .pg{transform:translateY(-6px);box-shadow:0 1px 0 rgba(21,35,26,.06),0 34px 56px -28px rgba(15,46,30,.55)}
.bk-page .cap{display:block;margin-top:16px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.bk-page .cap b{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.4;color:var(--g9)}

@media (max-width:980px){
  .bk-hgrid{grid-template-columns:minmax(0,1fr) 260px;gap:48px}
  .bk-read{grid-template-columns:1fr;gap:44px}
  .bk-pages{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bk-hgrid{grid-template-columns:1fr;gap:32px}
  .bk-cover{order:-1;width:170px;margin-inline:0 auto}
  .bk-hgrid .spec-row{grid-template-columns:repeat(3,1fr);margin-top:32px}
  .bk-hgrid .spec-row>div{padding:16px 10px}
  .bk-hgrid .spec-row>div+div{border-top:0;border-inline-start:1px solid var(--line)}
  .bk-hgrid .spec-row b{font-size:26px}
  .bk-hgrid .spec-row span{font-size:12.5px}
  .bk-sheet{padding:10px;border-radius:10px}
  .bk-pin{width:26px;height:26px;font-size:13px;box-shadow:0 0 0 3px rgba(217,181,106,.3)}
  .bk-keys b{font-size:20px}
  .bk-pages{gap:16px}
  .bk-page .cap b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .bk-cover,.bk-page .pg{transition:none}
}