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

/* Footer links: the global "a { color: #65594d }" rule matches the
   footer's own dark-brown background exactly, so the link is invisible.
   Use the same tan the theme already uses for footer text. */
footer .footer-bottom a,
footer .footer-bottom a:link,
footer .footer-bottom a:visited {
    color: #c8bdad !important;
    text-decoration: underline !important;
}

    footer .footer-bottom a:hover,
    footer .footer-bottom a:focus {
        color: #fff !important;
    }

/* ---------------------------------------------------------------------
   Integritetspolicy: the theme's global reset zeroes all margins, and
   there's no default spacing rule for <h4>, so headings sat flush
   against the paragraph text right below them. Give the policy content
   its own readable rhythm. */
.policy-content h4 {
    margin-top: 40px;
    margin-bottom: 12px;
    line-height: 1.3;
}

    .policy-content h4:first-child {
        margin-top: 0;
    }

.policy-content p {
    margin-bottom: 20px;
    line-height: 1.7;
}

.policy-content ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

    .policy-content ul li {
        list-style: disc;
        margin-bottom: 10px;
        line-height: 1.7;
    }

        .policy-content ul li:last-child {
            margin-bottom: 0;
        }

/* ---------------------------------------------------------------------
   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;
    }
}