@import url('fonts.css');
.hopr-portraits { color:#233e53; margin:0 auto; max-width:1200px; }
.hopr-portraits-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.hopr-portraits.hopr-portraits h2,.hopr-portraits.hopr-portraits h3,.hopr-portraits.hopr-portraits h4 { font-family:'Poppins',Arial,sans-serif; font-weight:600; }
.hopr-portraits h2 { font-size:30px; margin:0 0 8px; }
.hopr-portraits-heading p { margin:0; color:#5b7183; }
.hopr-portraits p,.hopr-portraits li,.hopr-portrait-description,.hopr-portrait-motivation { font-family:'Fira Sans',Arial,sans-serif; font-size:16px; line-height:1.65; }
.hopr-portraits-controls { display:flex; gap:8px; flex-shrink:0; }
.hopr-portraits-controls button { border:1px solid #cad9e5; border-radius:50%; width:42px; height:42px; background:#fff; color:#244e6b; cursor:pointer; font-size:24px; }
.hopr-portraits-controls button:disabled { opacity:.4; cursor:default; }
.hopr-portraits-list { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:5px; padding:5px 5px 20px; scrollbar-width:thin; }
.hopr-portrait-card { flex:0 0 calc(50% - 12px); min-width:0; scroll-snap-align:start; box-sizing:border-box; background:#fff; border:1px solid #dbe6ed; border-radius:22px; padding:28px; box-shadow:0 5px 20px #193a5110; }
.hopr-portrait-identity { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.hopr-portrait-identity>div { min-width:0; overflow-wrap:anywhere; }
.hopr-portrait-card img { flex:0 0 112px; width:112px; height:112px; object-fit:cover; border-radius:50%; border:4px solid #edf4f7; background:#edf4f7; }
.hopr-portrait-card h3 { font-size:21px; line-height:1.4; margin:0 0 8px; }
.hopr-portrait-card .hopr-portrait-rank { color:#326e84; margin:0; font-size:15px; }
.hopr-portrait-card .hopr-portrait-year { color:#647888; margin:5px 0 0; font-size:14px; }
.hopr-portrait-description,.hopr-portrait-motivation { overflow-wrap:anywhere; }
.hopr-portrait-description p:last-child,.hopr-portrait-motivation p:last-child { margin-bottom:0; }
.hopr-portrait-motivation { margin-top:20px; border-top:1px solid #e5edf2; padding-top:18px; }
.hopr-portrait-motivation h4 { font-size:14px; margin:0 0 10px; color:#326e84; }
.hopr-portraits-empty { padding:24px; background:#fff; border-radius:16px; }
.hopr-portraits :focus-visible { outline:3px solid #287bb4; outline-offset:3px; }
@media(max-width:767px) { .hopr-portrait-card { flex-basis:100%; padding:22px; } .hopr-portrait-identity { gap:14px; } .hopr-portrait-card img { flex-basis:80px; width:80px; height:80px; } .hopr-portrait-card h3 { font-size:18px; } .hopr-portraits h2 { font-size:24px; } .hopr-portraits-heading { align-items:flex-start; } }