/* ===============
 * 
 * NEWS LISTING
 * 
 * ===============
 */
 .news-listing{display: flex;flex-wrap: wrap;justify-content: space-between;}
 .news-listing .news-item{margin-bottom: 25px;width: 100%;display: flex;}
 .news-listing .news-item .news-item-image{width: 250px;margin-right: 15px;background-position: top center;background-size: cover;background-repeat: no-repeat;height: 140px;aspect-ratio: 1 / 1;height: auto;}
 .news-listing .news-item .news-item-card{ flex: 1; }
 .news-listing .news-item .title{font-size: 20px;font-weight: 600;margin-bottom: 2px;}
 .news-listing .news-item .date{margin-bottom: 10px;}
 .news-listing .news-item .excerpt{ margin-bottom: 10px; }
 .news-listing .news-item .link{  }
 
 #news-article h1{ color: var(--secondary-color); }
 #news-article .news-article-image{width: 100%;padding-top: 40%;margin-bottom: 20px;background-position: center left;background-size: contain;background-repeat: no-repeat;}
 #news-article a{ text-decoration: underline;font-weight: bold;color: #018786; }
 #news-article ul,
 #news-article ol{ margin-left: 1rem; }
 
 #tags{margin-bottom: 35px;margin-top: 15px;}
 #tags h4{font-size: 18px;font-weight: bold;color: var(--secondary-color);text-transform: uppercase;}
 #tags .tags-cloud{list-style-type: none;display: flex;flex-wrap: wrap;margin-bottom: 10px;}
 #tags .tags-cloud li{display: block;margin-bottom: 5px;margin-left: 0;margin-right: 0;}
 #tags .tags-cloud li:before{ display: none; }
 #tags .tags-cloud li a{padding: 10px 20px;background: #efefef;border-radius: 15px;text-decoration: none;align-items: center;display: none;margin-right: 5px;}
 #tags .tags-cloud li a span.material-icons-outlined{margin-left: 7px;}
 #tags .tags-cloud li a:hover,
 #tags .tags-cloud li a.active{background: var(--secondary-color);color: white;}
 #tags .tags-cloud li a.active,
 #tags .tags-cloud li a.showtags,
 #tags .tags-cloud li a.visible{display: flex;}


/*****************
*
*   Home Whatsnew slider
*
******************/

#whatsnewslider {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

#whatsnewslider .container > h2 {
    text-align: center;
}

.news-hero {
    /* max-width: 1080px; */
    margin: 0 auto;
    padding: 10px 0;
}

.news-slider {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* This wrapper defines the overall aspect ratio for each slide */
.news-slides {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 1; /* Two squares side by side */
}

.news-slide {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 50 / 50 */
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transform: scale(.98);
    transition: opacity .35s ease, transform .35s ease;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; /* Fill the aspect ratio container */
}

.news-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.slide-left {
    background: var(--news-bg);
    color: #1f2a2e;
    padding: 2rem 5rem 2rem 6rem;
    position: relative;

    /* Make content adapt inside the square */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Right side is also a square because the grid column
   is 50 percent of a 2:1 container, so height = column width */
.slide-right {
    position: relative;
    overflow: hidden;
}

.slide-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge {
    display: inline-block;
    background: var(--pill);
    color: #222;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    max-width: 150px;
}

/* Make title fluid so it scales with width and height */
.slide-title {
    margin: 18px 0 12px 0;
    font-size: clamp(1.4rem, 1.2vw + 1rem, 2.2rem);
    line-height: 1.1;
    color: #2b2b2b;
}

/* Control text size and overflow so it does not overflow the square */
.slide-excerpt {
    margin: 0 0 12px 0;
    color: #173036;
    font-size: clamp(.9rem, .4vw + .8rem, 1.05rem);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* adjust if needed */
    -webkit-box-orient: vertical;
}

.slide-link {
    color: #0c2233;
    text-decoration: underline;
    font-weight: 700;
    font-size: clamp(.95rem, .5vw + .8rem, 1.05rem);
}

.slide-dots {
    position: absolute;
    left: 6rem;
    bottom: 2rem;
    display: flex;
    gap: 10px;
}

.slide-dots button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0;
    background: var(--dot);
    cursor: pointer;
    transition: transform .15s ease, background .2s;
}

.slide-dots button[aria-selected="true"] {
    background: var(--dot-active);
    transform: scale(1.1);
}

.news-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-nav.prev {
    left: 12px;
}

.news-nav.next {
    right: 12px;
}

.news-nav:hover {
    background: #f6f6f6;
}

.news-cta {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e19033;
    color: #111;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    text-decoration: none;
}

.btn-view-all .arrow {
    font-size: 1.2rem;
}

/* Responsive */
/* Mobile only, keep desktop untouched */
@media (max-width: 860px) {

    /* Let the wrapper size to the active slide */
    .news-slides {
      aspect-ratio: auto;
      height: auto;
    }
  
    /* Hide all slides by default on mobile */
    .news-slide {
      display: none;
      position: relative;
      grid-template-columns: 1fr;
      width: 100%;
      height: auto;
      inset: auto;
      transform: none;
      pointer-events: none;
    }
  
    /* Only the active slide is part of layout */
    .news-slide.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
  
    .slide-right {
      order: -1;
      width: 100%;
      aspect-ratio: 1 / 1; /* keep, or remove if you want a natural image ratio */
    }
  
    .slide-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
    .slide-left {
      padding: 24px 22px 56px 22px;
    }
  
    .slide-dots {
      left: auto;
      bottom: -30px;
      right: auto;
      margin: 0 auto;
      position: relative;
    }

    .news-nav{ top: auto;bottom: -10px; }
}