/* ==========================================================================
   KNEST News — home section, news center grid, cards, X card, article page.
   Brand-themed, responsive. No build step; plain CSS using tokens.
   ========================================================================== */

/* ---- Home section header ---- */
.news-home__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.news-home__eyebrow {
  display: inline-block; font-size: var(--fs-300); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-accent, #f47d20);
  margin-bottom: var(--sp-1);
}
.news-home__title { font-size: var(--fs-700, 2rem); font-weight: 800; color: var(--brand); margin: 0; }
.news-home__all { font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.news-home__all:hover { text-decoration: underline; }

/* ---- Grid ---- */
.news-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.news-grid--home { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .news-grid--home { grid-template-columns: 1fr; } }

/* ---- Card ---- */
.news-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08)); }
.news-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.news-card__chip {
  align-self: flex-start; font-size: var(--fs-200, .72rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand); background: var(--green-050); border: 1px solid currentColor;
  padding: 2px 10px; border-radius: var(--r-pill);
}
.news-card__title { font-size: var(--fs-500, 1.2rem); font-weight: 700; line-height: 1.3; margin: 0; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--brand); }
.news-card__date { font-size: var(--fs-300); color: var(--text-muted); }
.news-card__excerpt { font-size: var(--fs-400); line-height: 1.6; color: var(--text-secondary, #444); margin: 0; }
.news-card__more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--brand-accent, #f47d20); text-decoration: none;
  padding-top: var(--sp-2);
}
.news-card__more:hover { text-decoration: underline; }

/* ---- X card header ---- */
.news-card__xhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--border, #e2e8e4);
    gap: var(--sp-3);
}

.news-card__xprofile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.news-card__xavatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(7, 84, 43, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(7,84,43,0.12);
}

.news-card__xavatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

.news-card__xmeta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.news-card__xname {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink, #1a2420);
    line-height: 1.2;
}

.news-card__xhandle {
    font-size: 0.8rem;
    color: var(--text-muted, #6a746e);
    text-decoration: none;
}
.news-card__xhandle:hover { text-decoration: underline; }

.news-card__xfollow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.875rem;
    border-radius: var(--r-pill);
    background: #000;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.news-card__xfollow:hover { background: #1a1a1a; }

/* ---- X card (third home card) ---- */
/* Keep the X card the same height as the news cards beside it */
.news-card--x {
    display: flex;
    flex-direction: column;
    max-height: 520px;        /* match roughly your article card height */
    overflow: hidden;
}

.news-card__xembed {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* ── Skeleton loader ────────────────────────────────────────── */
.news-card__xskeleton {
    padding: 0.75rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@keyframes xSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.news-card__xskel-line,
.news-card__xskel-img {
    border-radius: 6px;
    background: linear-gradient(90deg,
        #ececec 25%, #e0e0e0 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: xSkelShimmer 1.4s ease-in-out infinite;
}

.news-card__xskel-line         { height: 0.8rem;  width: 100%; }
.news-card__xskel-line--title  { height: 0.95rem; width: 72%; }
.news-card__xskel-line--short  { width: 48%; }
.news-card__xskel-img          { height: 120px; margin-top: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
    .news-card__xskel-line,
    .news-card__xskel-img { animation: none; background: #e8e8e8; }
}

/* trim the big default top/bottom margins X injects around the tweet */
.news-card__xembed .twitter-tweet {
    margin: 0 !important;
}

/* ---- Article page ---- */
.news-article { max-width: 760px; }
.news-article__hero { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.news-article__body { font-size: var(--fs-450, 1.05rem); line-height: 1.75; }
.news-article__body p { margin: 0 0 var(--sp-4); }
.news-article__back { display: inline-block; margin-top: var(--sp-5); font-weight: 700; color: var(--brand); text-decoration: none; }
.news-article__back:hover { text-decoration: underline; }

.news-empty {
  padding: var(--sp-6); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--text-muted);
}

.news-card__xmore {
  display: inline-block; margin: 0 var(--sp-5) var(--sp-5);
  font-weight: 700; color: var(--brand); text-decoration: none;
}
.news-card__xmore:hover { text-decoration: underline; }