/* VC4 blue version: the Blog page hero, ported from the reference site (Dave's blog.html, "Hero: copy left, a deck
   of real articles that shuffles on the right"). The deck is built by blue/hero-blog.js. Styles are the reference's
   own, with its colour tokens (assets/theme.css + assets/themes/s2c.css) written out and its fonts set in Lato as on
   the rest of the blue site. Everything is scoped to .b-blog-hero so nothing else on the site changes. */

/* ---------- Hero frame: calm background (blue.css .b-calm), copy on the left, deck on the right ---------- */
@media (min-width: 901px) {
    html[data-blue] .b-blog-hero { min-height: min(calc(100svh - 80px), 704px); justify-content: center; }
}
html[data-blue] .b-blog-hero .blog-hero-body { position: relative; z-index: 2; pointer-events: none; }
html[data-blue] .b-blog-hero .b-blog-copy { max-width: 500px; pointer-events: auto; }

/* Hero text on the light background: teal eyebrow (as on the reference), navy copy, readable buttons */
html[data-blue] .b-blog-hero .blog-eyebrow { color: #138E96 !important; }
html[data-blue] .b-blog-hero .blog-hero-desc { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-blog-hero .blog-hero-desc strong { color: #02263F; }
/* "Contact us" keeps the site-wide teal gradient from blue.css, white on teal */

/* ---------- Topic colours, shared by the cards ---------- */
.b-blog-deck [data-k="inv"] { --k: #138E96; } .b-blog-deck [data-k="fiber"] { --k: #3FC1C9; } .b-blog-deck [data-k="gis"] { --k: #5F99BB; }
.b-blog-deck [data-k="ai"] { --k: #0D9488; } .b-blog-deck [data-k="biz"] { --k: #15445F; }

/* ---------- The deck ---------- */
.b-blog-deck { position: absolute; top: 0; bottom: 0; right: max(2%, calc((100vw - 1400px) / 2)); width: min(46%, 620px); z-index: 1; perspective: 1600px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.b-blog-deck-in { position: relative; width: min(360px, 74%); aspect-ratio: 4 / 4.15; transform-style: preserve-3d;
    transform: rotateY(calc(-14deg + var(--rx, 0) * 10deg)) rotateX(calc(6deg - var(--ry, 0) * 8deg)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.b-blog-card { position: absolute; inset: 0; border-radius: 22px; background: #FFFFFF; box-shadow: 0 30px 60px -28px rgba(2, 38, 63, .45), 0 0 0 1px rgba(2, 38, 63, .06);
    overflow: hidden; display: flex; flex-direction: column; transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease, filter .8s ease;
    will-change: transform; text-decoration: none; color: #02263F; }
.b-blog-card .im { flex: 0 0 52%; background: #F0F6FA center / cover no-repeat; position: relative; }
.b-blog-card .im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(2, 38, 63, .28)); }
.b-blog-card .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.b-blog-card .cat { display: inline-flex; align-items: center; gap: 7px; font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B5160; }
.b-blog-card .cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.b-blog-card h3 { font: 700 clamp(16px, 1.35vw, 19px)/1.25 'Lato', sans-serif; letter-spacing: -.02em; margin: 10px 0 0; padding: 0; color: #02263F; text-transform: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-blog-card .mt { margin-top: auto; font: 700 11px/1 'Lato', sans-serif; color: #8296A3; letter-spacing: .04em; }
/* places in the stack: the front card flat, each one behind it further back, up, right and turned */
.b-blog-card[data-pos="0"] { transform: translate3d(0, 0, 0); }
.b-blog-card[data-pos="1"] { transform: translate3d(26px, -22px, -70px) rotateZ(3deg); filter: brightness(.97); }
.b-blog-card[data-pos="2"] { transform: translate3d(50px, -42px, -140px) rotateZ(6deg); filter: brightness(.93); }
.b-blog-card[data-pos="3"] { transform: translate3d(72px, -60px, -210px) rotateZ(9deg); filter: brightness(.9); opacity: .85; }
.b-blog-card[data-pos="4"] { transform: translate3d(90px, -76px, -280px) rotateZ(12deg); opacity: 0; }
.b-blog-card.out { transform: translate3d(-130%, 40px, 60px) rotateZ(-14deg) !important; opacity: 0 !important; }
/* the dots under the deck: the front card's dot stretches into a teal bar */
.b-blog-note { display: flex; gap: 6px; }
.b-blog-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-blog-note i.on { width: 20px; border-radius: 3px; background: #138E96; }

@media (max-width: 1100px) { .b-blog-deck { width: 44%; right: 0; } }
@media (max-width: 900px) {
    /* under the buttons with its own room, never tucked up behind the copy */
    .b-blog-deck { position: relative; top: auto; right: auto; width: 100%; height: min(108vw, 440px); margin: 34px auto 0; max-width: 520px; gap: 28px; }
    .b-blog-deck-in { width: min(300px, 68vw); margin-left: -44px; transform: rotateY(calc(-8deg + var(--rx, 0) * 6deg)) rotateX(4deg); }
    /* the deck sits after the copy on phones and tablets */
    html[data-blue] .b-blog-hero .b-blog-deck { order: 2; }
}
@media (max-width: 560px) {
    .b-blog-deck { height: min(116vw, 400px); margin-top: 26px; } .b-blog-deck-in { width: min(260px, 64vw); }
    .b-blog-card .im { flex-basis: 48%; } .b-blog-card .bd { padding: 14px 16px 16px; } .b-blog-card h3 { font-size: 15.5px; -webkit-line-clamp: 2; margin-bottom: 10px; }
    .b-blog-card[data-pos="1"] { transform: translate3d(16px, -14px, -60px) rotateZ(2.5deg); } .b-blog-card[data-pos="2"] { transform: translate3d(30px, -26px, -120px) rotateZ(5deg); }
    .b-blog-card[data-pos="3"] { transform: translate3d(42px, -36px, -180px) rotateZ(7deg); } .b-blog-card[data-pos="4"] { transform: translate3d(52px, -44px, -240px) rotateZ(9deg); }
}
@media (min-width: 901px) and (max-height: 800px) { .b-blog-deck-in { width: min(320px, 70%); } }