/* Expert portraits in the first screen, following the AppFox hero. */
.hero-experts { margin: 2px 0 4px; }
.hero-experts-label { display: inline-block; margin-bottom: 10px; color: #626975; font-size: 14px; text-decoration: none; }
.hero__flex { display: flex; align-items: center; padding: 3px 0; isolation: isolate; }
.hero-expert-photo, .hero-experts-all { flex: 0 0 52px; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 50%; background: #f2f3f5; position: relative; transition: transform .18s ease; }
.hero-expert-photo + .hero-expert-photo, .hero-experts-all { margin-left: -13px; }
.hero-expert-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: inherit; }
.hero-experts-all { display: flex; align-items: center; justify-content: center; color: #d9162b; font-size: 28px; text-decoration: none; }
.hero-expert-photo:hover, .hero-expert-photo:focus-visible, .hero-experts-all:hover, .hero-experts-all:focus-visible { transform: translateY(-5px); z-index: 2; outline: 2px solid #d9162b; outline-offset: 2px; }
.s24-name a { color: inherit; text-decoration: none; }
.s24-name a:hover { color: #d9162b; text-decoration: underline; }
.s24-profile-link { display: inline-block; margin: 14px 0; color: #d9162b; font-weight: 500; }
.expert-page { padding: 28px 0 64px; color: #242832; }
.expert-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; font-size: 14px; color: #626975; }
.expert-breadcrumbs a { color: inherit; }
.expert-profile { display: grid; grid-template-columns: 160px minmax(0,1fr) 300px; gap: 28px 32px; padding: 32px; border: 1px solid #d9dde3; border-radius: 8px; background: #fff; }
.expert-portrait { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.expert-profile h1 { margin: 0 0 16px; font-size: 30px; line-height: 1.2; }
.expert-role { margin: 0 0 18px; color: #d9162b; font-size: 17px; line-height: 1.5; }
.expert-bio { margin: 0; line-height: 1.65; color: #626975; }
.expert-skills { background: #f4f5f6; padding: 20px; border-radius: 6px; }
.expert-skills h2 { margin: 0 0 16px; font-size: 20px; }
.expert-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.expert-tags li { padding: 7px 12px; border: 1px solid #d9dde3; border-radius: 20px; background: white; font-size: 13px; line-height: 1.4; }
.expert-stats { grid-column: 1 / 3; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.expert-stat strong { display: block; font-size: 24px; }
.expert-stat span { font-size: 14px; color: #626975; }
.expert-cta { align-self: center; text-align: center; border: 1px solid #d9162b; border-radius: 30px; padding: 14px 20px; color: #d9162b; text-decoration: none; }
.expert-cta:hover { background: #d9162b; color: white; }
.expert-section { margin-top: 40px; }
.expert-section h2 { margin: 0 0 22px; font-size: 28px; }
.expert-questions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 40px; padding-left: 22px; line-height: 1.6; }
.expert-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.expert-case { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; padding: 24px; border: 1px solid #d9dde3; border-radius: 8px; color: inherit; text-decoration: none; }
.expert-case h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.expert-case span { color: #d9162b; font-size: 14px; }
.expert-case:hover { border-color: #d9162b; }
.expert-consult { margin-top: 40px; padding: 28px; background: #f4f5f6; border-radius: 8px; }
.expert-consult p { line-height: 1.6; }
.expert-consult-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.expert-consult-links a { color: #d9162b; }
.expert-back { display: inline-block; margin-top: 28px; color: #626975; }
.expert-articles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.expert-article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9dde3; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; }
.expert-article:hover, .expert-article:focus-visible { border-color: #d9162b; }
.expert-article-image { width: 100%; height: 200px; object-fit: cover; }
.expert-article-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; flex: 1; }
.expert-article time { color: #626975; font-size: 13px; }
.expert-article h3 { font-size: 22px; line-height: 1.35; margin: 0; }
.expert-article-author { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13px; line-height: 1.4; }
.expert-article-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
@media(max-width:1000px) { .expert-articles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .expert-articles-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:1000px) { .expert-profile { grid-template-columns: 150px minmax(0,1fr); } .expert-skills { grid-column: 1 / -1; } .expert-stats { grid-column: auto; } .expert-cases { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .hero-expert-photo,.hero-experts-all { flex-basis: 40px; width: 40px; height: 40px; } .hero-expert-photo + .hero-expert-photo,.hero-experts-all { margin-left: -14px; } .expert-page { padding-top: 20px; } .expert-profile { grid-template-columns: minmax(0,1fr); padding: 22px; gap: 22px; } .expert-profile h1 { font-size: 27px; } .expert-portrait { width: 130px; height: 130px; } .expert-skills,.expert-stats { grid-column: auto; } .expert-questions,.expert-cases { grid-template-columns: minmax(0,1fr); } .expert-section h2 { font-size: 25px; } }
@media(prefers-reduced-motion:reduce) { .hero-expert-photo,.hero-experts-all { transition: none; } }
@media(max-width:600px) {
  .hero-expert-photo,.hero-experts-all { flex-basis: calc((100% + 140px) / 11); width: calc((100% + 140px) / 11); height: auto; aspect-ratio: 1; }
  .hero-expert-photo { line-height: 0; }
  .hero-experts-all { line-height: 1; }
  .hero-expert-photo img { height: auto; aspect-ratio: 1; object-fit: cover; }
}