/* ==========================================================
   KXP LATEST POSTS — LEAD + NEWS DESK
   Complete replacement stylesheet
   ========================================================== */

/* ==========================================
   VARIABLES AND BASE
   ========================================== */

.kxp-latest {
  --latest-accent: #46d600;
  --latest-surface: #f5f6f7;
  --latest-border: rgba(0, 0, 0, 0.09);
  --latest-muted: #737373;
  --latest-placeholder: #e5e8eb;
  --latest-heading-bg: #252525;
  --latest-heading-text: #ffffff;
  --latest-radius: 14px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.kxp-latest,
.kxp-latest * {
  box-sizing: border-box;
}

/* ==========================================
   BOXED SECTION HEADING
   ========================================== */

.kxp-latest .kxp-latest__header {
  display: flex;
  align-items: center;
  gap: 16px;

  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
}

.kxp-latest .kxp-latest__header::after {
  content: "";
  flex: 1 1 auto;

  min-width: 20px;
  height: 1px;

  background: var(--latest-border);
}

.kxp-latest .kxp-latest__heading {
  position: relative;

  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 11px 17px 11px 20px;

  background: var(--latest-heading-bg);
  color: var(--latest-heading-text);

  border: 0;
  border-radius: 7px;

  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;

  overflow-wrap: anywhere;
}

.kxp-latest .kxp-latest__heading::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;

  width: 4px;

  background: var(--latest-accent);
  border-radius: 0 3px 3px 0;
}

/* ==========================================
   SHARED ARTICLE RESET
   ========================================== */

.kxp-latest .kxp-latest__article {
  min-width: 0;
  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================
   SHARED IMAGES
   ========================================== */

.kxp-latest .kxp-latest__media {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;

  background: var(--latest-placeholder);
  border-radius: 10px;

  overflow: hidden;
}

.kxp-latest .kxp-latest__image-link {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.kxp-latest .kxp-latest__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;

  border-radius: 0;

  object-fit: cover;
  object-position: center;
}

.kxp-latest .kxp-latest__placeholder {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--latest-placeholder);
}

/* ==========================================
   CATEGORY BADGES
   ========================================== */

.kxp-latest .kxp-latest__category {
  position: absolute;
  z-index: 2;
  inset: auto auto 14px 14px;

  display: block;
  max-width: calc(100% - 28px);

  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;

  pointer-events: none;
}

.kxp-latest .kxp-latest__category .fbt-category {
  position: static;
  display: block;

  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
}

.kxp-latest .kxp-latest__category .cat-link {
  display: inline-block;
  max-width: 100%;

  margin: 0;
  padding: 5px 10px;

  background: var(--latest-accent);
  color: #ffffff;

  border: 0;
  border-radius: 999px;
  box-shadow: none;

  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.025em;

  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;

  pointer-events: auto;
}

.kxp-latest .kxp-latest__category::before,
.kxp-latest .kxp-latest__category::after,
.kxp-latest .kxp-latest__category .fbt-category::before,
.kxp-latest .kxp-latest__category .fbt-category::after,
.kxp-latest .kxp-latest__category .cat-link::before,
.kxp-latest .kxp-latest__category .cat-link::after {
  content: none !important;
  display: none !important;
}

/* ==========================================
   TITLES AND DATES
   Preserve existing title/link colors.
   ========================================== */

.kxp-latest .kxp-latest__title {
  margin: 0;
  padding: 0;

  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

.kxp-latest .kxp-latest__title a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Intentionally no title/link color overrides. */

.kxp-latest .kxp-latest__date {
  display: block;

  max-width: 100%;
  margin: 0;
  padding: 0;

  background: transparent;
  color: var(--latest-muted);

  border: 0;
  border-radius: 0;
  box-shadow: none;

  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;

  white-space: normal;
}

/* ==========================================
   LEAD STORY
   ========================================== */

.kxp-latest .kxp-latest__lead {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
}

.kxp-latest .kxp-latest__article--lead {
  display: block;
}

.kxp-latest .kxp-latest__article--lead .kxp-latest__media {
  width: 100%;
  aspect-ratio: 16 / 10;

  border-radius: var(--latest-radius);
}

/* Local shading for the badge, not the title. */
.kxp-latest .kxp-latest__article--lead .kxp-latest__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 55% 0 0;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.28)
  );

  pointer-events: none;
}

