/* ==========================================================================
   HumanProse: the study guides of the engine's countries
   (/study-in-<country>, /ar/study-in-<country>).
   Loaded after hp-italy-guide.css, whose page these guides share on
   purpose: the four paths are one family. Only what the Italy guide does
   not have is here: the "at a glance" card, the landmark at the end of the
   road and the links to the other paths. Tokens only, both themes, logical
   properties.
   ========================================================================== */

/* ---------- The landmark at the end of the road ---------- */
body.hp-ui.hpi-guide .hpsp-landmark circle {
    fill: none;
    stroke: var(--hx-cream);
    stroke-width: 2;
    opacity: .9;
}

/* ---------- At a glance: a few sourced facts beside the introduction ---------- */
body.hp-ui.hpi-guide .hpsp-glance-list { display: grid; gap: 0; margin: 0; }
body.hp-ui.hpi-guide .hpsp-glance-list > div {
    display: grid; gap: 3px;
    padding: 12px 0;
    border-top: 1px solid var(--hx-line);
}
body.hp-ui.hpi-guide .hpsp-glance-list > div:last-child { padding-bottom: 0; }
body.hp-ui.hpi-guide .hpsp-glance-list dt {
    font: 700 .72rem/1.3 var(--hx-f-body);
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--hx-quill-ink);
}
body.hp-ui.hpi-guide .hpsp-glance-list dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--hx-ink); }

/* ---------- The other paths ---------- */
body.hp-ui.hpi-guide .hpsp-others { margin-top: 44px; margin-inline-start: 86px; }
body.hp-ui.hpi-guide .hpsp-others .hpi-h { margin: 0 0 12px; }
body.hp-ui.hpi-guide .hpsp-others ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hpi-guide .hpsp-others a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 16px 8px 12px;
    padding-inline: 12px 16px;
    border: 1px solid var(--hx-line); border-radius: 999px;
    background: var(--hx-surface);
    color: var(--hx-ink); font-size: .92rem; font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}
body.hp-ui.hpi-guide .hpsp-others a:hover { border-color: var(--hx-quill); background: var(--hx-surface-2); }
body.hp-ui.hpi-guide .hpsp-others a:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
body.hp-ui.hpi-guide .hpsp-others .icon { width: 18px; height: 18px; color: var(--hx-quill-ink); }

/* ---------- Arabic ---------- */
html[lang="ar"] body.hp-ui.hpi-guide .hpsp-glance-list dt { letter-spacing: 0; text-transform: none; font-size: .86rem; }
html[lang="ar"] body.hp-ui.hpi-guide .hpsp-glance-list dd { line-height: 1.85; }

/* ---------- Narrower screens ---------- */
@media (max-width: 720px) {
    body.hp-ui.hpi-guide .hpsp-others { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui.hpi-guide .hpsp-others a { transition: none; }
}

@media print {
    body.hp-ui.hpi-guide .hpsp-others { display: none; }
}

/* The documents list keeps to its card at every reading size: a source link does not stretch the grid's one column. */
body.hp-ui.hpsp-guide .hpi-docs ul { grid-template-columns: minmax(0, 1fr); }