/* =========================================================================
   Future Tech Care · Author page, category pages + FTC Author Posts widget
   Tokens follow the FTC Brand Book v1. Everything is scoped to .sh-page so
   Hello Elementor / Elementor Kit styles cannot leak in.
   ========================================================================= */
.sh-page{
  --band:#0F1E33; --band-2:#16294A; --band-fg:#F2F6FB; --band-muted:#A9B8CC; --band-line:#263B5C;
  --bg:#F4F7FA; --surface:#FFFFFF; --fg:#0F1E33; --muted:#4B5C72; --line:#DCE3EC;
  --teal:#0A7470; --teal-soft:#E3F3F2; --teal-on-band:#3FD0C9;
  --band-glow:rgba(63,208,201,.13);
  --shadow-panel:0 24px 50px -30px rgba(15,30,51,.55);
  --font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  --radius-l:20px; --wrap:1180px; --space-section:80px;
  --cover-1:#0F1E33; --cover-2:#0A5E5B; --cover-3:#3A2A5C;
  font-family:var(--font-body); font-size:16px; line-height:1.625; color:var(--fg); -webkit-font-smoothing:antialiased;
}
main.sh-page{display:block; margin:0; padding:0; max-width:none; width:100%; background:var(--bg)}
.sh-page,.sh-page *,.sh-page *::before,.sh-page *::after{box-sizing:border-box}
.sh-page h1,.sh-page h2,.sh-page h3,.sh-page p{margin:0}
.sh-page :focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px}
.sh-page .sh-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.sh-page .sh-wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ================= HERO ================= */
.sh-page .sh-hero{position:relative; overflow:hidden; background:var(--band); color:var(--band-fg);
  background-image:radial-gradient(640px 460px at 82% 52%, var(--band-glow), transparent 70%)}
.sh-page .sh-hero--author .sh-wrap{padding-block:22px 64px}
.sh-page .sh-crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:14px; line-height:20px; color:var(--band-muted)}
.sh-page .sh-crumbs li{display:inline-flex; align-items:center; gap:8px; margin:0}
.sh-page .sh-crumbs li + li::before{content:"/"; color:var(--band-line); font-weight:600}
.sh-page .sh-crumbs a{color:var(--band-muted); text-decoration:none; text-underline-offset:3px}
.sh-page .sh-crumbs a:hover{color:var(--band-fg); text-decoration:underline}
.sh-page .sh-crumbs [aria-current="page"]{color:var(--band-fg); font-weight:600}
.sh-page .sh-hero :focus-visible{outline-color:var(--teal-on-band)}
.sh-page .sh-hero h1{font-family:var(--font-display); font-size:clamp(30px,2.2vw + 1rem,40px); line-height:1.15; font-weight:700; letter-spacing:-.02em; text-wrap:balance; color:var(--band-fg)}

/* Compact hero (category pages, FTC Page Hero): breadcrumbs, H1, short description */
.sh-page .sh-hero--compact .sh-wrap{padding-block:22px 60px}
.sh-page .sh-hero--compact.has-bar .sh-wrap{padding-block:22px 76px}  /* room for the topics bar that overlaps the band */
.ftc-hero-wrap{display:block; width:100%}
.sh-page .bl-hero-copy{display:grid; gap:14px; max-width:820px; margin-top:clamp(24px,3.4vw,38px)}
.sh-page .sh-hero-lede{font-size:clamp(16px,.4vw + .9rem,18px); line-height:1.6; color:var(--band-muted); max-width:72ch}
.sh-page .sh-hero-lede a{color:var(--teal-on-band)}

