/* =============================================
   Barlow fonts (used by homepage blocks)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Barlow+Semi+Condensed:ital,wght@1,900&display=swap');

/* =============================================
   Homepage section wrapper (white background)
   ============================================= */

.sport1-home-section {
    background-color: #fff !important;
    padding: 36px !important;
}

/* =============================================
   Section title (used by all homepage patterns)
   sport1-section-heading is kept as an alias for
   any existing saved content that references it.
   ============================================= */

/* Hide the heading block when the editor leaves it empty */
.sport1-section-title:empty,
.sport1-section-heading:empty {
    display: none !important;
}

/* Legacy alias — same visual style as sport1-section-title */
.sport1-section-heading {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-style: italic !important;
    font-weight: 900 !important;
    font-size: 40px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 0 12px !important;
}

/* =============================================
   Horizontal Teaser — newspack-blocks variant
   (used in Top Themen pattern)
   ============================================= */

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser article {
    display: flex !important;
    flex-direction: row !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail {
    flex: 0 0 525px !important;
    width: 525px !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
    display: block !important;
}

/*
 * entry-wrapper: CSS Grid layout.
 *
 * The newspack-blocks template renders the entry-wrapper children in this DOM
 * order: cat-links → entry-title → <p> (bare excerpt) → entry-meta.
 * The excerpt has no class, so flex `order` tricks don't work reliably.
 *
 * Grid rows:
 *   1 — title       (auto height)
 *   2 — excerpt     (auto height)
 *   3 — spacer      (1fr — absorbs remaining height, pushing meta to bottom)
 *   4 — meta row    (category left col, date right col)
 */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper {
    flex: 1 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-template-columns: 1fr auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
}

/* Title — row 1, full width */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    font-family: 'Sport1 Variable', 'Sport1', 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.3125 !important;
    color: #000 !important;
    margin: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Excerpt — row 2, full width. Targets the bare <p> newspack outputs. */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper > p {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.333 !important;
    color: #000 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Category — row 4, left column */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links {
    grid-row: 4 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Sport1 Variable', 'Sport1', 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #000 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a,
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links a:focus {
    color: inherit !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* Date — row 4, right column */
.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta {
    grid-row: 4 !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta .entry-date {
    font-family: 'Sport1 Variable', 'Sport1', 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #000 !important;
}

/* =============================================
   Small Teaser — newspack-blocks variant
   (used in Top Themen pattern)
   ============================================= */

/* Vertical card — desktop & tablet.
   Image fills full width (3:2), title top-aligned, cat + date pinned to bottom. */

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #E5E5E5 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 339px !important;
}

@media (max-width: 1024px) {
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
        height: auto !important;
    }
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Flex row-wrap layout: title on row 1 (full width), cat-links + entry-meta on row 2
   side by side. align-content: space-between pushes rows to top and bottom of card.
   align-items: center ensures cat-links and entry-meta sit on the same baseline within
   their shared row 2, regardless of each element's individual height. */
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: space-between !important;
    align-items: center !important;
    padding: 12px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    gap: 0 !important;
}

/* Title: forced to row 1 via order, full width, top-aligned.
   Newspack renders cat-links before title in the DOM, so order is required. */
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.333 !important;
    color: #000 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: left !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title a:hover {
    text-decoration: none !important;
}

/* cat-links and entry-meta share order: 2 so they land on the same flex row.
   cat-links left (flex: 1 grows), entry-meta right (margin-left: auto).
   Explicit height + margin: 0 override Newspack's ".wpnbha .cat-links { margin: 0 0 .5em }"
   which otherwise pushes the row height out and causes overflow: hidden to clip it. */
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    height: 16px !important;
    margin: 0 !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #000 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a,
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .cat-links a:focus {
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Same order as cat-links → same row. margin-left: auto pushes it to the right. */
.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-meta {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-left: 4px !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-meta .entry-date {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #000 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* =============================================
   Hero Teaser — newspack-blocks variant
   (used in content-group-home pattern)
   Overlay design: image fills 1:1 square card, text pinned to bottom.
   ============================================= */

/* Article: positioning context. aspect-ratio drives card height from width. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser article {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #000 !important;
    margin: 0 !important;
    display: block !important;
}

/* Thumbnail figure: absolute fill of the full card. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: auto !important;
    line-height: 0 !important;
}

/* Gradient for non-video posts: .post-thumbnail::after sits after <a> in DOM order,
   so it's painted above the img without any z-index fighting. No play button present
   in this case, so nothing is obscured. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%) !important;
    pointer-events: none !important;
}

/* For video posts, sport1-video-teaser-wrap is present. Disable the ::after gradient
   there — the PHP filter injects a .sport1-hero-gradient div inside the wrap instead,
   positioned between img and play button in DOM order. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail:has(.sport1-video-teaser-wrap)::after {
    display: none !important;
}

/* <a>: fills the figure */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* sport1-video-teaser-wrap: fills the figure absolutely. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail .sport1-video-teaser-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: auto !important;
}

/* Gradient div injected by PHP (video posts only). Sits between img and play btn in DOM,
   so paint order is img → gradient → play btn → duration badge — no z-index needed. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-hero-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%) !important;
    pointer-events: none !important;
}

/* Hero teaser: upgrade --sm play button — Figma Size=L: container 96×96, SVG 29×37.
   bottom is a fixed pixel value = entry-wrapper height (172px) so the play button
   sits flush above the text with no dead gap. DOM order handles layering. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm {
    width: 96px !important;
    height: 96px !important;
    bottom: 172px !important;
    left: 24px !important;
    top: auto !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm .sport1-video-play-icon svg {
    width: 29px !important;
    height: 37px !important;
}

/* Duration badge: Figma Size=L — 20px font, 28px height. Aligns to bottom of play button row. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-duration-badge {
    bottom: 172px !important;
    right: 24px !important;
    top: auto !important;
    font-size: 20px !important;
    height: 28px !important;
}


/* img: position:absolute so its containing block is the nearest positioned ancestor
   (figure, or sport1-video-teaser-wrap when present — both now fill the card).
   max-width:1000% overrides WP core's default max-width:100% on images.
   aspect-ratio:auto overrides the browser UA rule that infers aspect-ratio from
   HTML width/height attributes (e.g. 1290×726 → 16:9), which would otherwise
   prevent the image from filling a 1:1 square card on tablet. */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .post-thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 1000% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Entry wrapper: absolute, pinned to bottom. color:#fff cascades to all children.
   CSS grid places title on row 1 (full width) and cat-links/date side-by-side on row 2,
   matching Figma's TeaserInfo layout (channel left, date right).
   z-index:3 → above gradient (z-1) and play-button overlay (z-2). */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-wrapper {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    color: #fff !important;
    padding: 24px !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 0 !important;
    background: none !important;
    margin: 0 !important;
    min-height: unset !important;
}

/* Headline — Barlow Bold 36px white */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 1.278 !important;
    color: #fff !important;
    margin: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a:visited {
    color: #fff !important;
    text-decoration: none !important;
}

/* Category — grid row 2 left, Barlow Regular 18px white */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.333 !important;
    color: #fff !important;
    margin: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:visited,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a:focus {
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* Date — grid row 2 right, Barlow Regular 18px white */
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta {
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta .entry-date,
.wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta time {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.333 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

/* Mobile (Figma Size=M, 369×369): 1:1 square, tighter padding, smaller type.
   Tablet (Figma Size=L, 690×690): identical to desktop — no overrides needed. */
@media (max-width: 767px) {
    /* Card stays 1:1 square — same as desktop/tablet per Figma */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser article {
        aspect-ratio: 1 / 1 !important;
    }

    /* Padding 12px, gap 12px — Figma: layout_IGWO7T */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-wrapper {
        padding: 12px !important;
        gap: 12px 0 !important;
    }

    /* Headline: scales with card width (card ≈ 100vw on mobile).
       clamp: min 16px, fluid 6.4vw (≈24px at 375px), max 24px.
       line-clamp: 2 keeps it within the Figma 64px hug height (2 × 24px × 1.333). */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title {
        font-size: clamp(16px, 6.4vw, 24px) !important;
        line-height: 1.333 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title a {
        display: block !important;
    }

    /* Category + date: Label L — Barlow Regular 12px, line-height 16px (hug = 16px in Figma) */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links,
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links a,
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta time {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* Play button: Size=M 48×48. bottom = mobile entry-wrapper height (116px) so
       play button sits flush above the text, no dead gap. */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm {
        width: 48px !important;
        height: 48px !important;
        bottom: 116px !important;
        left: 12px !important;
    }
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-play-btn--sm .sport1-video-play-icon svg {
        width: 22px !important;
        height: 28px !important;
    }

    /* Duration badge: 14px, height 22px. Aligns to bottom of play button row. */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .sport1-video-duration-badge {
        bottom: 116px !important;
        right: 12px !important;
        font-size: 14px !important;
        height: 22px !important;
    }
}

/* =============================================
   Sport1 Slider — horizontal-scroll teaser strip
   Figma: Container 1113×421, 36px padding, 12px gap,
   12px border-radius, white bg. 4 visible cards at ~290px.

   ALL selectors are scoped under .sport1-slider-section
   to avoid affecting other homepage patterns.

   DOM structure (newspack homepage-articles output):
   .sport1-slider-section                       ← wp:group wrapper
     └ .wpnbha.is-grid.columns-4.sport1-slider  ← outer newspack block
         └ div                                   ← inner flex wrapper
             ├ article
             └ …
   ============================================= */

/* --- Section wrapper ---
 * contain: inline-size prevents the 8-card flex row from
 * influencing the width of anything outside this element.
 */
.sport1-slider-section {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 36px !important;
    position: relative !important;
    contain: inline-size !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* --- Outer newspack block --- */
.sport1-slider-section .sport1-slider {
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/*
 * Inner flex wrapper — the actual scroll container.
 * Newspack sets "flex-flow: row wrap" here; we override to nowrap + scroll.
 * No explicit width — it's constrained by the overflow:hidden parent.
 */
.sport1-slider-section .sport1-slider > div {
    display: flex !important;
    flex-flow: row nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    min-width: 0 !important;
}

.sport1-slider-section .sport1-slider > div::-webkit-scrollbar {
    display: none !important;
}

/* --- Each teaser card --- */
.sport1-slider-section .sport1-slider article {
    flex: 0 0 calc(25% - 9px) !important;
    min-width: 240px !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    width: auto !important;
    margin: 0 !important;
}

/* --- Image — 3 : 2 ratio --- */
.sport1-slider-section .sport1-slider .post-thumbnail {
    flex: 0 0 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.sport1-slider-section .sport1-slider .post-thumbnail img {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    display: block !important;
    height: auto !important;
}

/* --- Entry wrapper — content below image --- */
.sport1-slider-section .sport1-slider .entry-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-end !important;
    flex: 1 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    gap: 8px 0 !important;
}

/* Title */
.sport1-slider-section .sport1-slider .entry-title {
    order: 1 !important;
    width: 100% !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 26px !important;
    color: #000 !important;
    margin: 0 !important;
}

.sport1-slider-section .sport1-slider .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Category — bottom-left */
.sport1-slider-section .sport1-slider .cat-links {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    height: 16px !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #000 !important;
}

.sport1-slider-section .sport1-slider .cat-links a,
.sport1-slider-section .sport1-slider .cat-links a:hover,
.sport1-slider-section .sport1-slider .cat-links a:focus {
    color: inherit !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* Date — bottom-right */
.sport1-slider-section .sport1-slider .entry-meta {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    height: 16px !important;
    margin-left: auto !important;
}

.sport1-slider-section .sport1-slider .entry-meta .entry-date {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #000 !important;
}

/* --- Forward / back arrow buttons (injected by JS) --- */
.sport1-slider-section .sport1-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: opacity 0.2s !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.sport1-slider-section .sport1-slider-arrow:hover {
    opacity: 0.85 !important;
}

.sport1-slider-section .sport1-slider-arrow--prev {
    left: -4px !important;
}

.sport1-slider-section .sport1-slider-arrow--next {
    right: -4px !important;
}

.sport1-slider-section .sport1-slider-arrow[hidden] {
    display: none !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sport1-slider-section .sport1-slider article {
        flex: 0 0 calc(33.333% - 8px) !important;
    }
}

@media (max-width: 767px) {
    .sport1-slider-section {
        padding: 16px !important;
    }

    .sport1-slider-section .sport1-slider article {
        flex: 0 0 75vw !important;
        min-width: 220px !important;
    }

    .sport1-slider-section .sport1-slider-arrow {
        display: none !important;
    }
}

/* =============================================
   Content Group Home — section spacing & ad responsive visibility.

   Desktop DOM order:
     Row 1 (wp-block-columns): hero | newsticker
     .sport1-ad-mobile-top:   300×600 ad  ← display:none on desktop
     .sport1-teaser--small:   news 1–6    ← 3-col grid
     .sport1-ad-banner-row:   1041×336 desktop banner  /  300×264 mobile ad
     .sport1-teaser--small:   news 7–9    ← 3-col grid

   Tablet/mobile: same DOM, CSS swaps ads and news stack to 1–2 col.
   ============================================= */

/* Reset newspack parent's ".wp-block-column > * { margin: 32px 0 }" inside home sections.
   We control spacing via 12px sibling margins instead. */
.sport1-home-section .wp-block-column > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sport1-home-section .wp-block-column > * + * {
    margin-top: 12px !important;
}

/* 12px gap between every direct section in the group */
.sport1-home-section .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small {
    margin-top: 12px !important;
}

/* When sport1-teaser--small is the first (and only) block inside a column — e.g. the
   sidebar in the Lifestyle pattern — cancel the 12px top margin so it starts flush
   with the hero teaser in the adjacent column. */
.sport1-home-section .wp-block-column > .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small:first-child {
    margin-top: 0 !important;
}

/* In list mode (no postLayout:grid) newspack applies margin-bottom:1.5em between
   articles. Normalise to 12px so the gap between stacked sidebar teasers matches
   the rest of the design system. */
.sport1-home-section .wp-block-column .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
    margin-bottom: 12px !important;
}
.sport1-home-section .wp-block-column .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article:last-of-type {
    margin-bottom: 0 !important;
}

/* Ad-unit as a direct child of the right column fills remaining height so the column
   matches the 690px hero. Applies to content-top-themen (ad + teaser) and
   content-without-newsticker (ad alone). Groups/wrappers (content-group-news) are
   not direct children so they are unaffected and handled by their own rules. */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > .wp-block-sport1-ad-unit {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The inner .sport1-ad slot must also stretch so the ad creative centres vertically */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > .wp-block-sport1-ad-unit .sport1-ad {
    flex: 1 !important;
    height: 100% !important;
}

/* Right column in Row 1 must be a flex container so the newsticker (flex:1) fills it */
.sport1-home-section > .wp-block-columns:first-of-type > .wp-block-column:last-child {
    display: flex !important;
    flex-direction: column !important;
}

/* =============================================
   Column stacking — force sidebar below content on tablet + mobile.
   WordPress core sets flex-wrap:nowrap on .is-not-stacked-on-mobile;
   we need !important + higher specificity to override it inside our sections.
   ============================================= */

@media (max-width: 1024px) {
    .wp-block-columns.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
    }
    .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =============================================
   Tablet layout (768–1024px)
   Hero teaser full-width on top, small teasers 2-col below,
   newsticker + ad stacked below (handled by the column-stacking block).
   Top Themen bottom ad-row: 2 teasers side-by-side + ad full-width.
   ============================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Small teasers: force 2-per-row on tablet.
       Placed here (min-width: 768px) so it wins over newspack-blocks' own
       ≤768px rule that collapses the grid to a single column. */
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
        border: none !important;
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    /* Top Themen — bottom ad-row: 2 single teasers side-by-side + ad full-width below.
       Two selectors: class-based (new pattern inserts) + structural :has() (existing DB content).
       The :has(> .wp-block-column:nth-child(3)) targets 3-column rows only, safely
       excluding the 2-column blocks in content-group-home and content-group-home-tall-ad. */
    .sport1-top-themen-ad-row.wp-block-columns,
    .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) {
        flex-wrap: wrap !important;
    }
    .sport1-top-themen-ad-row.wp-block-columns > .wp-block-column:not(:last-child),
    .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) > .wp-block-column:not(:last-child) {
        flex-basis: calc(50% - 6px) !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        max-width: calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
    }
    .sport1-top-themen-ad-row.wp-block-columns > .wp-block-column:last-child,
    .wp-block-columns.is-not-stacked-on-mobile:has(> .wp-block-column:nth-child(3)) > .wp-block-column:last-child {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }

    /* Top Themen right column: switch to flex-row so ad + teaser sit side by side
       at the same calc(50% - 6px) width as the teaser grid cards.
       align-items: stretch lets the ad placeholder auto-height to match the teaser. */
    .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child > * {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
    }
    /* Single teaser article: fill 100% of its newspack wrapper, not 50%-6px from the global rule */
    .sport1-top-themen-section > .wp-block-columns:first-of-type > .wp-block-column:last-child .sport1-teaser--small article {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================
   Tablet responsive (≤1024px)
   Figma: 768px canvas, 690px content, no sidebar,
   horizontal teasers flip to vertical, grids go 2-col.
   ============================================= */

@media (max-width: 1024px) {
    /* Section padding — transparent bg so body #f1f0f5 shows through between elements */
    .sport1-home-section {
        padding: 24px !important;
        background: transparent !important;
    }

    /* Horizontal teaser → vertical card (image on top, content below) */
    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser article {
        flex-direction: column !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .post-thumbnail img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2 !important;
    }

    /* Drop the excerpt row — grid becomes title | spacer | meta */
    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper {
        grid-template-rows: auto 1fr auto !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-wrapper > p {
        display: none !important;
    }

    /* Small teasers placeholder — 2-col rule moved to the 768–1024px block
       so it fires only on tablet and cannot be overridden by newspack's own
       ≤768px collapse-to-1-col rule. */
}

/* =============================================
   Mobile responsive (≤767px)
   Figma: 393px canvas, 369px content,
   16px section padding, smaller fonts,
   2-col small teasers at 3:2 images.
   ============================================= */

@media (max-width: 767px) {
    /* Remove newspack-theme's 90vw constraint so the full viewport is available.
       Newspack sets #primary { max-width: 90vw; width: 1200px } — both must be
       overridden. With this + 12px section padding: 393px - 24px = 369px (Figma target). */
    #primary {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Section padding — 12px matches Figma: 393px canvas → 369px content width */
    .sport1-home-section {
        padding: 12px !important;
    }

    /* Section heading — reduce from 40px */
    .sport1-section-heading {
        font-size: 28px !important;
        margin-bottom: 8px !important;
    }

    /* Hero teaser — smaller title and meta on mobile */
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .cat-links,
    .wp-block-newspack-blocks-homepage-articles.sport1-hero-teaser .entry-meta .entry-date {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Small teasers → horizontal cards on mobile.
     * Figma node 142-26643: white bg (#FFF), border-radius 12px, HasBorder=false.
     * Card: 369px fill × 120px hug. Image 180×120 left, content 189×120 right.
     * overflow:hidden on the article clips the image's left corners to 12px radius. */
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small article {
        flex-direction: row !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 120px !important;
        min-height: unset !important;
        background: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Image flush against card edge — card's overflow:hidden rounds the left corners */
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail {
        flex: 0 0 180px !important;
        width: 180px !important;
        height: 120px !important;
        padding: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    /* For height: 100% to resolve on the img (and on sport1-video-teaser-wrap img),
       every ancestor between .post-thumbnail and img must have an explicit height.
       The figure has height: 120px above; set <a> and the video wrap to 100% so the
       img's height: 100% resolves to 120px for both regular and video thumbnails. */
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail > a,
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail .sport1-video-teaser-wrap {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .post-thumbnail img {
        width: 180px !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    /* Figma content frame: padding 12px, gap 8px */
    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-wrapper {
        align-self: stretch !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-teaser--small .entry-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    /* Horizontal teaser — smaller title on mobile */
    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .cat-links,
    .wp-block-newspack-blocks-homepage-articles.sport1-horizontal-teaser .entry-meta .entry-date {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* =============================================
   Section Header — Title + Chips + Sponsor
   Used in content-without-newsticker pattern.
   ============================================= */

/* Outer row: title+chips left, sponsor right */
.sport1-section-header.wp-block-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* Left column: title stacked above chips */
.sport1-section-header__left.wp-block-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Title: Barlow Semi Condensed Black Italic 40px uppercase + trailing arrow */
.sport1-section-title.wp-block-heading {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 40px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Chevron only appears when the title has a link — :has(a) detects this */
.sport1-section-title.wp-block-heading:has(a)::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Chips row */
.sport1-section-chips.wp-block-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

.sport1-section-chips .wp-block-button {
    margin: 0 !important;
}

.sport1-section-chips .wp-block-button .wp-block-button__link {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.375 !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 999px !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.sport1-section-chips .wp-block-button .wp-block-button__link:hover {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
}

/* Sponsor section: "sponsored by" label + logo — desktop/tablet: row, gap 12px.
   align-items: flex-start keeps the small label text pinned to the top of the
   tall logo container (matching Figma where the label "floats up"). */
.sport1-section-sponsor.wp-block-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.sport1-sponsor-label {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1.333 !important;
    color: #777 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Desktop / Tablet: padding 24px, logo ~158×46px */
.sport1-sponsor-logo-wrap.wp-block-group {
    padding: 24px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sport1-sponsor-logo-wrap .wp-block-image {
    margin: 0 !important;
    line-height: 0 !important;
}

.sport1-sponsor-logo-wrap .wp-block-image img {
    display: block !important;
    height: 46px !important;
    width: auto !important;
}

/* Mobile (≤767px):
   Header stays as a single row — left half (title + chips) and right half (sponsor)
   sit side by side, each taking calc(50% - 6px) of the 369px mobile canvas.
   Sponsor column switches to vertical, right-aligned, gap 6px.
   Logo wrapper shrinks to 16px padding, logo image to 32px height.
   Title shrinks from 40px → 32px (Size=S variant in Figma). */
@media (max-width: 767px) {
    .sport1-section-header.wp-block-group {
        flex-wrap: nowrap !important;
    }
    .sport1-section-header__left.wp-block-group {
        flex: 0 0 calc(50% - 6px) !important;
        min-width: 0 !important;
    }
    .sport1-section-title.wp-block-heading {
        font-size: 32px !important;
        line-height: 1.125 !important;
    }
    .sport1-section-sponsor.wp-block-group {
        flex: 0 0 calc(50% - 6px) !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }
    .sport1-sponsor-logo-wrap.wp-block-group {
        padding-top: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 16px !important;
    }
    .sport1-sponsor-logo-wrap .wp-block-image img {
        height: 32px !important;
    }
}

/* =============================================
   Content Group — No Newsticker pattern
   (sport1/content-without-newsticker)
   Ad is always 300px wide. Height matches the hero teaser on desktop
   (flex stretch, naturally ~600px), and is fixed via aspect-ratio: 1/2
   (standard 300×600 format) on tablet/mobile when columns stack.
   ============================================= */

/* Desktop: right column is a flex column so wp-block-html fills the full height.
   align-items: stretch (flex default) makes both columns the same height as the hero. */
.sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child {
    display: flex !important;
    flex-direction: column !important;
}
.sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child > * {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Tablet / Mobile (≤1024px): global stacking rule forces columns to 100% width.
   Override the right column back to 300px so the ad stays its fixed width.
   The hero stacks above on its own row (flex-basis: 100% from the global rule).
   Ad gets aspect-ratio: 1/2 (300×600 standard) since height: 100% has no
   parent reference once columns are stacked. */
@media (max-width: 1024px) {
    .sport1-without-newsticker-section > .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =============================================
   Content Group - News pattern
   (sport1/content-group-news)
   Right column: newsticker (5 items, always) + ad fills remaining height.
   ============================================= */

/* Desktop: ad wrapper grows to fill the right column below the 5-item newsticker.
   The right column is already display:flex;flex-direction:column from the shared
   .sport1-home-section rule, so flex:1 on the wrapper fills remaining height. */
.sport1-news-group-section .sport1-news-group-ad {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 12px !important;
    min-height: 0 !important;
}

/* ── Newsticker-Entry-Live pattern (subcategory feed) ──────────────────── */

.sport1-newsticker-live-section .sport1-newsticker-live__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
}

.sport1-newsticker-live-section .sport1-newsticker-live__more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    align-self: center !important;
    margin-top: 12px !important;
    padding: 8px 10px !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease-in-out !important;
}

.sport1-newsticker-live-section .sport1-newsticker-live__more:hover,
.sport1-newsticker-live-section .sport1-newsticker-live__more:focus-visible {
    opacity: 0.85 !important;
}

.sport1-newsticker-live-section .sport1-newsticker-live__more.is-loading,
.sport1-newsticker-live-section .sport1-newsticker-live__more[disabled] {
    opacity: 0.6 !important;
    cursor: progress !important;
}

.sport1-newsticker-live-section .sport1-newsticker-live__more-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
}