/* =====================================================================
   Custom overrides for Höganäs Stenhuggeri
   Loaded after the theme CSS in _Layout.cshtml.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Gravsten gallery grid
   ---------------------------------------------------------------------
   The gallery cards use Bootstrap 3 float columns. When the cards have
   images of different aspect ratios, or names that wrap to a different
   number of lines, the float columns "catch" on each other and the grid
   collapses (images spilling outside their column, rows misaligned).

   Fix: turn the row into a flex grid so every card in a row is the same
   height, give every thumbnail the same fixed size, and push the button
   to the bottom of the card so all buttons line up.
--------------------------------------------------------------------- */

.tombstone-grid .send-flowers {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Uniform thumbnail box; the photo is scaled to fit inside it without
   cropping or distortion (let-boxed on a white background). */
.tombstone-grid .sf-thumb {
    height: 280px;
    overflow: hidden;
    background: #fff;
}

    .tombstone-grid .sf-thumb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.tombstone-grid .send-flowers h4 {
    margin-top: 25px;
}

/* Push every button to the bottom edge of its card. */
.tombstone-grid .send-flowers .btn {
    margin-top: auto;
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

@media (min-width: 768px) {
    .tombstone-grid {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .tombstone-grid > [class*="col-"] {
            display: -webkit-flex;
            display: flex;
            margin-bottom: 30px;
        }

        /* row spacing is handled by the column above, not the card */
        .tombstone-grid .send-flowers.margin-bottom-50 {
            margin-bottom: 0;
        }
}

@media (max-width: 767px) {
    .tombstone-grid .sf-thumb {
        height: 220px;
    }
}