/* 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 - CORRECTED VERSION
   One layout engine only with proper handling:
   - 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
   FIXED: Removed gap: 0 and use proper flexbox gap for both scenarios */
.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: var(--cmuk-related-item-gap, 18px) !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 !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;
    }
}