.hy-callout {
display: block;
margin: 20px 0 0;
padding: 14px 16px 16px;
border: 1px solid rgba(94, 92, 230, 0.28);
border-radius: var(--radius-md, 18px);
background: rgba(94, 92, 230, 0.06);
}
.hy-callout__head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 10px;
}
.hy-callout__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
background: #5e5ce6;
color: #fff;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.02em;
}
.hy-callout__badge::before {
content: "★";
font-size: 11px;
line-height: 1;
}
.hy-callout__sub {
font-size: 12px;
font-weight: 600;
color: var(--muted, #667085);
}
.hy-callout__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.hy-callout__item {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.hy-callout__item > p:only-child { grid-column: 1 / -1; }
.hy-callout__item > p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text, #111318);
}
.hy-callout__item > p strong { font-weight: 800; }
.hy-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 720px) {
.hy-tag { font-size: 12px; }
}
.hy-tag--lecture {
background: rgba(52, 199, 89, 0.14);
color: #1f8f43;
border: 1px solid rgba(52, 199, 89, 0.3);
}
.hy-tag--ext {
background: rgba(10, 132, 255, 0.1);
color: var(--accent-strong, #0066cc);
border: 1px solid rgba(10, 132, 255, 0.28);
}
.hy-callout--danger {
border-color: rgba(229, 72, 77, 0.34);
background: rgba(229, 72, 77, 0.06);
}
.hy-callout--danger .hy-callout__badge { background: #e5484d; }
.hy-callout--danger .hy-callout__badge::before { content: "⚠"; }
.hy-tag--danger {
background: rgba(229, 72, 77, 0.12);
color: #c1361a;
border: 1px solid rgba(229, 72, 77, 0.32);
}
@media (max-width: 600px) {
.hy-callout__item { grid-template-columns: 1fr; gap: 4px; }
}