.aegr { --aegr-star: #e8823c; color: var(--aegr-text, #1f2733); background: var(--aegr-bg, transparent); }
.aegr--boxed { padding: 2rem; border-radius: 18px; }
.aegr *, .aegr *::before, .aegr *::after { box-sizing: border-box; }

/* Summary bar */
.aegr__summary { text-align: center; margin: 0 0 2rem; }
.aegr .aegr__heading { font-size: 1.75rem; font-weight: 700; margin: 0 0 1rem; color: var(--aegr-text, #1f2733); }
.aegr__summary-row { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.aegr .aegr__summary-rating { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--aegr-text, #1f2733); }
.aegr__summary-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--aegr-star); font-size: 1.4rem; }
.aegr .aegr__summary-count { display: inline-flex; align-items: center; gap: .35rem; color: var(--aegr-text, #1f2733); opacity: .72; font-size: .95rem; }
.aegr__button { margin-left: .5rem; background: var(--aegr-primary); color: #fff; border-radius: var(--aegr-button-radius, 999px); padding: .65rem 1.4rem; text-decoration: none; font-weight: 600; }

/* Cards */
.aegr__card { background: #fff; border-radius: var(--aegr-card-radius, 14px); box-shadow: 0 6px 24px rgba(16,32,64,.08); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.aegr__card-head { display: flex; align-items: center; gap: .6rem; }
.aegr__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--aegr-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.aegr__meta { display: flex; flex-direction: column; line-height: 1.2; }
.aegr__name { color: var(--aegr-primary); font-weight: 700; }
.aegr__date { color: #8a929e; font-size: .8rem; }
.aegr__g { margin-left: auto; }
.aegr__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--aegr-star); font-size: 1rem; }
.aegr__star { width: 1em; height: 1em; display: inline-block; }
.aegr__star:not(.is-on) { opacity: .28; }
.aegr__text {
	color: #3b4453; font-size: .95rem; line-height: 1.5;
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: var(--aegr-clamp, 6); line-clamp: var(--aegr-clamp, 6);
	overflow: hidden;
}

/* Grid */
.aegr__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .aegr__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .aegr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .aegr__grid { grid-template-columns: 1fr; } }

/* Carousel: two rows, opposite marquee.
   overflow-x: clip hides the horizontal marquee overflow while overflow-y: visible
   keeps the cards' vertical box-shadow. The horizontal mask fades each row's left/
   right edges so the cards dissolve onto the page; generous vertical row padding
   keeps that fade from clipping the card shadows. */
.aegr__carousel { display: flex; flex-direction: column; gap: .5rem; overflow-x: clip; overflow-y: visible; }
.aegr__row {
	overflow-x: clip; overflow-y: visible; padding: 18px 0 30px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.aegr__track { display: flex; gap: 1.25rem; width: max-content; will-change: transform; }
.aegr__track > .aegr__card { width: 320px; flex: 0 0 320px; }
.aegr__row--left  .aegr__track { animation: aegr-marquee-left  var(--aegr-duration, 60s) linear infinite; }
.aegr__row--right .aegr__track { animation: aegr-marquee-right var(--aegr-duration, 60s) linear infinite; }
.aegr__row:hover .aegr__track { animation-play-state: paused; }
@keyframes aegr-marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aegr-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
	.aegr__row { overflow-x: auto; }
	.aegr__track { animation: none !important; }
}
