.har {
--har-star: #fe9638;
--har-accent: #244435;
--har-lines: 6;
margin: 0 0 1.5em;
}
.har *,
.har *::before,
.har *::after { box-sizing: border-box; }
.har [hidden] { display: none !important; } .har .har-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 24px; }
.har .har-score { font-size: 48px; font-weight: 700; line-height: 1; color: var(--har-accent); }
.har .har-summary .har-stars { font-size: 24px; } .har .har-summary-text { margin: 6px 0 0; padding: 0; }
.har-summary-text a { color: inherit; text-decoration: underline; } .har .har-stars {
position: relative;
display: inline-block;
font-family: Arial, "Segoe UI Symbol", sans-serif;
font-size: 18px;
line-height: 1;
letter-spacing: 2px;
white-space: nowrap;
}
.har .har-stars-base { color: #d8dcd8; }
.har .har-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--har-star); } .har .har-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.har.har-cols-1 .har-grid { grid-template-columns: minmax(0, 1fr); }
.har.har-cols-2 .har-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.har.har-cols-4 .har-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.har .har-card {
display: flex;
flex-direction: column;
margin: 0;
padding: 22px 22px 18px;
background: #fff;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.har .har-text {
position: relative;
margin: 12px 0 0;
line-height: 1.6;
max-height: calc(var(--har-lines) * 1.6em);
overflow: hidden;
}
.har .har-text p { margin: 0 0 .6em; padding: 0; }
.har .har-text p:last-child { margin-bottom: 0; padding-bottom: 0; }
.har .har-text.is-clamped::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.4em;
background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
.har .har-text.is-open { max-height: none; }
.har .har-text.is-open::after { content: none; }
.har .har-more {
align-self: flex-start;
margin: 8px 0 0;
padding: 0;
font: inherit;
font-weight: 600;
color: var(--har-accent);
background: none;
border: 0;
text-decoration: underline;
cursor: pointer;
}
.har .har-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, .07);
font-size: 14px;
}
.har .har-author { font-weight: 700; color: var(--har-accent); }
.har .har-date { opacity: .75; } .har .har-cta { margin: 26px 0 0; padding: 0; text-align: center; }
.har .har-button {
display: inline-block;
padding: 12px 26px;
border-radius: 6px;
background: var(--har-accent);
color: #fff !important;
font-weight: 600;
text-decoration: none !important;
transition: filter .2s ease;
}
.har .har-button:hover,
.har .har-button:focus { filter: brightness(1.2); }
.har-empty { padding: 10px 14px; border: 1px dashed #c3c4c7; background: #f6f7f7; } @media (max-width: 980px) {
.har.har-cols-3 .har-grid,
.har.har-cols-4 .har-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.har .har-grid,
.har.har-cols-2 .har-grid,
.har.har-cols-3 .har-grid,
.har.har-cols-4 .har-grid { grid-template-columns: minmax(0, 1fr); }
}