/* «شرح الصفحة بالفيديو» — قسم هادئ أسفل الصفحات (assets/js/core/page-guide.js). يستعمل رموز base.css فقط. */

.pg-host { inline-size: 100%; max-inline-size: 1480px; margin-inline: auto; padding: 0 var(--s-5) var(--s-8); }
.pg-host[hidden] { display: none; }
@media (max-width: 900px) { .pg-host { padding: 0 var(--s-4) var(--s-6); } }

.pg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.pg-head {
  display: flex; align-items: center; gap: var(--s-2); inline-size: 100%; padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 0; font: inherit; font-weight: 700; color: var(--primary-700); cursor: pointer; text-align: start;
}
.pg-head:hover { background: var(--surface-3); }
.pg-head:focus-visible { outline: 2px solid var(--gold-600); outline-offset: -2px; }
.pg-head-t { font-family: var(--font-display); font-size: 14px; }
.pg-done { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--success); }
.pg-done[hidden] { display: none; }
.pg-chev { display: inline-flex; margin-inline-start: auto; color: var(--text-3); transition: transform .18s ease; }
.pg-done:not([hidden]) + .pg-chev { margin-inline-start: var(--s-2); }
.pg-head[aria-expanded="true"] .pg-chev { transform: rotate(180deg); }

.pg-body { padding: var(--s-4); border-block-start: 1px solid var(--border); }
.pg-body[hidden] { display: none; }
.pg-card { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: var(--s-5); align-items: center; }
.pg-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-sm); }
.pg-poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.pg-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .25s ease, filter .25s ease; }
.pg-poster:hover img { transform: scale(1.03); filter: brightness(.9); }
.pg-poster:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.pg-play {
  position: absolute; inset: 0; margin: auto; inline-size: 56px; block-size: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--gold-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.pg-play .icon { inline-size: 24px; block-size: 24px; fill: currentColor; stroke: currentColor; }
.pg-dur { position: absolute; inset-block-end: var(--s-2); inset-inline-start: var(--s-2); padding: 2px 8px; border-radius: var(--r-full); background: rgba(11, 20, 17, .78); color: #fff; font-size: 12px; font-weight: 700; }
.pg-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; background: #000; display: block; }
.pg-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--primary-700); }
.pg-sub { margin-top: var(--s-2); color: var(--text-2); font-size: 13.5px; line-height: 1.8; }
.pg-note { margin-top: var(--s-3); font-size: 12px; color: var(--text-3); }

@media (max-width: 720px) {
  .pg-card { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* على شاشة الدخول: بطاقة مدمجة تحت نموذج الدخول */
.gate-stack { inline-size: 100%; max-inline-size: 420px; display: flex; flex-direction: column; gap: var(--s-4); }
.gate-stack .gate-card { max-inline-size: none; }
.gate-stack .pg-host { padding: 0; max-inline-size: none; }
.pg.is-compact .pg-card { grid-template-columns: 120px 1fr; gap: var(--s-3); }
.pg.is-compact .pg-play { inline-size: 34px; block-size: 34px; }
.pg.is-compact .pg-play .icon { inline-size: 16px; block-size: 16px; }
.pg.is-compact .pg-dur { display: none; }
.pg.is-compact .pg-body { padding: var(--s-3); }
.pg.is-compact .pg-title { font-size: 14px; }
.pg.is-compact:has(.pg-video) .pg-card { grid-template-columns: 1fr; }

@media print { .pg-host { display: none !important; } }