/**
 * jp-webinare-figma-imagecards.css
 *   Page: body:is(.page-id-85338, .page-id-263093)  /de(/en)/hilfecenter/webinare/
 *   Module: "LIVE-WEBINARE — Aktuelle Themen und Termine" slider
 *           (section.webinare-slider-jtl-section, CardSliderMobile auto/live)
 *   Figma: JTL-Website-Modules-5 node 1015-4337 (image + title + description +
 *          "Mehr erfahren" content card) + node 1015:4371 ("ALLE BEITRÄGE").
 *
 * Pairs with the CardSliderMobile template change that emits the new
 * `.webinar-card` markup for the auto/live webinare slider. The card uses
 * fully namespaced classes (`webinar-card*`) so NONE of the legacy date-card
 * styling (`.swiper-slide__*`, `.card-mobile-*`: navy description block,
 * absolute white title over the image, a 672px gradient scrim ::before,
 * flex-shrunk title heading) applies — which is what kept breaking the title
 * across breakpoints. This sheet styles the clean card from scratch.
 *
 * Scoped to the two webinare page-ids (rule 4b). `.swiper-slide` is kept on the
 * card only because Swiper requires it; all visual styling is on `webinar-card*`.
 */

/* card shell — white, 24px radius, column flex.
   padding:0 resets the legacy `.swiper-slide` base side-padding so the media
   and body fill the slide width. */
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .swiper-slide.webinar-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(11, 27, 69, .08);
}

/* image — 16:9, fills, square top corners (card clips the radius) */
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: 0 0 auto;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__media picture,
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    margin: 0;
}

/* text area — white, Dark-Blue title + body, "Mehr erfahren" pinned to bottom */
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    flex: 1 1 auto;
    background: #fff;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__title {
    margin: 0;
    font-family: Inter, sans-serif !important;   /* h3 otherwise inherits the theme Kurdis heading font */
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__excerpt {
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
}
/* "Mehr erfahren" row — Figma node 1015:4349 ("Button").
   The label sits at the LEFT of the card's text column and the arrow is pushed
   flush to its RIGHT edge; they are not adjacent. In Figma the Button frame is
   234.26 wide (the full text-column width), the label starts at x=0, and the
   Arrow instance is at x=202.31 with width 31.94 — right edge 234.26, i.e.
   exactly the frame's right edge. That is `justify-content: space-between`.
   (Deck is scaled 1/1.44, so 234.26 -> 337px, 16.67 -> 24px padding, and the
   11.111px type -> the 16px/24px already set below. See CLAUDE.md rule 9.)

   Was `inline-flex` + `gap:10px`, which parked the arrow immediately after the
   label — ~194px short of the right edge on a 376px card. `flex` + `width:100%`
   makes the row span the column so `space-between` has room to work; the gap is
   kept as a minimum separation for the narrowest breakpoint, where a long label
   would otherwise touch the arrow.

   Arrow colour/size need no change: Figma's vector is fill #FB581F at 16x13.24,
   and the FA glyph already renders orange (#fb581f) in a 16px box. */
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__link {
    margin-top: auto;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__link-text {
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinar-card .webinar-card__link-icon {
    color: #fb581f;
    -webkit-text-fill-color: #fb581f;
}

/* "ALLE BEITRÄGE" secondary button below the slider (Figma 1015:4371) —
   2px Dark-Blue outline pill, uppercase Dark-Blue Inter SemiBold 16/24. */
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinare-slider-all-button-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-top: 32px;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinare-slider-all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 2px solid #0b1b45;
    border-radius: 100px;
    background: transparent;
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
body:is(.page-id-85338, .page-id-263093) section.webinare-slider-jtl-section .webinare-slider-all-button:hover {
    background: #0b1b45;
    color: #fff;
    -webkit-text-fill-color: #fff;
}