.sh-page .au-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(32px,5vw,72px); align-items:center; margin-top:clamp(24px,3.4vw,40px)}
.sh-page .au-copy{display:grid; gap:16px; min-width:0; justify-items:start}
.sh-page .au-name-block{display:grid; gap:8px}
.sh-page .au-role{font-family:var(--font-display); font-weight:600; font-size:17px; line-height:24px; color:var(--teal-on-band)}
.sh-page .au-role span{color:var(--band-muted); font-weight:500}
.sh-page .au-bio{font-size:clamp(16px,.4vw + .9rem,18px); line-height:1.6; color:var(--band-muted); max-width:60ch}
.sh-page .au-bio a{color:var(--teal-on-band)}
.sh-page .au-links{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.sh-page .au-links li{margin:0}
.sh-page .au-link{display:grid; place-items:center; width:42px; height:42px; border-radius:999px; border:1px solid var(--band-line); color:var(--band-fg); text-decoration:none;
  transition:border-color .15s,color .15s,background-color .15s}
.sh-page .au-link:hover{border-color:var(--teal-on-band); color:var(--teal-on-band); background:var(--band-2)}
.sh-page .sh-hero .au-link:focus-visible{border-radius:999px}
.sh-page .au-stats{list-style:none; margin:8px 0 0; padding:22px 0 0; width:100%; border-top:1px solid var(--band-line);
  display:grid; grid-template-columns:repeat(3,max-content); justify-content:start; gap:18px clamp(28px,4vw,56px); font-variant-numeric:tabular-nums}
.sh-page .au-stats li{display:grid; gap:4px; min-width:0; margin:0}
.sh-page .au-stats b{font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1; letter-spacing:-.02em; color:var(--band-fg)}
.sh-page .au-stats span{font-size:14px; line-height:1.35; color:var(--band-muted)}

.sh-page .au-photo{position:relative; justify-self:center; width:clamp(240px,25vw,320px); max-width:100%; aspect-ratio:1; margin:0}
.sh-page .au-photo::before{content:""; position:absolute; inset:-18px; border-radius:50%; border:1.5px dashed var(--band-line)}
.sh-page .au-circle{position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, var(--band-2), var(--band) 70%);
  box-shadow:0 0 0 6px var(--band), 0 0 0 8px var(--teal-on-band), 0 30px 60px -30px rgba(0,0,0,.7)}
.sh-page .au-circle img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border-radius:0}
.sh-page .au-initial{font-family:var(--font-display); font-weight:800; font-size:clamp(72px,7.5vw,104px); line-height:1; letter-spacing:-.03em; color:var(--band-fg); opacity:.9}
.sh-page .au-photo figcaption{position:absolute; left:-14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; max-width:calc(100% + 28px);
  padding:8px 14px; border-radius:999px; background:var(--surface); color:var(--fg); box-shadow:var(--shadow-panel);
  font-family:var(--font-display); font-weight:600; font-size:13.5px; line-height:18px; white-space:nowrap}
.sh-page .au-photo figcaption::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none}

@media (max-width:899.98px){
  .sh-page .au-grid{grid-template-columns:minmax(0,1fr); gap:28px}
  .sh-page .au-photo{order:-1; justify-self:start; width:132px}
  .sh-page .au-photo::before{inset:-10px}
  .sh-page .au-photo figcaption{display:none}
  .sh-page .au-initial{font-size:46px}
}
@media (max-width:519.98px){
  .sh-page .au-stats{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px}
  .sh-page .au-stats li:last-child{grid-column:1 / -1}
}

/* Elementor wrapper around the posts section: no extra spacing. */
.au-posts-area .e-con{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; --gap:0px; padding:0}
.au-posts-area .e-con > .e-con-inner{padding:0; max-width:none}
.elementor-widget-ftc-author-posts{width:100%}

/* ================= TOPICS BAR (floating category bar) ================= */
.sh-page{--bl-top:73px}
@media (max-width:1199.98px){ .sh-page{--bl-top:65px} }
.sh-page .bl-bar{position:sticky; top:calc(var(--bl-top) + env(safe-area-inset-top,0px) + 10px); z-index:30; margin-top:-27px; pointer-events:none;
  transition:transform .28s ease, opacity .2s ease}
.sh-page .bl-bar .sh-wrap{display:flex}
.sh-page .bl-cats{position:relative; display:flex; align-items:center; min-width:0; max-width:100%; padding:3px; pointer-events:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:0 16px 34px -20px rgba(15,30,51,.42);
  transition:box-shadow .2s ease, background-color .2s ease}