.kxp-latest .kxp-latest__article--lead .kxp-latest__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;

  min-width: 0;
  margin: 0;
  padding: 16px 0 0;
}

.kxp-latest .kxp-latest__article--lead .kxp-latest__title {
  font-size: 20px;
  line-height: 1.4;
}

.kxp-latest .kxp-latest__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  max-width: 65ch;
  margin: 0;
  padding: 0;

  color: var(--latest-muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;

  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ==========================================
   NEWS DESK SURFACE
   One shared panel, not six separate cards.
   ========================================== */

.kxp-latest .kxp-latest__rail {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 18px;

  background: var(--latest-surface);
  border: 1px solid var(--latest-border);
  border-radius: var(--latest-radius);

  overflow: visible;
}

/* Three rows in each column: six supporting stories. */
.kxp-latest .kxp-latest__list {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);

  column-gap: 22px;
  row-gap: 0;

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  list-style: none;
}

.kxp-latest .kxp-latest__item {
  min-width: 0;
  margin: 0;
  padding: 14px 0;

  border: 0;
  border-top: 1px solid var(--latest-border);

  list-style: none;
}

/* First row of each three-story column. */
.kxp-latest .kxp-latest__item:nth-child(3n + 1) {
  padding-top: 0;
  border-top: 0;
}

/* Last row of each three-story column. */
.kxp-latest .kxp-latest__item:nth-child(3n) {
  padding-bottom: 0;
}

/* ==========================================
   COMPACT STORIES
   Category label + title beside the image.
   ========================================== */

.kxp-latest .kxp-latest__article--compact {
  position: relative;

  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

/*
 * Anchor the image to its article so the category
 * can sit above the title in the text column.
 */
.kxp-latest .kxp-latest__article--compact .kxp-latest__media {
  position: static;

  width: 76px;
  height: 88px;

  background: transparent;
  overflow: visible;
}

.kxp-latest .kxp-latest__article--compact .kxp-latest__image-link {
  inset: 0 auto auto 0;

  width: 76px;
  height: 88px;

  background: var(--latest-placeholder);
  border-radius: 8px;

  overflow: hidden;
}

/* Compact category becomes a small editorial label. */
.kxp-latest .kxp-latest__article--compact .kxp-latest__category {
  inset: 0 0 auto 88px;

  max-width: none;
  height: 15px;

  overflow: hidden;
}

.kxp-latest .kxp-latest__article--compact .cat-link {
  display: block;

  padding: 0;

  background: transparent;
  color: var(--latest-muted);

  border-radius: 0;

  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.06em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kxp-latest .kxp-latest__article--compact .kxp-latest__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;

  min-width: 0;
  margin: 0;
  padding: 21px 0 0;
}

.kxp-latest .kxp-latest__article--compact .kxp-latest__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  font-size: 14px;
  line-height: 1.4;

  overflow: hidden;
}

.kxp-latest .kxp-latest__article--compact .kxp-latest__date {
  font-size: 10px;
}

/* ==========================================
   WIDE DESKTOP
   Lead left / six-story desk right.
   ========================================== */

@media (min-width: 1200px) {
  .kxp-latest {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    column-gap: 28px;
    align-items: start;
  }

  .kxp-latest .kxp-latest__header {
    grid-column: 1 / -1;
  }

  .kxp-latest .kxp-latest__lead {
    grid-column: 1;
    margin-bottom: 0;
  }

  .kxp-latest .kxp-latest__rail {
    grid-column: 2;
  }
}

