/*
 * Autoriah Collections: lays the cards, a collection's opening and the line on a piece's page out, and takes its colours
 * from the theme: --autoriah-collections-accent where a theme sets one, else its primary colour, else the text's. A
 * theme that draws them itself answers the filter 'autoriah_collections_styles' with false.
 */
.autoriah-collections,
.autoriah-collection-opening,
.autoriah-collection-from {
	--ac-accent: var(--autoriah-collections-accent, var(--wp--preset--color--primary, currentColor));
	--ac-line: color-mix(in srgb, currentColor 14%, transparent);
}

/* The cards: three or four a row on a wide screen, two on a tablet, one on a phone. */
/* A few cards sit in the middle at their own width, not stretched or hard against one side. */
.autoriah-collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 19rem)); justify-content: center; gap: 1.5rem; margin: 1.5em 0; }
.autoriah-collection-card { display: flex; flex-direction: column; gap: .35em; color: inherit; text-decoration: none; }
.autoriah-collection-card__art { display: block; aspect-ratio: 1; overflow: hidden; border-radius: .75em; background: color-mix(in srgb, var(--ac-accent) 10%, transparent); }
.autoriah-collection-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.autoriah-collection-card:hover .autoriah-collection-card__art img, .autoriah-collection-card:focus-visible .autoriah-collection-card__art img { transform: scale(1.04); }
.autoriah-collection-card__name { margin-top: .4em; font-weight: 700; font-size: 1.1em; }
.autoriah-collection-card:hover .autoriah-collection-card__name { color: var(--ac-accent); }
.autoriah-collection-card__count { font-size: .9em; opacity: .75; }

/* A collection's opening: the artwork beside its words; one above the other on a narrow screen. */
.autoriah-collection-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; margin: 0 0 2em; }
.autoriah-collection-opening.is-without-art { grid-template-columns: minmax(0, 1fr); }
.autoriah-collection-opening__art img { display: block; width: 100%; height: auto; border-radius: 1em; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .35); }
.autoriah-collection-opening__eyebrow { margin: 0; font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-accent); }
.autoriah-collection-opening__name { margin: .2em 0 .5em; }
.autoriah-collection-opening__story p { margin: 0 0 .8em; }
.autoriah-collection-opening__count { margin: .5em 0 0; font-weight: 600; }
@media (max-width: 780px) {
	.autoriah-collection-opening { grid-template-columns: minmax(0, 1fr); }
}

/* The line on a piece's page. */
.autoriah-collection-from { margin: .25em 0 1em; }
.autoriah-collection-from a { display: inline-flex; align-items: center; gap: .6em; color: inherit; text-decoration: none; }
.autoriah-collection-from img { width: 2.5em; height: 2.5em; object-fit: cover; border-radius: 50%; border: 2px solid var(--ac-line); }
.autoriah-collection-from span { border-bottom: 1px solid var(--ac-accent); }
.autoriah-collection-from a:hover span { color: var(--ac-accent); }

@media (prefers-reduced-motion: reduce) {
	.autoriah-collection-card__art img { transition: none; }
}

/* 0.2.0: past collections, smaller; the newest collection's button to the rest. */
.autoriah-collections--past { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 13rem)); gap: 1rem; }
.autoriah-collections--past .autoriah-collection-card__name { font-size: .95em; }
.autoriah-collections--past .autoriah-collection-card__art img { filter: saturate(.85); }
.autoriah-collections__past-heading { margin-top: 2em; text-align: center; }
.autoriah-collection__more { margin: 1.5em 0 0; text-align: center; }

/* 0.2.1: past collections under the pieces on the "Collections" page. */
.autoriah-collections__past { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--ac-line, rgba(0, 0, 0, .1)); }

/* 0.2.2: the lighter opening (Home) draws its artwork at the width it asks the browser for (62% of a phone's
   screen, centred), so the browser fetches the 768 copy, not the 1024. */
@media (max-width: 780px) {
	.autoriah-collection-opening.is-light .autoriah-collection-opening__art { width: 62vw; max-width: 100%; margin-inline: auto; }
}