/*
 * Garm, 2026-08-31 — fixed boxes for pictures the shop does not control.
 *
 * The shop is sent photographs at whatever size they happen to be: in the
 * catalogue alone the sides run from 0.70 to 3.02, and nothing in the markup
 * reserved room for them. A card was therefore as tall as its picture, rows
 * of the grid disagreed by up to 148px and a carousel changed height from
 * slide to slide by up to 357px.
 *
 * The box is settled here instead, so it no longer depends on what arrives
 * over the network. Nothing is cropped: the goods stay whole, and the bands
 * that a mismatched picture leaves are painted with --garm-bg, the colour
 * that picture carries at its own edges (App\Support\ImageBackdrop). Where
 * the corners disagree the fallback below is used, which simply looks plain.
 *
 * Loaded last on purpose. Rules stay inside named containers - a rule on img
 * would reach the logo in the header and footer, the decorative shapes and
 * the pictures of the static pages.
 */

.single-blog-card .blog-img img,
.single-services-box .services-img img,
.single-project-box img,
.product-image-box img,
.about-image-content img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--garm-bg, #f7f5f2);
}

/*
 * The blog keeps a rectangle. Its pictures are the most varied on the site and
 * a square left too much of them to the backdrop, so the card crops instead:
 * an article thumbnail is decoration, not goods, and nothing is lost by it.
 * Cropping also means no bands, which is why these carry no --garm-bg.
 */
.single-blog-card.garm-post .blog-img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: transparent;
}

/*
 * The banner on the front page is left exactly as the theme had it: one
 * picture, chosen by hand, with no grid to keep in step.
 */

/*
 * Cards in a row keep one height.
 *
 * Fixing the pictures took away only half of the jagged row: a product name
 * or a tag one line longer than its neighbour's made that card taller on its
 * own. The row already stretches its columns to match - the card simply did
 * not fill the column it sits in.
 *
 * The content block takes up the slack and the read-more is pinned to the
 * bottom, so the buttons line up across the row instead of each following the
 * text above it.
 */
.single-blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.single-blog-card .blog-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.single-blog-card .blog-content .default-btn {
    margin-top: auto;
    align-self: flex-start;
}

/*
 * Slides of one carousel keep one height, for the same reason the cards do:
 * a longer product name made its slide taller than its neighbours.
 *
 * Owl lays the stage out with floats and writes the width of every item
 * inline. Turning the stage into a flex row leaves both alone - the items
 * keep the width Owl gave them (flex: 0 0 auto) and the stage still moves by
 * the transform Owl sets. Checked on the live site: widths and left edges of
 * the slides are identical before and after, the arrows still page, and the
 * document does not grow wider than the window at 390, 768 or 1440.
 */
.services-slider .owl-stage,
.project-slider2 .owl-stage {
    display: flex;
    align-items: stretch;
}

.services-slider .owl-item,
.project-slider2 .owl-item {
    flex: 0 0 auto;
    display: flex;
}

.services-slider .owl-item > *,
.project-slider2 .owl-item > * {
    width: 100%;
}

/*
 * ...and the button inside a slide is pinned to the bottom, the same way the
 * blog card does it. Once the slides are of one height a "see details" that
 * simply follows the text sits at a different level in every slide, which is
 * the jaggedness moved one step down rather than removed.
 */
.services-slider .owl-item > .single-services-box {
    display: flex;
    flex-direction: column;
}

.single-services-box .services-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.single-services-box .services-content .default-btn {
    margin-top: auto;
    align-self: flex-start;
}