/* DRG Cards: makemake's cards row with the optional carousel (moved from css-site-customizations.php) */

/* cards row with carousel: 'yes' scrolls behind centered previous / next arrows where the grid shows four columns; narrower screens show every card. The scrolling .inner pads out (and pulls back with negative margins) so card hover shadows aren't clipped */
.cards--controls { display: none; }
.cards--controls button { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0.25rem; border: 0; border-radius: 0; background-color: rgba(70, 168, 250, 0.1); cursor: pointer; }
.cards--controls button:disabled { background-color: rgba(194, 199, 204, 0.2); cursor: default; }
.cards--controls button:focus-visible { outline: var(--focus-outline); outline-offset: 0.125rem; }
.cards--controls button:not(:disabled):hover { background-color: var(--color-blue-medium); }
.cards--controls button:not(:disabled):hover img { filter: brightness(0) invert(1); }
.cards--controls img { display: block; width: 2.25rem; height: 2.25rem; }
.cards--controls .icon-disabled, .cards--controls button:disabled .icon-enabled { display: none; }
.cards--controls button:disabled .icon-disabled { display: block; }
.cards--controls .cards-prev .icon-enabled, .cards--controls .cards-next .icon-disabled { transform: scaleX(-1); }
@media (width >= 64rem)
{
	.cards--carousel .inner { --cards-gap: 1.5rem; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--cards-gap)) / 4); margin: -0.5rem -1rem -1.5rem; padding: 0.5rem 1rem 1.5rem; scroll-padding: 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.cards--carousel .inner::-webkit-scrollbar { display: none; }
	.cards--carousel .card { scroll-snap-align: start; }
	.cards--carousel .cards--controls { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
}
/* carousel: 'all' keeps scrolling below four columns, with 18.75rem cards that peek past the page gutter */
@media (width < 64rem)
{
	.cards--carousel-all .inner { --cards-gap: 1.5rem; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 18.75rem; margin: -0.5rem -1.5rem -1.5rem; padding: 0.5rem 1.5rem 1.5rem; scroll-padding: 0 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.cards--carousel-all .inner::-webkit-scrollbar { display: none; }
	.cards--carousel-all .card { scroll-snap-align: start; }
	.cards--carousel-all .cards--controls { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
}
.cards--controls[hidden] { display: none !important; }