/* ==========================================
   MOBILE
   Two stories per swipe column:
   2–3 / 4–5 / 6–7.
   ========================================== */

@media (max-width: 767px) {
  .kxp-latest .kxp-latest__header {
    gap: 12px;
    margin-bottom: 18px;
  }

  .kxp-latest .kxp-latest__heading {
    padding: 10px 14px 10px 17px;
    font-size: 16px;
  }

  .kxp-latest .kxp-latest__lead {
    margin-bottom: 20px;
  }

  .kxp-latest .kxp-latest__article--lead .kxp-latest__media {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }

  .kxp-latest .kxp-latest__article--lead .kxp-latest__category {
    inset: auto auto 11px 11px;
    max-width: calc(100% - 22px);
  }

  .kxp-latest .kxp-latest__article--lead .kxp-latest__body {
    gap: 9px;
    padding-top: 13px;
  }

  .kxp-latest .kxp-latest__article--lead .kxp-latest__title {
    font-size: 18px;
    line-height: 1.4;
  }

  .kxp-latest .kxp-latest__excerpt {
    display: none !important;
  }

  /* Shared swipe panel. */
  .kxp-latest .kxp-latest__rail {
    padding: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 14px;

    scrollbar-width: thin;
    scrollbar-color: var(--latest-muted) transparent;
  }

  .kxp-latest .kxp-latest__list {
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 94%;

    column-gap: 18px;
    row-gap: 0;

    width: 100%;
    padding-bottom: 6px;
  }

  /* Reset desktop three-row divider rules. */
  .kxp-latest .kxp-latest__item,
  .kxp-latest .kxp-latest__item:nth-child(3n + 1),
  .kxp-latest .kxp-latest__item:nth-child(3n) {
    padding: 12px 0;
    border-top: 1px solid var(--latest-border);

    scroll-snap-align: start;
  }

  /* First story in each mobile pair. */
  .kxp-latest .kxp-latest__item:nth-child(odd) {
    padding-top: 0;
    border-top: 0;
  }

  /* Second story in each mobile pair. */
  .kxp-latest .kxp-latest__item:nth-child(even) {
    padding-bottom: 0;
  }

  .kxp-latest .kxp-latest__article--compact {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__media,
  .kxp-latest .kxp-latest__article--compact .kxp-latest__image-link {
    width: 86px;
    height: 96px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__category {
    left: 98px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__title {
    font-size: 15px;
  }
}

/* ==========================================
   NARROW PHONES
   ========================================== */

@media (max-width: 380px) {
  .kxp-latest .kxp-latest__rail {
    padding: 12px;
    scroll-padding-inline-start: 12px;
  }

  .kxp-latest .kxp-latest__article--compact {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__media,
  .kxp-latest .kxp-latest__article--compact .kxp-latest__image-link {
    width: 72px;
    height: 90px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__category {
    left: 82px;
  }

  .kxp-latest .kxp-latest__article--compact .kxp-latest__title {
    font-size: 14px;
  }
}

/* ==========================================
   DARK MODE
   ========================================== */

.dark-mode .kxp-latest,
.kxp-latest.dark-mode {
  --latest-surface: #222426;
  --latest-border: rgba(255, 255, 255, 0.1);
  --latest-muted: #b8b8b8;
  --latest-placeholder: #303336;
  --latest-heading-bg: #eeeeee;
  --latest-heading-text: #202020;
}

/* ==========================================
   INTERACTION AND KEYBOARD FOCUS
   ========================================== */

.kxp-latest a:focus-visible,
.kxp-latest .kxp-latest__rail:focus-visible {
  outline: 2px solid var(--latest-accent);
  outline-offset: -2px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kxp-latest .kxp-latest__image {
    transition: transform 220ms ease;
  }

  .kxp-latest .kxp-latest__image-link:hover .kxp-latest__image {
    transform: scale(1.04);
  }
}