/* Overview pages in the current layout: "Unterseiten mit Kurzbeschreibung" as cards (Templates/MenuAbstract.html)
   and the frame option "Hinweiskasten (grün)" (frame_class "notice"). Kept apart from the compiled app.css;
   replaced by the new design system (workstream 1). app.css sets html { font-size: 120% } (1rem = 19.2px). */

.ifs-overview {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem;
}
.ifs-overview__card {
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid #dcdfe3; border-top: 4px solid #297d31; border-radius: 8px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.ifs-overview__card.has-image { border-top-width: 1px; }
.ifs-overview__card:hover, .ifs-overview__card:focus-within { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); border-color: #297d31; }
.ifs-overview__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* placeholder for cards without a page image next to cards with one: green like the hero of the new design
   (neue-homepage/css: .hero, .featured-photo) with a soft yellow/orange glow that moves from card to card */
.ifs-overview__placeholder {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 212, 38, .55), rgba(255, 212, 38, 0) 55%),
        linear-gradient(135deg, #0F4C20 0%, #1A6028 45%, #297D31 75%, #3A8F3F 100%);
}
.ifs-overview__card:nth-child(3n+2) .ifs-overview__placeholder {
    background:
        radial-gradient(circle at 15% 85%, rgba(245, 158, 11, .45), rgba(245, 158, 11, 0) 55%),
        linear-gradient(135deg, #1A6028 0%, #297D31 55%, #3A8F3F 100%);
}
.ifs-overview__card:nth-child(3n+3) .ifs-overview__placeholder {
    background:
        radial-gradient(circle at 80% 85%, rgba(255, 212, 38, .5), rgba(255, 212, 38, 0) 50%),
        linear-gradient(160deg, #0F4C20 0%, #297D31 70%, #3A8F3F 100%);
}
/* long words, URLs and non-breaking spaces from the RTE ("Weiterbildungsdurchgangs: Sommer") wrap instead of being clipped */
.ifs-overview__body { display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: .9rem 1.1rem 1rem; overflow-wrap: break-word; hyphens: auto; }
.ifs-overview__title { font-size: 1rem; line-height: 1.3; margin: 0; }
/* the live stylesheet styles every h3 in a content frame (.frame-default h3: margins, underline, bold); not the card title */
.ifs-overview__card h3.ifs-overview__title { margin: 0; padding-bottom: 0; border-bottom: 0; font-weight: 400; }
.ifs-overview__title a { color: #1f2328; text-decoration: none; }
/* the whole card is clickable through the title link */
.ifs-overview__title a::after { content: ""; position: absolute; inset: 0; }
.ifs-overview__title a:hover, .ifs-overview__title a:focus-visible { color: #297d31; }
.ifs-overview__title a:focus-visible { outline: none; }
.ifs-overview__card:has(a:focus-visible) { outline: 2px solid #297d31; outline-offset: 2px; }
.ifs-overview__text {
    margin: 0; color: #5f6670; font-size: .85rem; line-height: 1.5;
    /* automatic teasers can be long: four lines at most */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.ifs-overview__more { margin-top: auto; padding-top: .35rem; }
.ifs-overview__more { color: #297d31; font-size: .8rem; font-weight: 600; }

/* frame option "Hinweiskasten (grün)" (contact boxes, calls to action) */
.frame-notice > .cell:nth-child(2) {
    background: #ecf3ec; border-radius: 8px; padding: 1rem 1.25rem; margin-block: 1.5rem;
}
.frame-notice > .cell:nth-child(2) > :last-child,
.frame-notice > .cell:nth-child(2) .ce-bodytext > :last-child { margin-bottom: 0; }
.frame-notice a { color: #1e5e25; font-weight: 600; }