/* Detection and extinguishing hubs: original photos, theme-aware captions. */
.solution-hub .hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:stretch;}
.solution-hub .solution-card{display:flex;flex-direction:column;min-width:0;width:100%;height:auto;border:1px solid #d5d9dc;background:#fff;box-shadow:var(--card-shadow);text-decoration:none;}
.solution-hub .solution-card>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;box-shadow:none;}
.solution-hub .solution-caption{position:relative;flex:1;padding:1.5rem 2rem 1.8rem;background:#fff;border-top:1px solid #e5e8ea;}
.solution-hub .solution-caption h3{font-size:clamp(1.8rem,2vw,2.7rem);line-height:1.28;margin:0 0 .65rem;color:#d71920;}
.solution-hub .solution-caption p{font-size:clamp(1.3rem,1.1vw,1.6rem);line-height:1.5;margin:0;color:#30383d;}
:root[data-theme="dark"] .solution-hub .solution-card{background:#171a1c;border-color:#33383b;box-shadow:none;}
:root[data-theme="dark"] .solution-hub .solution-caption{background:linear-gradient(110deg,#1d2225,#131617);border-top-color:#ffffff12;}
:root[data-theme="dark"] .solution-hub .solution-caption h3{color:#ff353d;}
:root[data-theme="dark"] .solution-hub .solution-caption p{color:#e2e5e7;}
.solution-hub .solution-card,.solution-hub .solution-card:hover,.solution-hub .solution-card img,.solution-hub .solution-card:hover img{transition:none!important;animation:none!important;transform:none!important;}
.solution-hub .solution-card:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px;}
@media(max-width:700px){.solution-hub .hub-grid{grid-template-columns:minmax(0,1fr);}.solution-hub .solution-caption{padding:1.5rem 1.7rem;}.solution-hub .solution-caption h3{font-size:2rem;}.solution-hub .solution-caption p{font-size:1.4rem;}}

/* Foreground-only WebP products over the same theme-aware backdrop as supplies. */
.solution-hub .solution-visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1672/941;padding:1.8rem 2rem .6rem;overflow:hidden;background:radial-gradient(ellipse at 48% 95%,#c4ccd344 0,transparent 64%),linear-gradient(125deg,#fff,#f0f2f4 60%,#e5e9ec);}
.solution-hub .solution-visual::before{content:"";position:absolute;right:7%;top:-30%;width:1px;height:160%;background:#e1222926;transform:rotate(-25deg);pointer-events:none;}
.solution-hub .solution-visual>img{position:relative;display:block;width:100%;height:100%;min-width:0;object-fit:contain;box-shadow:none;filter:drop-shadow(0 10px 8px #26333d26);z-index:1;}
.solution-hub a[href$="conventional.html"] .solution-visual>img{left:-9%;}
:root[data-theme="dark"] .solution-hub .solution-visual{background:radial-gradient(ellipse at 48% 95%,#60686c66 0,transparent 64%),linear-gradient(125deg,#30373a,#171a1c 60%,#24292c);}
:root[data-theme="dark"] .solution-hub .solution-visual::before{background:#e1222944;}
:root[data-theme="dark"] .solution-hub .solution-visual>img{filter:drop-shadow(0 12px 9px #0007);}
@media(max-width:700px){.solution-hub .solution-visual{padding:1.3rem 1.4rem .5rem;}}

/* Highlight the card without changing its dimensions or position. */
@media(hover:hover) and (pointer:fine){
 .solution-hub .solution-card,.solution-hub .solution-card:hover{outline:1px solid transparent;outline-offset:-1px;transition:box-shadow var(--card-hover-duration) var(--card-hover-easing),outline-color var(--card-hover-duration) var(--card-hover-easing)!important;}
 .solution-hub .solution-card:hover{outline-color:var(--color-primary);box-shadow:none;}
}
@media(prefers-reduced-motion:reduce){.solution-hub .solution-card,.solution-hub .solution-card:hover{transition:none!important;}}
