/* ==========================================================================
   Section 8: Latest Significant Matters (2-column with tall image right)
   Layout: latest_matters
   Figma node: 493:2044
   Reference: pages/homepage-v4/figma/screenshots/08-latest-significant-matters.png
   Structure: [left content column with slider] | [right full-height image]
   ========================================================================== */

.latest-matters {
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.latest-matters-row {
    display: flex;
    align-items: center;
    gap: clamp(40px, 9vw, 145px);
    padding-left: clamp(24px, 10vw, 178px);
    min-height: 720px;
}
@media (min-width: 1921px) {
    .latest-matters-row{
        max-width: 1920px; margin: auto;
    }
}
/* Content column (left) */
.latest-matters-content-col {
    flex: 1 1 auto;
    max-width: 951px;
    max-width: calc(63% - clamp(40px, 9vw, 164px));
    /* padding-top: clamp(80px, 14vw, 239px);
    padding-bottom: 60px; */
    padding: 55px 0;
    display: flex;
    flex-direction: column;
    gap: 71px;
    box-sizing: border-box;
}

.latest-matters-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 8px;
    padding-bottom: 37px;
    border-bottom: 1px solid var(--color-text-dark);
}

.latest-matters-heading {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.latest-matters-slider-nav {
    display: flex;
    align-items: center;
    gap: 13px;
}

.latest-matters-arrow-btn,
.latest-matters-arrow-btn.slick-arrow,
.latest-matters-arrow-btn.slick-disabled {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-text-dark);
    border-radius: 9999px;
    color: var(--color-text-dark);
    cursor: pointer;
    position: static;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.latest-matters-arrow-btn.slick-disabled { opacity: 0.35; cursor: default; }
.latest-matters-arrow-btn:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}
.latest-matters-arrow-btn svg {
    display: block;
    width: 11px;
    height: 21px;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: color 0.3s ease;
}
.latest-matters-arrow-btn:hover svg path{
color: var(--color-white);
  stroke: var(--color-white);
}
.latest-matters-prev svg { transform: scaleX(-1); }

/* Card slider */
.latest-matters-slider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 8vw, 124px);
    padding-left: 17px;
}
.latest-matters-slider.slick-initialized { display: block; padding-left: 0; }
/*
.latest-matters-slider .slick-track { display: flex; align-items: stretch; }
*/
/* .latest-matters-slider.slick-initialized .latest-matters-card { margin: 0 18px; height: auto; } */
.latest-matters-slider .latest-matters-card:nth-child(2){
    margin-left: auto;
}
.latest-matters-card {
    display: flex !important;
    flex-direction: column;
    gap: 42px;
    /*max-width: 410px;*/
    padding: 0 15px;
    box-sizing: border-box;
}

.latest-matters-card-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0;
}

.latest-matters-card-meta {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.latest-matters-card-date {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27.2px;
    color: var(--color-brand-blue);
}

.latest-matters-card-body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27.2px;
    color: var(--color-text-dark);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-matters-card-read-more {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27.2px;
    color: var(--color-brand-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    display: inline-block;
    /* margin-top: auto; */
    transition: opacity 0.3s ease;
}
.latest-matters-card-read-more:hover { opacity: 0.8; color: var(--color-brand-blue); }

/* Image column (right, full height flush right) */
.latest-matters-image-col {
    flex: 0 0 644px;
    max-width: 644px;
    max-width: 38%;
    align-self: stretch;
    overflow: hidden;
    margin-left: auto;
}
.latest-matters-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Responsive */
@media (max-width: 1599px) {
    .latest-matters-row{    
        padding-left: 24px;
        gap: 60px;
    }
    .latest-matters-content-col{
        max-width: calc(62% - 60px);
    }
}
@media (max-width: 1200px) {
    .latest-matters-row { 
        padding: 0 24px; gap: 0; min-height: inherit; 
        flex-wrap: wrap; justify-content: center;
    }
    .latest-matters-content-col { gap: 30px; max-width: 100%; min-height: inherit; }
    .latest-matters-slider { gap: 40px; padding-left: 0; }
    .latest-matters-card{
        max-width: inherit; gap: 30px;
    }
    .latest-matters-image-col{
        max-width: 600px; margin: auto;
    }
    
}

@media (max-width: 991px) {
    /* .latest-matters-row { flex-direction: column; padding-left: 24px; padding-right: 24px; min-height: 0; gap: 0; } */
    .latest-matters-content-col { padding-top: 56px; padding-bottom: 40px; gap: 32px; max-width: 100%; }
    /* .latest-matters-image-col { flex-basis: auto; max-width: 100%; width: 100%; height: 400px; margin-top: 24px; margin-right: -24px; margin-left: -24px; } */
    .latest-matters-slider:not(.slick-initialized) { grid-template-columns: 1fr; }

    .latest-matters-arrow-btn, .latest-matters-arrow-btn.slick-arrow, .latest-matters-arrow-btn.slick-disabled{
        width: 50px;
    height: 50px;
    }

}

@media (max-width: 767px) {
    .latest-matters-row { padding-left: 20px; padding-right: 20px; }
    .latest-matters-header-row { padding-bottom: 20px; gap: 16px; }
    .latest-matters-arrow-btn { width: 44px; height: 44px; }
    /* .latest-matters-image-col { margin-right: -20px; margin-left: -20px; height: 300px; } */
    /* .latest-matters-photo { height: 300px; } */
    .latest-matters-image-col{
        display: none;
    }
    .latest-matters-card{
        padding: 0;
    }
}