/* SurgiFacts.com homepage + /resources/ additions (enqueued by snippet 14 after sf.css). Colours only from --sfc-* tokens. */

/* ---------- Hero: concise five-area list beside the text (replaces the descriptive panel) ---------- */
.sf-hero9__paths--list ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
html body .sf-hero9__paths--list a{padding:11px 16px!important;gap:12px;font:600 15px/1.3 var(--sf-head)}
html body .sf-hero9__paths--list a span{color:var(--sfc-white)}
.sf-hero9__paths--list svg{flex:0 0 32px!important;width:32px!important;height:32px!important;padding:7px!important}
html body .sf-hero9__paths--list a:focus-visible{outline:2px solid var(--sfc-light);outline-offset:-2px}
@media(max-width:1100px){.sf-hero9__paths--list{max-width:440px}}
@media(max-width:600px){html body .sf-hero9__paths--list a{padding:10px 14px!important;font-size:14px}.sf-hero9__paths--list svg{flex-basis:28px!important;width:28px!important;height:28px!important;padding:6px!important}}

/* ---------- Upcoming exhibitions: 5 cards >=1280px, 4 ~1024, 3 / 2 tablet, ~1.6 on phones ---------- */
html body .sf-xsec .sf-car__track{grid-auto-columns:calc((100% - 4*18px)/5);gap:18px}
@media(max-width:1279px){html body .sf-xsec .sf-car__track{grid-auto-columns:calc((100% - 3*18px)/4)}}
@media(max-width:999px){html body .sf-xsec .sf-car__track{grid-auto-columns:calc((100% - 2*16px)/3);gap:16px}}
@media(max-width:760px){html body .sf-xsec .sf-car__track{grid-auto-columns:calc((100% - 16px)/2)}}
@media(max-width:560px){html body .sf-xsec .sf-car__track{grid-auto-columns:62%!important;gap:12px!important}}
@media(max-width:380px){html body .sf-xsec .sf-car__track{grid-auto-columns:78%!important}}
html body .sf-xsec .sf-xcard--v7{display:flex;flex-direction:column}
html body .sf-xsec .sf-xcard__body{display:flex;flex-direction:column;flex:1}
.sf-xcard__links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:auto 0 0!important;padding-top:12px;font:600 13px/1.3 var(--sf-body)}
html body .sf-xcard__links a{display:inline-flex;align-items:center;gap:4px;color:var(--sfc-primary);text-decoration:none}
html body .sf-xcard__links a:hover{color:var(--sfc-accent-dark);text-decoration:underline}
.sf-xcard__links svg{width:13px;height:13px}
/* Arrows stay visible and large enough to tap on every width */
html body .sf-xsec .sf-car__btn{min-width:44px;min-height:44px}

/* ---------- Pakistan section: photo credit ---------- */
.sf-pk9__main{position:relative}
.sf-pk9__credit{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:11.5px;line-height:1.35;color:var(--sfc-white);background:linear-gradient(0deg,color-mix(in srgb,var(--sfc-primary-deep) 80%,transparent),transparent)}
html body .sf-pk9__credit a{color:var(--sfc-white);text-decoration:underline}

/* ---------- /resources/: key guides + topic hubs ---------- */
.sf-rkeys{padding:48px 0 0}
.sf-rkeys .sf-h2{margin-bottom:22px}
.sf-rkeys__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1199px){.sf-rkeys__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.sf-rkeys__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sf-rkeys__grid{grid-template-columns:1fr}}
.sf-rkey{display:flex;flex-direction:column;border:1px solid var(--sfc-border);border-radius:14px;overflow:hidden;background:var(--sfc-surface)}
.sf-rkey__img{display:block;aspect-ratio:16/10;background:var(--sfc-surface-soft);overflow:hidden}
html body .sf-rkey__img img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.sf-rkey__b{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.sf-rkey__cat{font:600 12px/1.2 var(--sf-body);color:var(--sfc-secondary);text-transform:uppercase;letter-spacing:.04em}
html body .sf-rkey h3{margin:8px 0 6px;font:700 16px/1.35 var(--sf-head);color:var(--sfc-heading)}
html body .sf-rkey h3 a{color:inherit;text-decoration:none}
html body .sf-rkey h3 a:hover{color:var(--sfc-primary);text-decoration:underline}
.sf-rkey p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--sfc-text)}
.sf-rkey__meta{margin-top:auto;font-size:12.5px;color:var(--sfc-muted)}
.sf-rhubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
@media(max-width:820px){.sf-rhubs{grid-template-columns:1fr}}
html body a.sf-rhub{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;border:1px solid var(--sfc-light-2);background:var(--sfc-light-soft);color:var(--sfc-text);text-decoration:none;transition:border-color .2s}
html body a.sf-rhub:hover{border-color:var(--sfc-primary)}
.sf-rhub__ic svg{width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:10px;background:var(--sfc-light);color:var(--sfc-primary)}
.sf-rhub__b{display:flex;flex-direction:column;gap:4px}
.sf-rhub__b strong{font:700 16px/1.3 var(--sf-head);color:var(--sfc-heading)}
.sf-rhub__b span{font-size:14px;line-height:1.55}
.sf-rhub__b em{font-style:normal;font-weight:600;font-size:14px;color:var(--sfc-primary);display:inline-flex;align-items:center;gap:6px}
.sf-rhub__b em svg{width:14px;height:14px}
html body .sf-rkeys__more{margin:44px 0 0;font-size:22px}
