/* 4founder — blog card presentation fixes
 *
 * Cards appear in three places, all using .blogarticle_headline (title) and
 * .ending_text > .oxy-stock-content-styles (excerpt):
 *   - home grid               (Oxygen template 184 "Blogposts 3x grid")
 *   - /blog/ index page        (page 212 "Blog", its own inline card copy)
 *   - related "Ähnliche Artikel" (template 218 "Blog articles repeater")
 *
 * The three copies use DIFFERENT Oxygen element ids, so everything is targeted by
 * shared CLASSES / structure (id-agnostic). Goal: uniform cards — equal image size,
 * equal card height, and the "Lesen Sie mehr" buttons on the same Y per row — while
 * the excerpt sits directly under the title (no reserved gap) and the title may wrap.
 *
 * How alignment is kept without a title gap: the grid stretches the cards in a row to
 * equal height; the card link + text wrapper fill that height; the button is pushed to
 * the bottom with margin-top:auto. So variable title/excerpt length is absorbed BELOW
 * the excerpt, not between title and excerpt.
 */

/* Featured image: uniform 240px, cropped. /blog/ uses a different image element
 * (image-7) than home/related (image-75); match by structure + explicit-id fallback. */
a.ct-link:has(.blogarticle_headline) img.ct-image,
img[data-id^="image-75-"],
img[data-id="image-7-212"] {
    height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;   /* never let the image shrink in the flex column */
}

/* Title: natural height, up to 3 lines, clean ellipsis. Excerpt sits right under it. */
.blogarticle_headline {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Excerpt: directly under the title; margin-bottom guarantees a gap before the button.
 * The number of excerpt lines is set per-card by src/scripts/blog-cards.js so that
 * title lines + excerpt lines is constant (a 3-line title => 1-line excerpt, etc.).
 * The clamp:3 here is the first-paint / no-JS default. */
.ending_text {
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;   /* gap between excerpt and the button */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.ending_text .oxy-stock-content-styles {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Equal-height cards + button pinned to the bottom so buttons line up across a row. */
a.ct-link:has(.blogarticle_headline) {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;   /* stack from the top, don't center */
}
a.ct-link:has(.blogarticle_headline) > .ct-div-block:has(.blogarticle_headline) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
.read_article_button {
    margin-top: auto !important;
}