/* Shared Black Legion language for wide, icon-led section rows. */
:root {
  --row-bg: linear-gradient(105deg, rgba(18, 34, 46, .9), rgba(8, 16, 24, .94));
  --row-border: rgba(129, 190, 207, .2);
  --row-icon-bg: linear-gradient(145deg, rgba(45, 86, 104, .52), rgba(11, 25, 35, .9));
}

.feature-grid,
.connect-grid,
.news-grid,
.rankings-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
}

.feature,
.connect-card,
.news-card,
.ranking-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--row-border);
  border-radius: 9px;
  background: var(--row-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.feature:hover,
.connect-card:hover,
.news-card:hover,
.ranking-card:hover {
  border-color: rgba(143, 211, 226, .38);
  background: linear-gradient(105deg, rgba(24, 46, 60, .94), rgba(9, 19, 28, .96));
}

.feature {
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 3px;
  padding: 17px 20px;
}

.feature .feature-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  margin: 0;
  border-color: rgba(136, 215, 230, .3);
  border-radius: 12px;
  background: var(--row-icon-bg);
  font-size: 20px;
}

.feature h3 { align-self: end; margin: 0; font-size: 17px; }
.feature p { align-self: start; }

.connect-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
  padding: 18px 20px;
}

.connect-card::before,
.news-card:not(.news-placeholder)::before,
.community::before {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(136, 215, 230, .3);
  border-radius: 12px;
  background: var(--row-icon-bg);
  color: #9ad8e5;
  font-size: 20px;
}

.connect-card:nth-child(1)::before { content: "⌘"; grid-row: 1 / span 3; }
.connect-card:nth-child(2)::before { content: "✦"; grid-row: 1 / span 4; }
.connect-card h3 { grid-column: 2; margin: 0 0 3px; }
.connect-card > p,
.connect-card > .realmlist,
.connect-card > .steps,
.connect-card > .hero-actions { grid-column: 2; }
.connect-card > .realmlist { margin-top: 12px; }
.connect-card > .steps { margin-top: 12px; }
.connect-card > .hero-actions { margin-top: 14px; }

.news-card:not(.news-placeholder) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  align-content: center;
  padding: 17px 20px;
}
.news-card:not(.news-placeholder)::before { content: "✧"; grid-row: 1 / span 3; }
.news-card .news-date,
.news-card h3,
.news-card p { grid-column: 2; }
.news-card h3 { margin: 2px 0 3px; }
.news-placeholder { min-height: 78px; padding: 15px 20px; }
.news-placeholder .feature-icon { width: 44px; height: 44px; border-radius: 12px; }

.community {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 18px;
  padding: 19px 20px;
  border-radius: 9px;
  background: var(--row-bg);
}
.community::before { content: "☷"; grid-row: 1 / span 3; }
.community > div:first-child { grid-column: 2; }
.community-actions { grid-column: 3; }
.community h2 { font-size: 20px; }

.ranking-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 17px;
  text-align: left;
  padding: 15px 19px;
}
.ranking-card .icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(136, 215, 230, .3);
  border-radius: 13px;
  background: var(--row-icon-bg);
  color: #9ad8e5;
  font-size: 23px;
}
.ranking-card h2 { grid-column: 2; align-self: end; margin: 0 0 2px; font-size: 18px; }
.ranking-card p { grid-column: 2; align-self: start; margin: 0; }
.ranking-card .go { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; }

/* The cabinet already uses rows for its navigation and account details. */
.side-nav button,
.account-row,
.character-row,
.characters .character {
  border-radius: 7px;
}
.side-nav button { min-height: 46px; }

/* Armory search results and equipment stay compact, with a restrained item marker. */
.result { align-items: center; border-radius: 8px; }
.slot { border-radius: 8px; }

@media (max-width: 700px) {
  .feature, .connect-card, .news-card:not(.news-placeholder) {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px;
  }
  .feature .feature-icon,
  .connect-card::before,
  .news-card:not(.news-placeholder)::before,
  .news-placeholder .feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 17px;
  }
  .community { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .community::before { width: 36px; height: 36px; }
  .community-actions { grid-column: 2; }
  .community-actions .button { flex: 1; }
  .ranking-card { grid-template-columns: 42px minmax(0, 1fr); gap: 10px 12px; padding: 13px; }
  .ranking-card .icon { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; }
  .ranking-card h2, .ranking-card p { grid-column: 2; }
  .ranking-card .icon { grid-row: 1 / span 2; }
  .ranking-card .go { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
  .connect-card > .realmlist,
  .connect-card > .steps,
  .connect-card > .hero-actions { grid-column: 1 / -1; }
  .connect-card h3, .connect-card > p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .feature, .connect-card, .news-card, .ranking-card { transition: none; }
}