.sh-page .bl-bar.is-stuck .bl-cats{box-shadow:var(--shadow-panel)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sh-page .bl-bar.is-stuck .bl-cats{background:color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px)}
}
.sh-page .bl-cats-label{flex:none; display:inline-flex; align-items:center; gap:8px; padding:0 9px 0 12px; margin-right:2px; border-right:1px solid var(--line);
  font-family:var(--font-display); font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sh-page .bl-cats-label svg{color:var(--teal)}
.sh-page .bl-cats-scroll{position:relative; flex:1 1 auto; min-width:0; display:flex}
.sh-page .bl-cats-list{list-style:none; margin:0; padding:3px; display:flex; gap:1px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-inline:40px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.sh-page .bl-cats-list::-webkit-scrollbar{display:none}
.sh-page .bl-cats-list li{flex:none; scroll-snap-align:start; margin:0}
.sh-page .bl-cats-list li[hidden]{display:none}
.sh-page .bl-cat{display:inline-flex; align-items:center; min-height:40px; padding:0 12px; border-radius:999px; white-space:nowrap; text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:14px; line-height:20px; color:var(--muted); transition:background-color .15s,color .15s}
.sh-page .bl-cat:hover{color:var(--fg); background:var(--bg)}
.sh-page .bl-cat[aria-current]{background:var(--teal-soft); color:var(--teal)}
.sh-page .bl-cat:focus-visible{outline-offset:0; border-radius:999px}
.sh-page .bl-cats.has-next .bl-cats-list{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.sh-page .bl-cats.has-prev .bl-cats-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px); mask-image:linear-gradient(90deg,transparent,#000 56px)}
.sh-page .bl-cats.has-prev.has-next .bl-cats-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.sh-page .bl-arrow{display:none; position:absolute; top:50%; z-index:1; width:34px; height:34px; margin-top:-17px; padding:0; place-items:center;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer; transition:border-color .15s,color .15s}
.sh-page .bl-arrow:hover,.sh-page .bl-arrow:focus{border-color:var(--teal); color:var(--teal); background:var(--surface)}
.sh-page .bl-arrow--prev{left:3px} .sh-page .bl-arrow--next{right:3px}
@media (hover:hover) and (pointer:fine){
  .sh-page .bl-cats.has-prev .bl-arrow--prev,.sh-page .bl-cats.has-next .bl-arrow--next{display:grid}
}
@media (max-width:767.98px){
  .sh-page .bl-cats{width:100%}
  .sh-page .bl-cats-label{display:none}
  .sh-page .bl-bar.is-hidden{transform:translateY(calc(-100% - 24px)); opacity:0}
  .sh-page .bl-bar.is-hidden .bl-cats{pointer-events:none}
}

/* ================= POSTS ================= */
.sh-page .bl-posts{background:var(--bg); padding-block:clamp(40px,5vw,56px) var(--space-section)}
.sh-page.bl-list{position:relative; background:var(--bg)}  /* the topics bar floats only inside this block */
.sh-page .bl-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px; margin-bottom:24px}
.sh-page .bl-head h2{font-family:var(--font-display); font-size:clamp(24px,1.1vw + 1rem,28px); line-height:1.2; font-weight:700; letter-spacing:-.015em; color:var(--fg)}
.sh-page .bl-count{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums}
.sh-page .bl-head{scroll-margin-top:calc(var(--bl-top) + env(safe-area-inset-top,0px) + 88px)}
.sh-page .bl-clear{background:none; border:0; padding:4px 0; font:inherit; font-size:15px; font-weight:600; color:var(--teal); cursor:pointer; text-decoration:none; text-underline-offset:3px; text-transform:none; letter-spacing:0}
.sh-page .bl-clear:hover,.sh-page .bl-clear:focus{text-decoration:underline; background:none; color:var(--teal)}
.sh-page .bl-clear[hidden],.sh-page .bl-empty[hidden]{display:none}
.sh-page .bl-empty{font-size:16px; color:var(--muted); padding:28px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius-l); text-align:center}

.sh-page .bl-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.sh-page .bl-post{display:flex; min-width:0; margin:0}
.sh-page .bl-post[hidden]{display:none}
.sh-page .bl-card{position:relative; display:flex; flex-direction:column; width:100%; min-width:0; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-l); transition:border-color .15s, transform .15s, box-shadow .15s}
.sh-page .bl-card:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:0 22px 40px -30px rgba(15,30,51,.45)}
.sh-page .bl-card:focus-within{outline:3px solid var(--teal); outline-offset:2px}
.sh-page .bl-card h3 a:focus-visible{outline:none}
.sh-page .bl-cover{position:relative; aspect-ratio:16/9; overflow:hidden; display:grid; align-content:end; padding:16px 18px; color:var(--band-fg);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:22px 22px}
.sh-page .bl-cover img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; border-radius:0}
.sh-page .bl-cover.c1{background-color:var(--cover-1)}
.sh-page .bl-cover.c2{background-color:var(--cover-2)}
.sh-page .bl-cover.c3{background-color:var(--cover-3)}
.sh-page .bl-mark{position:absolute; right:16px; top:16px; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:var(--teal-on-band)}
.sh-page .bl-word{position:relative; font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1; letter-spacing:-.02em; opacity:.95}
.sh-page .bl-body{display:flex; flex-direction:column; gap:10px; flex:1; padding:20px 22px 22px; min-width:0}
.sh-page .bl-tag{align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--teal-soft); color:var(--teal);
  font-size:12px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.sh-page .bl-card h3{font-family:var(--font-display); font-size:clamp(19px,.5vw + 1rem,21px); line-height:1.3; font-weight:600; letter-spacing:-.01em; text-wrap:balance; color:var(--fg)}
