/*
 * Illustrator grid pages (Home, Children's, Art Licensing): filter bar, name
 * list and cards. The filter bar's own look is in site.css.
 */

.grid-page__filters,
.grid-page__body { position: relative; display: flex; flex-direction: row; }
.grid-page__spacer,
.grid-page__filter,
.grid-page__sidebar,
.grid-page__grid { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; }

/* Filter bar row */
.grid-page__filters { gap: 20px; margin-top: 60px; }
.grid-page__spacer { gap: 20px; width: 12%; margin-left: 2%; }
.grid-page__filter { align-items: flex-start; gap: 0; width: 86%; }
.grid-page__filter-widget { position: relative; min-width: 0; max-width: 100%; }

/* Name list and grid row */
.grid-page__body { gap: 0; margin-top: 20px; padding: 10px; }
.grid-page__sidebar { gap: 20px; width: 12%; margin-left: 2%; padding: 3px; }
.grid-page__grid { gap: 20px; width: 86%; padding: 10px; }

.grid-page__list-title { position: relative; min-width: 0; max-width: 100%; text-align: left; font-family: "Oxygen", Sans-serif; font-size: 18px; font-weight: 400; color: var(--c-text); }
.grid-page__list-title p { margin-bottom: 0; }

.name-list { position: relative; min-width: 0; max-width: 100%; }
.name-list__inner { margin-top: -18px; }
.name-list__items { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0; align-items: stretch; }
.name-list__item { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden; text-align: left; transition-duration: .25s; transition-property: background, border, box-shadow; }
.name-list__text { display: block; flex-direction: column; flex-grow: 1; }
.lemonade .name-list__title,
.lemonade .name-list__title a { margin: 0; font-family: "Oxygen", Sans-serif; font-size: 16px; font-weight: 400; color: var(--c-secondary); }

/* Cards */
.artist-grid { position: relative; min-width: 0; max-width: 100%; }
.artist-grid__items { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 12px 10px; align-items: stretch; }
.artist-grid__item * { word-break: break-word; }
.artist-grid__empty { padding: 30px 0; text-align: center; color: #1f2124; }

.lemonade a.artist-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; background-color: var(--c-panel); color: var(--c-primary); transition: background .3s, border .3s, box-shadow .3s, transform .4s; }
.artist-card__inner { display: flex; flex-direction: column; flex-grow: 1; gap: 0; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; }

.artist-card-image { position: relative; min-width: 0; max-width: 100%; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; text-align: center; }
.artist-card-image img { display: inline-block; vertical-align: middle; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: none; border-radius: 0; box-shadow: none; }

.artist-card__title { position: relative; min-width: 0; max-width: 100%; padding: 10px 0 10px 10px; text-align: left; }
.artist-card__name { margin: 0; padding: 0; font-family: "Oxygen", Sans-serif; font-size: 16px; font-weight: 400; line-height: 1; color: var(--c-text); }
.artist-card__styles { position: relative; min-width: 0; max-width: 100%; }

@media (max-width: 1024px) {
	.grid-page__filters { margin-top: 40px; }
	.grid-page__spacer, .grid-page__sidebar { display: none; }
	.grid-page__filter { width: 100%; padding: 0 20px; }
	.grid-page__grid { width: 100%; }
	.grid-page--licensing .grid-page__grid { width: 86%; }
	.name-list__items { grid-template-columns: repeat(2, 1fr); }
	.artist-grid__items { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.grid-page__filters { flex-wrap: wrap; margin-top: 20px; padding-bottom: 20px; }
	.grid-page__filter { flex-wrap: wrap; padding: 0; }
	.grid-page__body { flex-direction: row-reverse; flex-wrap: wrap-reverse; gap: 30px 0; }
	.grid-page__grid,
	.grid-page--licensing .grid-page__grid { flex-wrap: wrap; width: 100%; }
	.name-list__items { grid-template-columns: repeat(1, 1fr); }
	.artist-grid__items { grid-template-columns: repeat(3, 1fr); }
	.artist-card__inner { flex-wrap: wrap; }
}

/* Art Licensing: white list on the dark page, and no styles filter. */
.is-dark .grid-page__list-title { color: var(--c-white); }
.lemonade .grid-page--licensing .name-list__title,
.lemonade .grid-page--licensing .name-list__title a { color: var(--c-white); }
.grid-page--licensing #toggle-style-filter { display: none; }