/* site-2027-blog.css: 2027 3D layer for blog articles (body.ar) and the blog index (body.bl). Uses the hx- kit. */

/* ---------- Article: cover picture as a framed, tilted picture on a chalk stage ---------- */
.ar27-lead{margin:clamp(22px,2.6vw,32px) 0 clamp(24px,3vw,34px)}
.ar27-lead .ar-lead{margin:0}
.ar27-frame{background:#fff;padding:10px 10px 12px;border-radius:4px;box-shadow:0 34px 56px -28px rgba(13,31,60,.55),0 0 0 1px var(--hx-line)}
.ar27-frame figcaption{padding:0 4px}
.ar27-lead .ar-lead__w,.ar27-lead .ar-lead__w img{border-radius:2px}
.ar27-lead .hx-obj{box-shadow:none}
.ar27-lead .ar27-frame{box-shadow:0 34px 56px -28px rgba(13,31,60,.55),0 0 0 1px var(--hx-line)}

/* contents card with depth */
.ar-side .ar-toc{padding:20px 22px 12px;background:#fff;border:1px solid var(--hx-line);border-top:3px solid var(--hx-gold);border-radius:4px;box-shadow:0 26px 40px -30px rgba(13,31,60,.5)}
.ar-side .ar-toc ol{border-left:0}
.ar-side .ar-toc a{margin-left:0;padding-left:12px}
.ar-side .ar-sidecta{margin-top:16px;padding:18px 22px 16px;border:0;border-radius:4px;background:var(--hx-ink);color:#fff;box-shadow:0 26px 40px -26px rgba(13,31,60,.7)}
.ar-side .ar-sidecta .ar-reassure{color:#C9D3E3}

/* in-article call to action (shown on phones and tablets) as a navy card */
.ar-cta{padding:clamp(20px,3vw,28px);border:0;border-top:3px solid var(--hx-gold);border-radius:4px;background:var(--hx-ink);color:#fff;box-shadow:0 26px 40px -26px rgba(13,31,60,.65)}
.ar-cta .ar-reassure{color:#C9D3E3}

/* related programme panel */
.ar-panel .ar-pnl{padding:18px;border:1px solid var(--hx-line);border-top:3px solid var(--hx-gold);border-radius:4px;background:#fff;box-shadow:0 30px 46px -32px rgba(13,31,60,.55)}

/* closing band: navy, picture tilted on its own floor */
.ar27-bstage{background:none;padding:12px 18px 24px}
.ar27-bstage .ar27-frame{padding:8px 8px 10px;background:#fff}
.ar27-bstage .ar-bphoto{max-width:none}
.ar27-bstage .ar-bphoto__w{border-radius:2px;background:#e8ecf2}
.ar27-bstage figcaption{color:var(--hx-soft)!important}

/* related posts lift */
.ar-rl li.hx-lift{border-radius:4px}
@media (hover:hover){.ar-rl li.hx-lift:hover{background:#fff}}
.ar-rel .hx-lift:hover{z-index:1;position:relative}

.hx-reviews--slim .s26-wrap{width:100%}

/* ---------- Blog index ---------- */
.bl27-stage{grid-area:f;align-self:start;padding:34px 30px 38px}
.bl27-card{background:#fff;color:var(--hx-ink);border-radius:4px;padding:12px 12px 18px}
.bl27-card .bl-feat{margin:0}
.bl27-card .bl-feat__img img{border-radius:2px}
.bl27-card .bl-feat__m{margin:16px 6px 8px}
.bl27-card .bl-feat__t,.bl27-card .bl-feat__e,.bl27-card .s26-tl{margin-left:6px;margin-right:6px}
.bl27-card .s26-tl{display:inline-block}
.bl-row.hx-lift{padding-inline:18px;margin-inline:-18px;border-radius:4px;border-bottom-color:#dde3ec}
@media (hover:hover){.bl-row.hx-lift:hover{background:#fff;border-color:transparent}}
.bl-posts{background:var(--hx-chalk)}

@media (max-width:1023px){
  .bl27-stage{grid-area:auto;margin-top:34px}
}
@media (max-width:680px){
  .bl27-stage{padding:18px 14px 22px}
  .ar27-lead{padding:16px 12px}
  .bl-row.hx-lift{padding-inline:0;margin-inline:0}
}
@media (prefers-reduced-motion:reduce){.ar27-frame,.bl27-card{transition:none}}

/* ---- QA 12 Nov: crisp text on tilted cards (smaller tilt; still straightens on hover and focus) ---- */
.hx-obj.bl27-card{transform:rotateX(calc(1.5deg + var(--hx-rx,0deg))) rotateY(calc(-3.5deg + var(--hx-ry,0deg)))}
.hx-obj.ar27-frame{transform:rotateX(calc(2deg + var(--hx-rx,0deg))) rotateY(calc(-4deg + var(--hx-ry,0deg)))}
.hx-obj--left.ar27-frame{transform:rotateX(calc(2deg + var(--hx-rx,0deg))) rotateY(calc(4deg + var(--hx-ry,0deg)))}
/* founder card on phones: the kit keeps "Founder and lead tutor" on one line and the narrow card cuts it; let it wrap */
@media (max-width:680px){.hx-founder__cap b{white-space:normal;line-height:1.3}}