.sh-page .bl-card h3 a{color:inherit; text-decoration:none}
.sh-page .bl-card h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.sh-page .bl-card:hover h3 a{color:var(--teal)}
.sh-page .bl-excerpt{font-size:15px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden}
.sh-page .bl-meta{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:13.5px; line-height:1.4; color:var(--muted); font-variant-numeric:tabular-nums}
.sh-page .bl-read{flex:none; display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:600}
.sh-page .bl-read svg{transition:transform .15s}
.sh-page .bl-card:hover .bl-read svg{transform:translateX(3px)}

.sh-page .bl-flag{position:absolute; left:16px; top:16px; z-index:1; padding:3px 10px; border-radius:999px; background:var(--teal-on-band); color:#0F1E33;
  font-size:12px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.sh-page .bl-post:not(.is-lead) .bl-flag{display:none}
@media (min-width:980px){
  .sh-page .bl-post.is-lead{grid-column:1 / -1}
  .sh-page .bl-post.is-lead .bl-card{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .sh-page .bl-post.is-lead .bl-cover{aspect-ratio:auto; min-height:340px; padding:28px 30px}
  .sh-page .bl-post.is-lead .bl-word{font-size:2.6rem}
  .sh-page .bl-post.is-lead .bl-mark{width:56px; height:56px; right:24px; top:24px}
  .sh-page .bl-post.is-lead .bl-mark svg{width:26px; height:26px}
  .sh-page .bl-post.is-lead .bl-flag{left:24px; top:24px}
  .sh-page .bl-post.is-lead .bl-body{justify-content:center; gap:14px; padding:clamp(28px,3.4vw,44px)}
  .sh-page .bl-post.is-lead .bl-card h3{font-size:clamp(24px,1.3vw + 1rem,30px); line-height:1.2; font-weight:700; letter-spacing:-.015em}
  .sh-page .bl-post.is-lead .bl-excerpt{font-size:17px; line-height:1.6; -webkit-line-clamp:4; line-clamp:4}
  .sh-page .bl-post.is-lead .bl-meta{margin-top:10px; font-size:14px}
}
@media (min-width:640px) and (max-width:979.98px){
  .sh-page .bl-post.is-lead{grid-column:1 / -1}
  .sh-page .bl-post.is-lead .bl-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sh-page .bl-post.is-lead .bl-cover{aspect-ratio:auto; min-height:260px}
  .sh-page .bl-post.is-lead .bl-word{font-size:2rem}
  .sh-page .bl-post.is-lead .bl-body{justify-content:center}
}

.sh-page .bl-more-row{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:40px}
.sh-page .bl-more-row[hidden]{display:none}
.sh-page .bl-more{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px;
  border:2px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px; line-height:20px; transition:border-color .15s; text-transform:none; letter-spacing:0}
.sh-page .bl-more:hover,.sh-page .bl-more:focus{border-color:var(--fg); background:var(--surface); color:var(--fg)}
.sh-page .bl-more-note{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}

@media (max-width:979.98px){
  .sh-page .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
}
@media (max-width:639.98px){
  .sh-page .bl-grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .sh-page .sh-hero--author .sh-wrap{padding-block:18px 56px}
  .sh-page .sh-hero--compact .sh-wrap{padding-block:18px 44px}
  .sh-page .sh-hero--compact.has-bar .sh-wrap{padding-block:18px 64px}
  .sh-page .bl-head{margin-bottom:18px}
  .sh-page .bl-more{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .sh-page .bl-card,.sh-page .bl-read svg,.sh-page .bl-more,.sh-page .au-link,.sh-page .bl-bar,.sh-page .bl-cats,.sh-page .bl-cat{transition:none}
  .sh-page .bl-card:hover{transform:none}
}