/* Eldritch Clockwork — Home
   build: 2025-09-13
   Purpose: homepage-only layout (hero, grid, feed/news, cards)
--------------------------------------------------------------------- */

/* Wrapper and 3-col grid */
.ec-content-wrapper{max-width:var(--site-max); margin:0 auto; padding:0 var(--site-gutter) 10px;}
.ec-grid{display:grid; grid-template-columns:240px minmax(0,1fr) 300px; gap:20px; margin-top:0;}
.ec-col{min-width:0;}
@media (max-width:1100px){ .ec-grid{grid-template-columns:1fr;} }

.ec-container.ec-grid { padding-top: 0; }

/* Hero */
.ec-hero{background:transparent !important; border:none !important; box-shadow:none !important; position:relative; z-index:1;}
.ec-hero .ec-container{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  padding:16px !important; max-width:none !important; margin:0 !important;
  background:transparent !important;
}
.ec-hero .panel{
  background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:12px !important;
  padding:14px !important; box-shadow:0 2px 8px rgba(0,0,0,.3) !important;
  margin:0 !important;
}
.ec-hero h1{margin:0 0 8px; font-size:22px;}

/* Telnet block */
.ec-hero .telnet a.imglink{display:block;}
.ec-hero .telnet img{
  width:100%; height:260px; object-fit:contain; border-radius:10px; border:1px solid var(--line); background:#000;
}
.ec-hero .telnet .copy{margin-top:10px;}

/* Feed + Site News */
.feed-mixed{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.feed-mixed .feed-item{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px; overflow:hidden;}
.feed-mixed .feed-item .row1{display:flex; align-items:center;}
.feed-mixed .row1 .left{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;}
.feed-mixed .row1 .left .title{display:block; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.feed-mixed .row1 time.dt{flex:0 0 auto; white-space:nowrap; margin-left:12px; color:#a7b0ba; font-size: 0.75rem;}
.feed-mixed .row2.meta{color:#99aaab; font-size: 0.75rem; margin-top:2px;}
.feed-mixed .row3.extra{color:#a8dfff; font-size: 0.75rem; margin-top:2px;}

/* Site News bits */
.news .news-body.clamp{display:-webkit-box; -webkit-line-clamp:10; -webkit-box-orient:vertical; overflow:hidden;}
.news .more{margin-top:8px; display:inline-block; font-size: 0.75rem; color:#8fd;}
.news .date{color:#a7b0ba; font-size: 0.75rem; margin-left:8px;}

/* Badge variants used on Home tiles (base .badge lives in core) */
.badge.game{background:#182; color:#bff8c0; border-color:#274;}
.badge.msg{background:#024; color:#9ad7ff; border-color:#035;}
.badge.file{background:#402; color:#ffb3d1; border-color:#603;}

/* Cards (Games/Popular) */
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.cards.small{grid-template-columns:1fr;}
.card{background:var(--panel2); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.card a{display:grid; grid-template-columns:92px 1fr; column-gap:4px !important; align-items:center; min-width:0; padding-left:4px;}
.card .thumb{width:92px; height:72px; background:#0a0a0a; border-right:1px solid var(--line); justify-self:start;}
.card .meta{padding:6px 8px 6px 6px !important;}
.card h3{
  margin:0 0 2px; font-size: 0.8125rem; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal;
}
.card .sub, .card .stats{font-size: 0.75rem;}

.container.main-content {
    padding-top: 25px !important;
}

/* HERO: 2-up on desktop, stack on mobile/tablet */
.ec-hero .ec-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 992px) { /* Bootstrap “md” and below */
  .ec-hero .ec-container {
    grid-template-columns: 1fr;   /* stack */
  }
  .ec-hero .panel {
    margin-bottom: 12px;          /* a little breathing room between panels */
  }
}

/* Make the telnet image responsive (if not already) */
.ec-hero .telnet .imglink img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Unified pill chrome — match navbar login pill */
:root{
  --pill-bg:#272d33;
  --pill-border:#31373e;
  --pill-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 10px rgba(0,0,0,.35);
  --pill-radius:8px;
}

/* Common pill classes in your site */
html body .ec-panel .cards-small .card,
html body .ec-panel .cards .card,
html body .og-card,                               /* Online Games grid pills */
html body .feed-mixed .feed-item,                 /* Recent messages/files items */
html body .list-group .list-group-item,           /* Forum/group lists */
html body .ec-file,                               /* file rows, if styled as cards */
html body .ec-pill {                              /* optional utility class */
  background:var(--pill-bg) !important;
  border:1px solid var(--pill-border) !important;
  border-radius:var(--pill-radius) !important;
  box-shadow:var(--pill-shadow) !important;
}

/* Hover focus (subtle lift like the login button hover) */
html body .og-card:hover,
html body .cards-small .card:hover,
html body .cards .card:hover,
html body .feed-mixed .feed-item:hover,
html body .list-group .list-group-item:hover {
  filter:brightness(1.03);
}

/* If your body pills currently have darker inner blocks, align them too */
html body .card .thumb,
html body .og-card .og-thumb,
html body .feed-item .row1,
html body .feed-item .row2 {
  background:transparent !important;  /* let the unified bg show through */
  border-color:var(--pill-border) !important;
}

/* Optional: unify borders on striped/active states */
html body .list-group .list-group-item.active,
html body .list-group .list-group-item.active:focus,
html body .list-group .list-group-item.active:hover {
  background:var(--pill-bg) !important;
  border-color:var(--pill-border) !important;
  color:#e6e6e6 !important;
}