/* Afortis Case Studies hub — Figma `Case Studies` 2423:15462 (desktop) / 2423:15354 (mobile). */

.afortis-cshub { font-family: Inter, sans-serif; color: #262424; }
/* Track the reused global "Reach Out" form width at EVERY breakpoint so the listing and the contact
   section line up. Avada's form content = min(1331px content-cap, viewport − ~12px near-full-bleed
   gutter); a fixed max-width+padding can only match one regime, so mirror the form's own formula. */
.afortis-cshub-wrap { width: min(1331px, calc(100% - 12px)); margin: 0 auto; box-sizing: border-box; }
.afortis-cshub *, .afortis-cshub *::before, .afortis-cshub *::after { box-sizing: border-box; }

/* ===== head: breadcrumb + H1 + subtitle + tabs ===== */
.afortis-cshub-head { background: #f5f4f9; padding: 40px 0 8px; }
.afortis-cshub-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9a95a6; margin-bottom: 26px; }
.afortis-cshub-crumbs a { color: #9a95a6; text-decoration: none; }
.afortis-cshub-crumbs a:hover { color: #523f8a; }
.afortis-cshub-crumbs svg { width: 14px; height: 14px; opacity: .7; }
.afortis-cshub-h1 { font-family: 'Arsenal', serif; font-weight: 400; font-size: 48px; line-height: 1.1; color: #262424; margin: 0 0 16px; }
.afortis-cshub-sub { font-size: 16px; line-height: 1.6; color: #606060; max-width: 620px; margin: 0 0 28px; }

.afortis-cshub-tabs { display: flex; flex-wrap: wrap; gap: 10px 28px; border-bottom: 1px solid rgba(150,116,181,0.25); padding-bottom: 0; }
.afortis-cshub-tab { appearance: none; background: none; border: 0; padding: 0 0 14px; margin: 0; font-family: Inter, sans-serif; font-size: 15px; color: #606060; cursor: pointer; position: relative; white-space: nowrap; transition: color .15s; }
.afortis-cshub-tab:hover { color: #523f8a; }
.afortis-cshub-tab.is-active { color: #523f8a; }
.afortis-cshub-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #523f8a; }

/* ===== card grid ===== */
.afortis-cshub-listing { background: #f5f4f9; padding: 36px 0 64px; }
.afortis-cshub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.afortis-cshub--cards .afortis-cshub-grid { gap: 24px; }

.afortis-cshub-card { background: #ffffff; display: flex; flex-direction: column; overflow: hidden; }
.afortis-cshub-card[hidden] { display: none; }

/* thumbnail (lilac client-portrait placeholder + category badge) */
.afortis-cshub-thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(150deg, #efeaf6 0%, #e4dcef 100%); overflow: hidden; }
.afortis-cshub-person { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: 58%; height: 58%; color: #c9b7de; }
.afortis-cshub-badge { position: absolute; left: 20px; bottom: 20px; background: #523f8a; color: #fff; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; padding: 8px 14px; border-radius: 4px; max-width: calc(100% - 40px); }

.afortis-cshub-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.afortis-cshub-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.afortis-cshub-meta-i { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #9674b5; }
.afortis-cshub-meta-i svg { width: 16px; height: 16px; flex: none; }

.afortis-cshub-title { font-family: 'Arsenal', serif; font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.afortis-cshub-title a { color: #262424; text-decoration: none; }
.afortis-cshub-title a:hover { color: #523f8a; }
.afortis-cshub-excerpt { font-size: 15px; line-height: 1.5; color: #606060; margin: 0 0 18px; }
.afortis-cshub-more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #523f8a; text-decoration: none; font-weight: 500; margin-bottom: 20px; }
.afortis-cshub-more svg { width: 16px; height: 16px; }
.afortis-cshub-more:hover { gap: 9px; text-decoration: underline; }
.afortis-cshub-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.afortis-cshub-tag { font-size: 12px; color: #606060; background: #f2f0f7; padding: 6px 12px; border-radius: 4px; }

.afortis-cshub-empty { text-align: center; padding: 40px 0; color: #606060; }

/* Reach Out is NOT styled here — the hub reuses the site-wide chrome global form element
   ([fusion_global id=5458/5459]), same as every other hub/service page. */

/* ===== responsive ===== */
@media only screen and (max-width: 980px) {
	.afortis-cshub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 640px) {
	.afortis-cshub-head { padding-top: 28px; }
	.afortis-cshub-h1 { font-size: 38px; }
	.afortis-cshub-grid { grid-template-columns: 1fr; }
	.afortis-cshub-tabs { gap: 12px 22px; }
}