/* =============================================================================
 * Homepage component: Most-read / popular section (.kunst-popular-*)
 * Split from homepage.css (Issue #5). Homepage-only; enqueued after km-global.
 * ========================================================================== */

/* -----------------------------------------
   5. Popular / Most-read section
   ----------------------------------------- */
.kunst-popular-section {
  margin: 40px 0;
}
/* NOTE: the former `.kunst-popular-section .kunst-section-title` rule was removed
   in Phase C. The live Meistgelesen heading emits `.kunst-popular-title` (see
   render_homepage_popular_section), which is styled by its own rule below — the
   `.kunst-section-title` class is only emitted by the dead theme shortcodes that
   the plugin overrides at runtime via Kunstmag_Legacy_Home_Shortcodes
   ::register_shortcodes() on `init` priority 100 (remove_shortcode +
   add_shortcode), so no live element matched the deleted rule. */
.kunst-popular-header {
  margin-bottom: 25px;
}
.kunst-popular-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--km-accent);
  margin: 0;
}
.kunst-popular-content {
  background: var(--km-bg-light);
  border-top: 2px solid var(--km-accent); /* thin red accent, unified with the other red section lines (was 3px) */
  padding: 25px 30px;
}
.kunst-popular-grid {
  display: flex;
  gap: 30px;
}
.kunst-popular-item {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.kunst-popular-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 1px;
  height: 100%;
  background-color: var(--kunst-lines);
  z-index: 0;
}
.kunst-popular-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--km-accent);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.kunst-popular-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--kunst-text-dark);
  position: relative;
  z-index: 1;
}
.kunst-popular-item-author {
  font-size: 12px;
  color: #999;
  position: relative;
  z-index: 1;
}


/* Stack the 5 ranked items from <=1024px so iPad landscape (1024) no longer
   squeezes them into narrow columns (was <=1000px). */
@media screen and (max-width: 1024px) {
  .kunst-popular-content {
    padding: 20px;
  }
  .kunst-popular-grid {
    flex-direction: column;
    gap: 0;
  }
  .kunst-popular-item::after {
    display: none;
  }
  .kunst-popular-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--kunst-lines);
  }
  .kunst-popular-item:first-child {
    padding-top: 0;
  }
  .kunst-popular-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}


@media screen and (max-width: 400px) {
  .kunst-popular-content {
    padding: 15px;
  }
}