/* Blog archive: scoped styling, shared palette, and CSS-built dimensional icons. */
.sf-blogs { padding-block: 30px 80px; }
.sf-blogs :is(h1,h2,h3,p) { margin: 0; }
.sf-blogs-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 42px; margin-bottom: 36px; border: 1px solid var(--site-line); border-radius: 36px; background: radial-gradient(ellipse at 8% 50%,var(--site-primary-soft),transparent 55%),var(--site-card); overflow: hidden; }
.sf-blogs-hero__copy { position: relative; z-index: 1; max-width: 760px; min-width: 0; }
.sf-blogs-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; font-size: 12px; color: var(--site-muted); }
.sf-blogs-breadcrumb a:hover { color: var(--site-primary); }
.sf-blogs-eyebrow { display: block; color: var(--site-primary); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.sf-blogs-hero h1 { font-size: clamp(24px,2.6vw,36px); font-weight: 800; line-height: 1.7; }
.sf-blogs-hero p { margin-top: 12px; color: var(--site-muted); font-size: 14px; line-height: 2; }
.sf-blogs-hero__art { position: relative; display: grid; place-items: center; flex: 0 0 200px; height: 210px; }
.sf-blogs-hero__orbit { position: absolute; width: 192px; height: 192px; border: 1px solid color-mix(in srgb,var(--site-primary) 23%,transparent); border-radius: 50%; transform: rotate(-18deg) scaleY(.8); }
.sf-blogs-hero__orbit::after { content: ''; position: absolute; inset: 22px; border: 1px dashed color-mix(in srgb,var(--site-primary) 20%,transparent); border-radius: 50%; }
.sf-blogs-hero__spark { position: absolute; top: 24px; right: 18px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg,var(--site-primary-hover),var(--site-primary)); box-shadow: inset -3px -3px 5px color-mix(in srgb,var(--site-dark) 30%,transparent),0 8px 18px var(--site-focus-ring); }
.sf-blogs-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,320px); gap: 30px; align-items: start; }
.sf-blogs-results { min-width: 0; scroll-margin-top: 110px; }
.sf-blogs-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sf-blogs-heading h2 { font-size: 23px; font-weight: 800; line-height: 1.7; }
.sf-blogs-heading .sf-blogs-eyebrow { margin-bottom: 3px; }
.sf-blogs-count { flex-shrink: 0; padding: 7px 14px; border: 1px solid var(--site-line); border-radius: 999px; color: var(--site-muted); font-size: 12px; }
.sf-blogs-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--site-line); border-radius: 20px; background: var(--site-card); font-size: 13px; overflow-wrap: anywhere; }
.sf-blogs-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--site-primary-soft); color: var(--site-primary); }
.sf-blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; transition: opacity .2s; }
.sf-blog-grid--loading { opacity: .55; }
.sf-blog-card { min-width: 0; padding: 10px; border: 1px solid var(--site-line); border-radius: 30px; background: var(--site-card); box-shadow: 0 10px 28px color-mix(in srgb,var(--site-dark) 18%,transparent); transition: transform .2s,border-color .2s,box-shadow .2s; }
.sf-blog-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--site-primary) 50%,var(--site-line)); box-shadow: 0 18px 32px color-mix(in srgb,var(--site-dark) 35%,transparent); }
.sf-blog-card__link { display: flex; flex-direction: column; height: 100%; border-radius: 22px; color: var(--site-text); }
.sf-blog-card__media { position: relative; flex-shrink: 0; aspect-ratio: 8/5; border-radius: 22px; overflow: hidden; background: var(--site-bg); isolation: isolate; }
.sf-blog-card__media > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s; }
.sf-blog-card:hover .sf-blog-card__media > img { transform: scale(1.035); }
.sf-blog-card__fallback { height: 100%; display: grid; place-items: center; background: radial-gradient(ellipse,var(--site-primary-soft),var(--site-bg)); }
.sf-blog-card__fallback > .sf-blog-icon { width: 110px; }
.sf-blog-card__reading { position: absolute; bottom: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid color-mix(in srgb,var(--site-line) 75%,transparent); border-radius: 999px; background: color-mix(in srgb,var(--site-bg) 92%,transparent); color: var(--site-text); font-size: 11px; backdrop-filter: blur(8px); }
.sf-blog-card__reading .sf-blog-icon { width: 20px; }
.sf-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 12px 7px; min-width: 0; }
.sf-blog-card__date { display: flex; align-items: center; gap: 7px; color: var(--site-muted); font-size: 11px; }
.sf-blog-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-primary); }
.sf-blog-card h3 { margin-top: 10px; font-size: 18px; font-weight: 750; line-height: 1.9; }
.sf-blog-card__body > p { color: var(--site-muted); font-size: 13px; line-height: 2; margin-top: 8px; }
.sf-blog-card h3,.sf-blog-card__body > p,.sf-blogs-recent__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sf-blog-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: auto; color: var(--site-primary); font-size: 13px; font-weight: 700; }
.sf-blog-card__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg,var(--site-primary-hover),var(--site-primary)); color: var(--site-on-primary); box-shadow: inset 0 2px 2px color-mix(in srgb,var(--site-text) 40%,transparent),0 4px 0 color-mix(in srgb,var(--site-primary) 48%,var(--site-dark)); transition: transform .2s; }
.sf-blog-card:hover .sf-blog-card__arrow { transform: translateX(-3px); }
.sf-blogs-sidebar { display: grid; gap: 22px; }
.sf-blogs-panel { padding: 24px; min-width: 0; border: 1px solid var(--site-line); border-radius: 28px; background: var(--site-card); }
.sf-blogs-panel__heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sf-blogs-panel__heading > div { min-width: 0; }
.sf-blogs-panel__heading .sf-blog-icon { width: 42px; flex-shrink: 0; }
.sf-blogs-panel h2 { font-size: 16px; line-height: 1.8; font-weight: 750; }
.sf-blogs-panel__heading p { margin-top: 4px; color: var(--site-muted); font-size: 11px; }
.sf-blogs-search { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--site-line); border-radius: 999px; background: var(--site-bg); }
.sf-blogs-search:focus-within { border-color: var(--site-primary); box-shadow: 0 0 0 4px var(--site-focus-ring); }
.sf-blogs-search input { width: 100%; min-width: 0; padding: 6px 10px; border: 0; border-radius: 999px; outline: 0; box-shadow: none; background: transparent; color: var(--site-text); font-size: 12px; }
.sf-blogs .sf-blogs-search input:focus-visible { outline: 0; }
.sf-blogs-search input::placeholder { color: var(--site-muted); opacity: 1; }
.sf-blogs-search button { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--site-primary); color: var(--site-on-primary); }
.sf-blogs button { cursor: pointer; }
.sf-blogs button:disabled { cursor: wait; opacity: .65; }
.sf-blogs-recent { display: grid; gap: 10px; }
.sf-blogs-recent__item { display: flex; align-items: center; gap: 11px; padding: 10px; margin-inline: -10px; border-radius: 20px; transition: background .2s; }
.sf-blogs-recent__item:hover { background: var(--site-primary-soft); }
.sf-blogs-recent__media { display: grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 17px; overflow: hidden; background: var(--site-bg); }
.sf-blogs-recent__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-blogs-recent__media .sf-blog-icon { width: 36px; }
.sf-blogs-recent__copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.sf-blogs-recent__title { font-size: 12px; font-weight: 700; line-height: 1.9; }
.sf-blogs-recent time { font-size: 10px; color: var(--site-muted); }
.sf-blogs-recent__arrow { color: var(--site-primary); font-size: 20px; flex-shrink: 0; }
.sf-blogs-empty { grid-column: 1/-1; padding: 48px 24px; text-align: center; border: 1px dashed var(--site-line); border-radius: 30px; background: var(--site-card); }
.sf-blogs-empty .sf-blog-icon { width: 90px; margin-bottom: 20px; }
.sf-blogs-empty h3 { font-size: 20px; line-height: 1.8; }
.sf-blogs-empty p { color: var(--site-muted); font-size: 13px; margin-top: 8px; }
.sf-blogs-empty button { margin-top: 22px; }
.sf-blogs-loading { color: var(--site-muted); font-size: 12px; margin-top: 16px!important; }
.sf-blogs-pagination { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--site-line); border-radius: 26px; background: var(--site-card); }
.sf-blogs-pagination nav { gap: 16px; }
.sf-blogs-pagination nav > div { gap: 14px; }
.sf-blogs-pagination .pagination { gap: 7px; margin: 0; }
.sf-blogs-pagination .page-item .page-link { display: grid; place-items: center; min-width: 42px; min-height: 42px; margin: 0; padding: 7px 12px; border-radius: 50%; font-size: 13px; }
.sf-blogs-pagination p { font-size: 11px; white-space: nowrap; }
.sf-blogs-pagination .page-link:focus { box-shadow: 0 0 0 4px var(--site-focus-ring); }
/* Bevels, layered planes and perspective keep the icons crisp at every size. */
.sf-blog-icon { position: relative; display: inline-block; width: 48px; aspect-ratio: 1; vertical-align: middle; perspective: 240px; }
.sf-blog-icon--hero { width: 146px; transform: rotate(-9deg); }
.sf-blog-icon__back { position: absolute; inset: 17% 8% 8% 18%; border-radius: 16%; background: linear-gradient(145deg,var(--site-primary),color-mix(in srgb,var(--site-primary) 60%,var(--site-dark))); transform: rotate(10deg) rotateY(-12deg); box-shadow: 3px 5px 0 color-mix(in srgb,var(--site-primary) 35%,var(--site-dark)); }
.sf-blog-icon__paper { position: absolute; inset: 8% 18% 19% 8%; border: 1px solid color-mix(in srgb,var(--site-text) 30%,transparent); border-radius: 16%; background: linear-gradient(145deg,color-mix(in srgb,var(--site-text) 94%,var(--site-primary)),color-mix(in srgb,var(--site-text) 65%,var(--site-muted))); transform: rotate(-6deg) rotateY(-10deg); box-shadow: inset 2px 2px 3px color-mix(in srgb,var(--site-text) 65%,transparent),4px 5px 0 color-mix(in srgb,var(--site-muted) 70%,var(--site-dark)),8px 14px 16px color-mix(in srgb,var(--site-dark) 24%,transparent); }
.sf-blog-icon__picture { position: absolute; inset: 16% 17% 48%; border-radius: 18%; background: linear-gradient(145deg,var(--site-primary-hover),var(--site-primary)); box-shadow: inset -2px -2px 2px color-mix(in srgb,var(--site-dark) 12%,transparent); }
.sf-blog-icon__lines { position: absolute; inset: 65% 17% auto; height: 5%; border-radius: 999px; background: var(--site-dark); opacity: .5; box-shadow: 0 8px 0 var(--site-dark); }
.sf-blog-icon__lens { position: absolute; inset: 8% 27% 27% 8%; border: 5px solid var(--site-primary); border-radius: 50%; background: radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--site-text) 75%,transparent),var(--site-primary-soft) 55%); box-shadow: inset 2px 2px 3px var(--site-focus-ring),3px 4px 0 color-mix(in srgb,var(--site-primary) 45%,var(--site-dark)),6px 9px 14px color-mix(in srgb,var(--site-dark) 25%,transparent); transform: rotateY(-14deg); }
.sf-blog-icon__handle { position: absolute; top: 56%; left: 56%; width: 17%; height: 39%; border-radius: 999px; background: linear-gradient(90deg,var(--site-primary-hover),var(--site-primary)); transform: rotate(-42deg); box-shadow: 2px 3px 0 color-mix(in srgb,var(--site-primary) 40%,var(--site-dark)); }
.sf-blog-icon__dial { position: absolute; inset: 8%; border: 3px solid var(--site-primary); border-radius: 50%; background: linear-gradient(145deg,var(--site-primary-hover),var(--site-primary)); box-shadow: inset 1px 1px 2px var(--site-text),2px 3px 0 color-mix(in srgb,var(--site-primary) 40%,var(--site-dark)); }
.sf-blog-icon__hand { position: absolute; left: 47%; top: 18%; width: 8%; height: 36%; border-radius: 999px; background: var(--site-dark); }
.sf-blog-icon__hand::after { content: ''; position: absolute; left: 0; bottom: 0; width: 260%; height: 25%; border-radius: 999px; background: var(--site-dark); transform: rotate(25deg); transform-origin: left center; }
@media (min-width: 1100px) { .sf-blogs-sidebar { position: sticky; top: 110px; } }
@media (max-width: 1199px) { .sf-blogs-layout { gap: 22px; grid-template-columns: minmax(0,1fr) 280px; } .sf-blog-grid { gap: 18px; } .sf-blogs-panel { padding: 20px; } .sf-blogs-pagination .d-sm-flex { flex-direction: column; align-items: flex-start!important; } }
@media (max-width: 991px) { .sf-blogs-layout { grid-template-columns: minmax(0,1fr); } .sf-blogs-sidebar { grid-row: 1; grid-template-columns: repeat(2,minmax(0,1fr)); } .sf-blogs-hero { padding: 28px; gap: 20px; } .sf-blogs-hero__art { flex-basis: 150px; height: 180px; } .sf-blogs-hero__orbit { width: 145px; height: 145px; } .sf-blog-icon--hero { width: 116px; } .sf-blogs-pagination .d-sm-flex { flex-direction: row; align-items: center!important; } }
@media (max-width: 575px) { .sf-blogs { padding-block: 20px 50px; } .sf-blogs-hero { padding: 24px; border-radius: 28px; margin-bottom: 24px; display: block; } .sf-blogs-hero__art { display: none; } .sf-blogs-hero h1 { font-size: 25px; } .sf-blogs-breadcrumb { margin-bottom: 16px; } .sf-blogs-layout { gap: 24px; } .sf-blogs-sidebar { display: block; } .sf-blogs-sidebar .sf-blogs-panel + .sf-blogs-panel { margin-top: 16px; } .sf-blog-grid { grid-template-columns: minmax(0,1fr); gap: 20px; } .sf-blogs-panel { padding: 20px; border-radius: 24px; } .sf-blogs-heading h2 { font-size: 21px; } .sf-blogs-pagination { padding: 16px; } .sf-blogs-pagination .d-sm-none .pagination { width: 100%; justify-content: space-between; } .sf-blogs-pagination .d-sm-none .page-link { border-radius: 999px; padding-inline: 18px; } }
@media (prefers-reduced-motion: reduce) { .sf-blogs * { transition: none!important; } .sf-blog-card:hover,.sf-blog-card:hover .sf-blog-card__media > img,.sf-blog-card:hover .sf-blog-card__arrow { transform: none; } }