/* FK Audio Suite: what the package does not bring. Colours come from the site's tokens. */

/* Screenshots of a plugin: a grid of figures, each with a short caption. */
.fk-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.fk-gallery figure { margin: 0; }
.fk-gallery img { display: block; width: 100%; height: auto; border-radius: var(--fkw-radius); border: 1px solid var(--fkw-color-border); box-shadow: var(--fkw-shadow); }
.fk-gallery figcaption { margin-top: .6rem; font-size: .9rem; color: var(--fkw-color-muted); }
.fk-gallery a { display: block; }

/* One product with its picture: home page. */
.fk-showcase { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .fk-showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fk-showcase img { display: block; width: 100%; height: auto; border-radius: var(--fkw-radius); border: 1px solid var(--fkw-color-border); box-shadow: var(--fkw-shadow); }
.fk-showcase ul { margin: 1rem 0 1.5rem; padding-left: 1.2rem; }
.fk-showcase li + li { margin-top: .35rem; }
.fk-price { font-size: 1.1rem; }

/* Product box above a plan on the pricing page. */
.fk-plan__image { display: block; width: 100%; height: 10rem; object-fit: contain; margin: 0 0 .5rem; }

/* The product box at the top of a plugin page: a picture, not a banner. */
.fkw-prose img[src*="/boxes/"] { max-width: min(100%, 26rem); }

/* Below the footer: who made the site. */
.fk-madeby { margin: 1.25rem 0 .5rem; font-size: .85rem; text-align: center; }
.fk-madeby a { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.fk-madeby a:hover span, .fk-madeby a:focus-visible span { text-decoration: underline; text-underline-offset: .2em; }
.fk-madeby img { display: block; height: 2.75rem; width: auto; background: #fff; padding: .3rem .5rem; border-radius: .5rem; }

/* Plugin cards: the whole product box, never cropped (boxes are square). */
#plugins .fkw-card__image, #plugin-list .fkw-card__image { aspect-ratio: 1; object-fit: contain; background: transparent; }
#plugin-list { padding-top: 1rem; }
.fkw-section:has(+ #plugin-list) { padding-bottom: 0; }