/* CMUK Classic Widget Components - shared classic widget styling */
.cmuk-component {
    font-size: 16px;
    line-height: 1.5;
}

.cmuk-component-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cmuk-component-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    padding-bottom: 14px;
}

.cmuk-component-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cmuk-component-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
}

.cmuk-component-item-title {
    font-size: 16px;
    line-height: 1.25;
    margin: 0 0 6px;
}

.cmuk-component-item-title a,
.cmuk-component-section-list a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.cmuk-component-item-title a:hover,
.cmuk-component-section-list a:hover {
    text-decoration: underline;
}

.cmuk-component-date {
    font-size: 14px;
    opacity: .75;
    margin-bottom: 6px;
}

.cmuk-component-excerpt {
    font-size: 14px;
    line-height: 1.45;
}

.cmuk-component-section-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmuk-component-section-item {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.cmuk-component-section-item a {
    display: block;
    padding: 12px 0;
}

.cmuk-component-section-item.is-current a {
    font-weight: 800;
}

/* W: ITV-style related news list, with image left and title/date locked together on the right. */
.cmuk-related-widget-transparent,
.cmuk-related-widget-transparent.widget,
.cmuk-related-widget-transparent.cmuk-article-widget,
.cmuk-single-news-sidebar .cmuk-related-widget-transparent,
body.cmuk-itv-article-single .cmuk-single-news-sidebar .cmuk-related-widget-transparent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.cmuk-component-related-posts--itv {
    --cmuk-related-bg: transparent;
    --cmuk-related-title: #111827;
    --cmuk-related-meta: #6b6f76;
    --cmuk-related-divider: transparent;
    --cmuk-related-hover: #0b7f8a;
    --cmuk-related-thumb-w: 140px;
    --cmuk-related-thumb-h: 82px;
    --cmuk-related-row-gap: 26px;
    --cmuk-related-item-gap: 18px;
    --cmuk-related-radius: 0px;
    background: var(--cmuk-related-bg) !important;
    box-shadow: none !important;
}

.cmuk-component-related-posts--itv:not(.cmuk-component--transparent) {
    padding: 22px !important;
}

.cmuk-related-widget-itv .widget-title,
.cmuk-related-widget-itv h2,
.cmuk-related-widget-itv h3 {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(24px, 4vw, 34px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cmuk-related-row-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item {
    display: grid !important;
    grid-template-columns: var(--cmuk-related-thumb-w) minmax(0, 1fr) !important;
    gap: var(--cmuk-related-item-gap) !important;
    align-items: start !important;
    padding: 0 0 var(--cmuk-related-row-gap) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmuk-related-divider) !important;
    background: transparent !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image {
    grid-column: 1 !important;
    display: block !important;
    width: var(--cmuk-related-thumb-w) !important;
    height: var(--cmuk-related-thumb-h) !important;
    min-width: var(--cmuk-related-thumb-w) !important;
    min-height: var(--cmuk-related-thumb-h) !important;
    max-width: var(--cmuk-related-thumb-w) !important;
    max-height: var(--cmuk-related-thumb-h) !important;
    background: #d5dde1 !important;
    overflow: hidden !important;
    border-radius: var(--cmuk-related-radius) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image img,
.cmuk-component-related-posts--itv .cmuk-component-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--cmuk-related-radius) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image-placeholder {
    background: linear-gradient(135deg, #d5dde1, #eef2f4) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-body {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: block !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: clamp(18px, 3.4vw, 25px) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    color: var(--cmuk-related-title) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title a {
    color: var(--cmuk-related-title) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title a:hover,
.cmuk-component-related-posts--itv .cmuk-component-item-title a:focus {
    color: var(--cmuk-related-hover) !important;
    text-decoration: none !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    color: var(--cmuk-related-meta) !important;
    opacity: 1 !important;
    font-size: clamp(15px, 2.6vw, 18px) !important;
    line-height: 1.35 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date:before {
    content: "◷" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: var(--cmuk-related-meta) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-excerpt {
    margin: 8px 0 0 !important;
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

@media (max-width: 520px) {
    .cmuk-component-related-posts--itv {
        --cmuk-related-thumb-w: min(42vw, 140px);
        --cmuk-related-thumb-h: 78px;
    }

    .cmuk-component-related-posts--itv .cmuk-component-item {
        grid-template-columns: var(--cmuk-related-thumb-w) minmax(0, 1fr) !important;
    }
}


/* Z: force ITV related post rows to render as a true media object.
   This fixes post-view/sidebar outputs where the title/date drift away from the featured image. */
.cmuk-component-related-posts--itv .cmuk-component-item,
.widget .cmuk-component-related-posts--itv .cmuk-component-item,
.site-sidebar .cmuk-component-related-posts--itv .cmuk-component-item,
.sidebar .cmuk-component-related-posts--itv .cmuk-component-item,
.footer-widgets .cmuk-component-related-posts--itv .cmuk-component-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: var(--cmuk-related-item-gap, 18px) !important;
    width: 100% !important;
    padding: 0 0 var(--cmuk-related-row-gap, 26px) !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmuk-related-divider, transparent) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image,
.widget .cmuk-component-related-posts--itv .cmuk-component-image,
.site-sidebar .cmuk-component-related-posts--itv .cmuk-component-image,
.sidebar .cmuk-component-related-posts--itv .cmuk-component-image,
.footer-widgets .cmuk-component-related-posts--itv .cmuk-component-image {
    flex: 0 0 var(--cmuk-related-thumb-w, 140px) !important;
    width: var(--cmuk-related-thumb-w, 140px) !important;
    height: var(--cmuk-related-thumb-h, 82px) !important;
    min-width: var(--cmuk-related-thumb-w, 140px) !important;
    max-width: var(--cmuk-related-thumb-w, 140px) !important;
    margin: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-body,
.widget .cmuk-component-related-posts--itv .cmuk-component-body,
.site-sidebar .cmuk-component-related-posts--itv .cmuk-component-body,
.sidebar .cmuk-component-related-posts--itv .cmuk-component-body,
.footer-widgets .cmuk-component-related-posts--itv .cmuk-component-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title,
.widget .cmuk-component-related-posts--itv .cmuk-component-item-title,
.site-sidebar .cmuk-component-related-posts--itv .cmuk-component-item-title,
.sidebar .cmuk-component-related-posts--itv .cmuk-component-item-title,
.footer-widgets .cmuk-component-related-posts--itv .cmuk-component-item-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    text-align: left !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date,
.widget .cmuk-component-related-posts--itv .cmuk-component-date,
.site-sidebar .cmuk-component-related-posts--itv .cmuk-component-date,
.sidebar .cmuk-component-related-posts--itv .cmuk-component-date,
.footer-widgets .cmuk-component-related-posts--itv .cmuk-component-date {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

@media (max-width: 520px) {
    .cmuk-component-related-posts--itv .cmuk-component-item {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
    }

    .cmuk-component-related-posts--itv .cmuk-component-image {
        flex-basis: min(40vw, 140px) !important;
        width: min(40vw, 140px) !important;
        min-width: min(40vw, 140px) !important;
        max-width: min(40vw, 140px) !important;
        height: 82px !important;
    }
}


/* AA: final ITV related output fix.
   One layout engine only:
   - no image mode: title and date/time stack full-width exactly like a normal list
   - image mode: the exact same title/date stack sits directly next to the thumbnail
   This deliberately overrides older grid/card rules from previous builds. */
.cmuk-component-related-posts--itv .cmuk-component-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cmuk-related-row-gap, 22px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 0 var(--cmuk-related-row-gap, 22px) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmuk-related-divider, transparent) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
    display: block !important;
    flex: 0 0 var(--cmuk-related-thumb-w, 132px) !important;
    width: var(--cmuk-related-thumb-w, 132px) !important;
    min-width: var(--cmuk-related-thumb-w, 132px) !important;
    max-width: var(--cmuk-related-thumb-w, 132px) !important;
    height: var(--cmuk-related-thumb-h, 82px) !important;
    min-height: var(--cmuk-related-thumb-h, 82px) !important;
    max-height: var(--cmuk-related-thumb-h, 82px) !important;
    margin: 0 var(--cmuk-related-item-gap, 18px) 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #d5dde1 !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-image {
    display: none !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image img,
.cmuk-component-related-posts--itv .cmuk-component-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-body {
    width: 100% !important;
    flex-basis: 100% !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: clamp(18px, 3.4vw, 24px) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    color: var(--cmuk-related-title, #111827) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title a {
    display: inline !important;
    color: var(--cmuk-related-title, #111827) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    position: relative !important;
    text-align: left !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: clamp(15px, 2.6vw, 18px) !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date:before {
    content: "◷" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

@media (max-width: 520px) {
    .cmuk-component-related-posts--itv {
        --cmuk-related-thumb-w: min(40vw, 132px);
        --cmuk-related-thumb-h: 78px;
    }

    .cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
        flex-basis: var(--cmuk-related-thumb-w, min(40vw, 132px)) !important;
        width: var(--cmuk-related-thumb-w, min(40vw, 132px)) !important;
        min-width: var(--cmuk-related-thumb-w, min(40vw, 132px)) !important;
        max-width: var(--cmuk-related-thumb-w, min(40vw, 132px)) !important;
        margin-right: 14px !important;
    }
}


/* CC v1.0.8: ITV related component 25/75 layout fix.
   This uses the same idea as the theme content/sidebar split:
   - image ON  = 25% thumbnail / 75% title + date stack
   - image OFF = title + date stack full width
   It is deliberately last in the file so older flex/grid rules cannot win. */
.cmuk-component-related-posts--itv .cmuk-component-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cmuk-related-row-gap, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 var(--cmuk-related-row-gap, 24px) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmuk-related-divider, transparent) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image {
    display: grid !important;
    grid-template-columns: minmax(88px, 25%) minmax(0, 75%) !important;
    column-gap: var(--cmuk-related-item-gap, 16px) !important;
    row-gap: 0 !important;
    align-items: start !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image {
    display: block !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: var(--cmuk-related-thumb-h, 82px) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--cmuk-related-thumb-h, 82px) !important;
    max-height: var(--cmuk-related-thumb-h, 82px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #d5dde1 !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-image {
    display: none !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image img,
.cmuk-component-related-posts--itv .cmuk-component-image-placeholder {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-body,
.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: left !important;
    color: var(--cmuk-related-title, #111827) !important;
    font-size: clamp(18px, 3.4vw, 24px) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title a {
    display: inline !important;
    color: var(--cmuk-related-title, #111827) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    position: relative !important;
    text-align: left !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: clamp(15px, 2.6vw, 18px) !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date:before {
    content: "◷" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

@media (max-width: 520px) {
    .cmuk-component-related-posts--itv .cmuk-component-item--has-image {
        grid-template-columns: minmax(92px, 25%) minmax(0, 75%) !important;
        column-gap: 14px !important;
    }

    .cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
        height: 78px !important;
    }
}


/* DD v1.0.9: final true 25/75 ITV media-row layout.
   This block is intentionally last so older widget/theme rules cannot override it.
   Image ON  = image container 25% / text container 75% minus the gap.
   Image OFF = same title + meta stack full width.
   Title and meta/date have exactly 10px spacing. */
.cmuk-component-related-posts--itv {
    --cmuk-related-real-gap: var(--cmuk-related-item-gap, 16px);
}

.cmuk-component-related-posts--itv .cmuk-component-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cmuk-related-row-gap, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 var(--cmuk-related-row-gap, 24px) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmuk-related-divider, transparent) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image {
    display: grid !important;
    grid-template-columns: 25% calc(75% - var(--cmuk-related-real-gap)) !important;
    column-gap: var(--cmuk-related-real-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image {
    display: block !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: var(--cmuk-related-thumb-h, 82px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--cmuk-related-thumb-h, 82px) !important;
    max-height: var(--cmuk-related-thumb-h, 82px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #d5dde1 !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-image {
    display: none !important;
}

.cmuk-component-related-posts--itv .cmuk-component-image img,
.cmuk-component-related-posts--itv .cmuk-component-image-placeholder {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: var(--cmuk-related-radius, 0px) !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-body,
.cmuk-component-related-posts--itv .cmuk-component-item--no-image .cmuk-component-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: left !important;
    color: var(--cmuk-related-title, #111827) !important;
    font-size: clamp(18px, 3.4vw, 24px) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.cmuk-component-related-posts--itv .cmuk-component-item-title a {
    display: inline !important;
    color: var(--cmuk-related-title, #111827) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    position: relative !important;
    text-align: left !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: clamp(15px, 2.6vw, 18px) !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
}

.cmuk-component-related-posts--itv .cmuk-component-date:before {
    content: "◷" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: var(--cmuk-related-meta, #6b6f76) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

@media (max-width: 520px) {
    .cmuk-component-related-posts--itv {
        --cmuk-related-real-gap: 14px;
    }

    .cmuk-component-related-posts--itv .cmuk-component-item--has-image {
        grid-template-columns: 25% calc(75% - var(--cmuk-related-real-gap)) !important;
        column-gap: var(--cmuk-related-real-gap) !important;
    }

    .cmuk-component-related-posts--itv .cmuk-component-item--has-image .cmuk-component-image {
        height: 78px !important;
    }
}


/* EE v1.1.0: frontend/editor parity hard lock for ITV Related Posts.
   This is intentionally last and highly scoped so the live site matches the widget preview. */
.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item--has-image,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item--has-image,
.wp-block-legacy-widget__edit-form .cmuk-component-related-posts--itv .cmuk-component-item--has-image,
body .cmuk-component-related-posts--itv .cmuk-component-item--has-image {
    display: grid !important;
    grid-template-columns: 25% calc(75% - 14px) !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-image,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-image,
body .cmuk-component-related-posts--itv .cmuk-component-item--has-image > .cmuk-component-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: block !important;
    float: none !important;
    align-self: start !important;
    justify-self: stretch !important;
}

.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-body,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-body,
body .cmuk-component-related-posts--itv .cmuk-component-item--has-image > .cmuk-component-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    float: none !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item-title,
.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item-title a,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item-title,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item-title a,
body .cmuk-component-related-posts--itv .cmuk-component-item-title,
body .cmuk-component-related-posts--itv .cmuk-component-item-title a {
    text-align: left !important;
    float: none !important;
    clear: none !important;
}

.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-date,
.widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-date,
body .cmuk-component-related-posts--itv .cmuk-component-date {
    align-self: flex-start !important;
    text-align: left !important;
    float: none !important;
    clear: none !important;
}

@media (max-width: 520px) {
    .cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item--has-image,
    .widget.cmuk_component_related_cpt_posts .cmuk-component-related-posts--itv .cmuk-component-item--has-image,
    body .cmuk-component-related-posts--itv .cmuk-component-item--has-image {
        grid-template-columns: 25% calc(75% - 14px) !important;
        column-gap: 14px !important;
    }
}