/*
 * Inspiration gallery (functions/inspiratie): projects in a grid - one column
 * on a phone, two from 640px, three from 1024px - each its photograph, its
 * caption and the carpet tiles used in it, in that order. Rows, not masonry:
 * items appended by "load more" land under the ones before, in reading order.
 *
 * The photos run from 2.4:1 wide to 1:2 tall, many of them collages, so none
 * is cropped. On a phone, one to a row, each photo takes its own proportions
 * (the page carries the ratio as --inspiration-ratio), only a very tall one
 * held to 4:5. From 640px, beside each other, every photo sits in the same 5:4
 * frame - the frame that suits this set best, about three quarters of it
 * photo on average - so rows line up and captions start level. Where a photo
 * does not fill its frame, the rest is a soft, blurred copy of the photo
 * itself (its small thumbnail, --inspiration-thumb): no empty bands, and the
 * whole photo still in view. Decision 21.
 */

.inspiration-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shop-space-10) var(--shop-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.inspiration {
    display: flex;
    flex-direction: column;
    gap: var(--shop-space-4);
    container-type: inline-size;
}

.inspiration__figure {
    display: grid;
    gap: var(--shop-space-3);
    margin: 0;
}

.inspiration__photo {
    position: relative;
    display: block;
    /* The width stated, so the height cap cannot narrow the frame through
       its aspect ratio: a capped photo keeps the full width, the rest filled. */
    width: 100%;
    aspect-ratio: var(--inspiration-ratio, 4 / 3);
    max-block-size: 125cqi;
    overflow: hidden;
    border-radius: var(--shop-radius-lg);
    background: var(--shop-surface-subtle);
}

/* The fill behind a photo that does not reach its frame's edges: the photo's
   thumbnail, blurred, dimmed a little so the sharp photo leads. Pure
   decoration: a pseudo-element with no content reaches no assistive
   technology. On a phone only a photo held to 4:5 (--tall, from the stored
   proportions) leaves room around it, so only those load the fill there. */
.inspiration__photo::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: center / cover;
    filter: blur(28px) brightness(0.92) saturate(0.85);
}

.inspiration--tall .inspiration__photo::before {
    background-image: var(--inspiration-thumb);
}

.inspiration__image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inspiration__caption {
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
    overflow-wrap: break-word;
}

/* Stored captions carry their own paragraphs and links; Foundation would set
   those (a larger paragraph, its own link colour). They read as the caption,
   and the links as links everywhere in the design system (cms-prose.css) - in
   the gallery and in the viewer. Foundation underlines anchors on hover, hence
   the repeated states. */
:where(.inspiration__caption, .image-viewer__caption) p {
    font-size: inherit;
    line-height: inherit;
}

:is(.inspiration__caption, .image-viewer__caption) a,
:is(.inspiration__caption, .image-viewer__caption) a:hover,
:is(.inspiration__caption, .image-viewer__caption) a:focus {
    color: var(--shop-accent);
    font-weight: var(--shop-weight-bold);
    text-decoration: none;
}

:is(.inspiration__caption, .image-viewer__caption) a:hover,
:is(.inspiration__caption, .image-viewer__caption) a:focus {
    color: var(--shop-accent-strong);
    text-decoration: underline;
}

.inspiration__products {
    display: grid;
    gap: var(--shop-space-2);
}

.inspiration__products-label {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-xs);
    line-height: var(--shop-leading-normal);
    font-weight: var(--shop-weight-semibold);
    letter-spacing: var(--shop-tracking-caps);
    text-transform: uppercase;
}

.inspiration__product-list {
    display: grid;
    gap: var(--shop-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .inspiration-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inspiration__photo {
        aspect-ratio: 5 / 4;
        max-block-size: none;
    }

    .inspiration__photo::before {
        background-image: var(--inspiration-thumb);
    }
}

@media (min-width: 1024px) {
    .inspiration-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}