/* VC4 blue version: the Resources page hero, set up like the reference site's resources.html (Dave's, block
   "hero-fan"): the calm light hero with navy copy on the left and a hand of document covers that turns on the right
   (cards written by blue/hero-resources.js).
   The fan, covers and dots are the reference's own styles (.fan, .fan-in, .fcv, .note), renamed b-res-*, with its
   color tokens written out from assets/theme.css + assets/themes/s2c.css (--ease-out is cubic-bezier(.16, 1, .3, 1)).
   Lato, the site font, stands in for the reference's Sora and JetBrains Mono. The fan's top offset loses the
   reference's 76px header, which sits outside the hero here. */

/* ---------- Hero copy on the light background: navy text, buttons keep their colors ---------- */
html[data-blue] .b-res-hero .blog-eyebrow { color: #138E96 !important; }
html[data-blue] .b-res-hero .blog-hero-desc { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-res-hero .blog-hero-desc strong { color: #02263F; }
/* the white outline button would vanish on the light ground, so it takes navy text and outline */
html[data-blue] .b-res-hero .hero-btn.ghost { color: #02263F; border-color: rgba(2, 38, 63, .35); background: rgba(255, 255, 255, .5); }
html[data-blue] .b-res-hero .hero-btn.ghost:hover { border-color: #02263F; background: rgba(255, 255, 255, .8); }
/* the copy keeps to the left so the fan has room beside it (reference: .rs-hero .copy{max-width:500px}) */
html[data-blue] .b-res-hero .blog-hero-copy { max-width: 500px; position: relative; z-index: 2; }
/* room for the fan, as the reference gives its hero (.rs-hero{min-height:min(100svh,780px)}), less its 76px header, with the copy centered in it */
@media (min-width: 901px) { html[data-blue] .b-res-hero { min-height: min(calc(100svh - 76px), 704px); justify-content: center; } }

/* ---------- Type colors, shared by the fan's covers ---------- */
.b-res-fan [data-k="Whitepaper"] { --k: #138E96; } .b-res-fan [data-k="Guide"] { --k: #3FC1C9; }
.b-res-fan [data-k="Brochure"] { --k: #EB552C; } .b-res-fan [data-k="Checklist"] { --k: #5F99BB; }

/* ---------- Hero fan: a hand of document covers that turns ---------- */
.b-res-fan { position: absolute; top: 0; bottom: 0; right: max(2%, calc((100vw - 1400px) / 2)); width: min(48%, 640px); z-index: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 34px; perspective: 1600px; }
.b-res-fan-in { position: relative; width: min(300px, 56%); aspect-ratio: 4 / 5; transform-style: preserve-3d;
    transform: rotateY(calc(-10deg + var(--rx, 0) * 10deg)) rotateX(calc(4deg - var(--ry, 0) * 6deg)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.b-res-cv { position: absolute; inset: 0; border-radius: 18px; background: #FFFFFF; box-shadow: 0 30px 60px -28px rgba(2, 38, 63, .5), 0 0 0 1px rgba(2, 38, 63, .06); overflow: hidden;
    display: flex; flex-direction: column; transform-origin: 50% 120%; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease, filter .8s ease; will-change: transform; }
.b-res-cv .im { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px 12px 4px; background: linear-gradient(170deg, #FFFFFF, #F0F6FA); }
.b-res-cv .im img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.b-res-cv .bd { padding: 12px 16px 16px; border-top: 1px solid #E3E7EE; }
.b-res-cv small { display: inline-flex; align-items: center; gap: 7px; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B5160; }
.b-res-cv small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.b-res-cv b { font: 700 15px/1.25 'Lato', sans-serif; letter-spacing: -.015em; margin-top: 7px; color: #02263F; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.b-res-cv[data-pos="0"] { transform: translate3d(0, 0, 40px); z-index: 5; }
.b-res-cv[data-pos="1"] { transform: rotateZ(9deg) translate3d(14px, 0, 0); z-index: 4; filter: brightness(.97); }
.b-res-cv[data-pos="-1"] { transform: rotateZ(-9deg) translate3d(-14px, 0, 0); z-index: 4; filter: brightness(.97); }
.b-res-cv[data-pos="2"] { transform: rotateZ(18deg) translate3d(24px, 6px, -40px); z-index: 3; filter: brightness(.93); }
.b-res-cv[data-pos="-2"] { transform: rotateZ(-18deg) translate3d(-24px, 6px, -40px); z-index: 3; filter: brightness(.93); }
.b-res-cv[data-pos="far"] { transform: rotateZ(0) translate3d(0, 40px, -160px); opacity: 0; z-index: 1; }
.b-res-fan .b-res-note { display: flex; gap: 6px; margin-top: 22px; }
.b-res-fan .b-res-note i { width: 6px; height: 6px; border-radius: 50%; background: rgba(2, 38, 63, .18); transition: width .4s cubic-bezier(.16, 1, .3, 1), background .4s; }
.b-res-fan .b-res-note i.on { width: 20px; border-radius: 3px; background: #138E96; }
@media (max-width: 1100px) { .b-res-fan { width: 44%; right: 0; } }
@media (max-width: 900px) {
    .b-res-fan { position: relative; top: auto; right: auto; width: auto; height: min(104vw, 460px); margin: 30px auto 0; max-width: 520px; gap: 26px; }
    /* the hero is a flex column here, so the box takes the full width itself (a block in the reference) */
    html[data-blue] .b-res-fan { width: 100%; box-sizing: border-box; }
    .b-res-fan-in { width: min(250px, 56vw); transform: rotateY(calc(-6deg + var(--rx, 0) * 6deg)) rotateX(3deg); }
}
@media (max-width: 560px) { .b-res-fan { height: min(112vw, 420px); margin-top: 20px; } .b-res-fan-in { width: min(220px, 54vw); } .b-res-cv b { font-size: 14px; } }
@media (min-width: 901px) and (max-height: 800px) { .b-res-fan-in { width: min(270px, 52%); } }