/* EGYTAG HOME — editorial cards and popular stories, 2026-10-26.
   Compact supporting stories, readable hierarchy, and restrained graphite depth.
   All rules are scoped to the homepage; no article reader or theme overrides. */
:root[data-theme="dark"] body.homepage-layout{
  --home-story-edge:rgba(165,185,196,.15);
  --home-story-edge-hover:rgba(193,211,221,.32);
  --home-story-surface:#24292d;
  --home-story-surface-hover:#2c3337;
  --home-story-ink:#eef3f5;
  --home-story-muted:#b9c7cf;
}
/* Preserve the same two-column design, but do not stretch a 3-story list to the
   height of an image-led feature. Let three real story descriptions fill their
   own intrinsic space rather than creating large artificial empty bands. */
:root[data-theme="dark"] body.homepage-layout eg-front-grid.home-news-lead__front-grid{
  align-items:start!important;
  gap:clamp(12px,1.2vw,19px)!important;
}
:root[data-theme="dark"] body.homepage-layout eg-feature-story.home-news-lead__feature{
  align-self:stretch;
  border-radius:13px!important;
  border-color:var(--home-story-edge)!important;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(8,15,19,.13),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-news-lead__support-grid{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:none!important;
  grid-auto-rows:max-content!important;
  gap:8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}
:root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"meta number" "body body" "action action";
  align-content:center!important;
  align-items:center!important;
  justify-content:stretch!important;
  min-height:132px!important;
  height:auto!important;
  padding:13px 15px!important;
  gap:7px 10px!important;
  border:1px solid var(--home-story-edge)!important;
  border-radius:12px!important;
  background:var(--home-story-surface)!important;
  box-shadow:0 6px 17px rgba(8,15,19,.08),inset 0 1px 0 rgba(255,255,255,.018)!important;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
:root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card:first-child{
  border-top:1px solid var(--home-story-edge)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card__index{
  grid-area:number;
  margin:0!important;
  display:grid;
  place-items:center;
  font-family:inherit;font-size:12px;font-weight:800;line-height:1.4;
  font-variant-numeric:tabular-nums;
  color:#c4d0d6!important;
  border:1px solid rgba(184,203,214,.25);
  border-radius:7px;
  background:#343e45;
  width:34px;
  height:27px;
  box-sizing:border-box;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card>.front-item__meta{
  grid-area:meta;
  margin:0!important;
  align-self:center;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  color:var(--home-story-muted);
  font-size:12px!important;
  line-height:1.45!important;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card__content{
  grid-area:body;
  display:grid!important;
  grid-template-columns:80px minmax(0,1fr);
  align-items:center!important;
  gap:12px!important;
  min-width:0;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card__content:not(:has(.home-news-support-card__thumb)){
  grid-template-columns:minmax(0,1fr);
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card__thumb{
  width:80px!important;
  height:62px!important;
  min-width:0;
  border:1px solid rgba(181,201,211,.19);
  border-radius:9px!important;
  overflow:hidden;
  display:block;
  flex:none!important;
  background:#232c32;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card h3{
  min-width:0;
  margin:0!important;
  font-size:clamp(14px,1.05vw,17px)!important;
  line-height:1.52!important;
  font-weight:740!important;
  text-wrap:pretty;
}
:root[data-theme="dark"] body.homepage-layout .home-news-support-card h3 a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  color:var(--home-story-ink);
  text-decoration:none;
}
:root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card:is(:hover,:focus-within){
  background:var(--home-story-surface-hover)!important;
  border-color:var(--home-story-edge-hover)!important;
  box-shadow:0 13px 27px rgba(8,15,19,.17)!important;
  transform:translateY(-2px);
}
/* A first-party "Inside article" preview button is added after hydration.
   It must be an actual card footer, never an absolute overlay on the cover. */
:root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card.egxu-peek-host>.egxu-peek-btn{
  position:static!important;
  grid-area:action;
  justify-self:end;
  align-self:center;
  width:max-content;
  max-width:100%;
  min-height:27px;
  padding:4px 9px;
  margin:0;
  border-radius:7px;
  font-size:11px;
  line-height:1.4;
  opacity:1!important;
  transform:none!important;
  background:#303a41;
  border-color:rgba(198,216,226,.31);
}
:root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card.egxu-peek-host>.egxu-peek-btn:is(:hover,:focus-visible){
  background:#424e56;
  border-color:#e3ebf0;
}
/* Popular list: one compact editorial entry per article, with a real image,
   readable title, subdued metadata, and a small rank placed over the thumbnail.
   Do not create synthetic scores or popularity statistics. */
:root[data-theme="dark"] body.homepage-layout .home-reference-sidebar .home-sidebar__box--stories:has(.home-popular-list){
  border-radius:13px;
  overflow:hidden;
  border-color:var(--home-story-edge)!important;
  box-shadow:0 12px 29px rgba(8,15,19,.11)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-reference-sidebar .home-sidebar__box--stories:has(.home-popular-list)>header{
  padding-block:12px!important;
  background:#2c3337!important;
  border-bottom-color:rgba(188,204,214,.15)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list{
  margin:0;
  padding:5px 8px 8px!important;
  display:grid;
  gap:3px;
}
:root[data-theme="dark"] body.homepage-layout .home-reference-sidebar .home-sidebar__box--stories .home-popular-list>.home-sidebar-story{
  position:relative;
  border:1px solid transparent!important;
  border-radius:10px;
  background:transparent!important;
  padding:11px 7px!important;
  gap:8px!important;
  min-height:81px;
  align-items:center!important;
  transition:background-color .2s ease,border-color .2s ease;
}
:root[data-theme="dark"] body.homepage-layout .home-reference-sidebar .home-sidebar__box--stories .home-popular-list>.home-sidebar-story:first-child{
  background:#2a3034!important;
  border-color:rgba(173,193,204,.13)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-reference-sidebar .home-sidebar__box--stories .home-popular-list>.home-sidebar-story:is(:hover,:focus-within){
  background:#31393e!important;
  border-color:rgba(190,207,217,.35)!important;
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .home-sidebar-thumb{
  aspect-ratio:4/3;
  border-radius:8px!important;
  overflow:hidden;
  border:1px solid rgba(191,206,216,.16);
  background:#1b2226;
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .home-list-index{
  z-index:3;
  width:25px;
  height:23px;
  min-width:0;
  margin:0!important;
  background:#343e45!important;
  border:1px solid rgba(203,218,227,.24);
  border-radius:6px;
  color:#ecf2f5;
  font-size:11px;
  line-height:1;
  font-weight:850;
  display:grid;
  place-items:center;
  box-shadow:0 2px 7px #0912177a;
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .home-sidebar-story__body{
  align-self:center!important;
  display:grid;
  gap:6px;
  min-width:0;
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .home-sidebar-story__title{
  font-size:clamp(12.5px,.91vw,15px)!important;
  line-height:1.6!important;
  font-weight:750!important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  text-decoration:none;
  color:var(--home-story-ink);
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .home-sidebar-story__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:8px;
  row-gap:3px;
  font-size:11px!important;
  line-height:1.5!important;
  color:var(--home-story-muted);
}
:root[data-theme="dark"] body.homepage-layout .home-popular-list>.home-sidebar-story .front-item__views-number{
  color:#d4b77e;
  font-weight:800;
}
:root[data-theme="dark"] body.homepage-layout :is(.home-news-support-card a,.home-popular-list .home-sidebar-story a):focus-visible{
  outline:2px solid #dce7ee!important;
  outline-offset:3px;
  border-radius:4px;
}
@media(max-width:1180px){
 :root[data-theme="dark"] body.homepage-layout .home-news-lead__support-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
 }
 :root[data-theme="dark"] body.homepage-layout .home-news-support-card__content{
  grid-template-columns:minmax(0,1fr);
 }
 :root[data-theme="dark"] body.homepage-layout .home-news-support-card__thumb{
  width:100%!important;
  height:85px!important;
 }
}
@media(max-width:720px){
 :root[data-theme="dark"] body.homepage-layout .home-news-lead__support-grid{
  grid-template-columns:minmax(0,1fr)!important;
 }
 :root[data-theme="dark"] body.homepage-layout .home-news-support-card__content{
  grid-template-columns:74px minmax(0,1fr);
 }
 :root[data-theme="dark"] body.homepage-layout .home-news-support-card__thumb{
  width:74px!important;
  height:60px!important;
 }
 :root[data-theme="dark"] body.homepage-layout eg-support-story.home-news-support-card{min-height:112px!important;padding:12px!important}
 :root[data-theme="dark"] body.homepage-layout .home-news-lead__support-grid{gap:8px!important}
}
@media(prefers-reduced-motion:reduce){
 :root[data-theme="dark"] body.homepage-layout :is(.home-news-support-card,.home-popular-list>.home-sidebar-story){transition:none!important;transform:none!important}
}