/* Mole Hole tab extras — shared news feed + video strip styles.
   Uses each page's CSS variables (--surface, --ink, --muted, --line, --green, --gold)
   so the components blend with every tab's theme. Safe fallbacks included. */

/* ---------- News feed ---------- */
.mh-news-feed{ display:grid; gap:12px; margin:16px 0 0; }
.mh-news-item{
  background:var(--surface,#e6f0e0);
  border:1px solid var(--line,#dfe3d7);
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(13,52,35,.06);
}
.mh-news-item a{
  display:block; padding:14px 16px; text-decoration:none; color:inherit;
}
.mh-news-item a:hover b{ text-decoration:underline; }
/* article opener button — same look as the old link, opens the in-app popup */
.mh-news-open{
  display:block; width:100%; text-align:left; padding:14px 16px;
  background:none; border:0; cursor:pointer; color:inherit; font:inherit;
}
.mh-news-open:hover b{ text-decoration:underline; }
.mh-news-item b{
  display:block; font-size:1rem; line-height:1.4; margin-bottom:6px;
  color:var(--ink,#17251e);
}
.mh-news-item span{
  display:block; font-size:.9rem; line-height:1.5;
  color:var(--muted,#637068); margin-bottom:8px;
}
.mh-news-item em{
  display:block; font-style:normal; font-size:.78rem; font-weight:600;
  color:var(--green-text,var(--green,#14553b));
}
.mh-empty{
  color:var(--muted,#637068); font-size:.92rem; font-style:italic;
  margin:12px 0 0;
}

/* ---------- Video strip ---------- */
.mh-video-strip{
  display:grid; gap:14px; margin:16px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.mh-video{
  position:relative; background:var(--surface,#e6f0e0);
  border:1px solid var(--line,#dfe3d7); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(13,52,35,.06);
  display:flex; flex-direction:column;
}
.mh-video-thumb{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border:0; padding:0; cursor:pointer; background:#0d2d1d;
}
.mh-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mh-play{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.2rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);
  pointer-events:none;
}
.mh-video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.mh-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mh-video > b{
  padding:10px 12px 12px; font-size:.86rem; line-height:1.35;
  color:var(--ink,#17251e); font-weight:600;
}
.mh-video-link{ text-decoration:none; color:inherit; padding:18px 14px; align-items:center; text-align:center; gap:8px; }
.mh-video-linkicon{ font-size:2rem; line-height:1; }
.mh-video-link b{ padding:0; font-size:.92rem; }
.mh-video-link em{ font-style:normal; font-size:.8rem; color:var(--green-text,var(--green,#14553b)); font-weight:600; }

.mh-section-kicker{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green-text,var(--green,#14553b));
  margin-bottom:4px;
}