/* =============================================================================
 * Homepage component: kunst:art + news block (.ka-*)
 * Split from homepage.css (Issue #5). Homepage-only; enqueued after km-global.
 * ========================================================================== */

/* -----------------------------------------
   7. kunst:art + News block
   ----------------------------------------- */
.ka-news-block {
  display: flex;
  gap: 0;
  margin: 40px 0;
  clear: both;
  width: 100%;
}
/* Left column: 40% */
.ka-news-left {
  flex: 0 0 40%;
  /* This site has no global border-box reset, so the column must include its own
     padding + border in the 40% basis — otherwise the 30px padding + 1px border are
     ADDED to 40%, the row sums to >100% and the right column overflows the page. */
  box-sizing: border-box;
  padding-right: 30px;
  border-right: 1px solid var(--kunst-lines);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ka-cover-image {
  width: 100%;
  margin-bottom: 20px;
}
.ka-cover-image a {
  display: block;
  width: 100%;
}
.ka-cover-image img {
  width: 100%;
  height: auto;
  display: block;
}
.ka-info {
  text-align: center;
}
.ka-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--kunst-text-dark);
  margin: 0 0 5px 0;
  letter-spacing: -0.5px;
}
.ka-subtitle {
  font-size: 15px;
  color: #666;
  margin: 0 0 20px 0;
  font-style: italic;
}
.ka-button {
  display: inline-block;
  background: var(--km-accent);
  color: #fff;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s ease;
}
.ka-button:hover {
  background: var(--km-accent-hover);
  color: #fff;
}
/* Right column: 60% */
.ka-news-right {
  flex: 1 1 0; /* take the remaining width after the 40% left column; with border-box
                  below it can never overflow the row on sub-pixel rounding. */
  box-sizing: border-box;
  padding-left: 30px;
  min-width: 0;
}
.ka-news-right .mh-widget-title {
  margin-bottom: 20px;
}
.ka-news-right .mh-widget-title a {
  color: #333;
  text-decoration: none;
}
.ka-news-right .mh-widget-title a:hover {
  color: var(--km-accent);
}
.ka-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ka-news-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--kunst-lines);
}
.ka-news-item:last-child {
  border-bottom: none;
}
.ka-news-item a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #333;
  text-decoration: none;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ka-news-item a:hover {
  color: var(--km-accent);
}


/* Stack on tablet/iPad too (was <=767px): the 40/60 split is cramped below ~1024px.
   Consistent with the news grid + Meistgelesen tablet breakpoints. */
@media screen and (max-width: 1024px) {
  .ka-news-block {
    flex-direction: column;
  }
  .ka-news-left {
    flex: none;
    width: 100%;
    padding-right: 0;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-right: none;
    border-bottom: 1px solid var(--kunst-lines);
  }
  .ka-news-right {
    flex: none;
    width: 100%;
    padding-left: 0;
  }
  .ka-title {
    font-size: 24px;
  }
}