/* RaGEZONE-inspired forum typography and hierarchy. */
:root { font-family: Arial, Helvetica, sans-serif; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
html, body { min-height: 100%; }
body {
  background-color: #294968;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(135deg, rgba(4,20,39,.12) 0, rgba(4,20,39,.12) 1px, transparent 1px, transparent 18px);
  background-attachment: fixed;
}
.site-header { background: #071c35; }
main { padding-top: 24px; }
.welcome { width: min(1600px, calc(100% - 200px)); margin-inline: auto; }
.page, .content-grid { background: var(--bg); padding-inline: 16px; }
.shell { width: min(1600px, calc(100% - 200px)); margin-inline: auto; }
.site-header, .site-footer { width: 100%; }
.community-banner { display: block; width: min(1600px, calc(100% - 200px)); overflow: hidden; background: #06182f; line-height: 0; margin-inline: auto; border-radius: 8px 8px 0 0; }
.community-banner picture { display: block; width: 100%; }
.community-banner img { display: block; width: 100%; height: auto; max-width: 1600px; margin: 0 auto; object-fit: contain; }
.community-banner:focus-visible { outline: 3px solid #ffc400; outline-offset: -3px; }
.site-header > .header-main { position: relative; z-index: 1; }
.site-header > .header-main { width: min(1600px, calc(100% - 200px)); margin-inline: auto; }
.page { width: min(1600px, calc(100% - 200px)); max-width: 1600px; margin: 0 auto; }
.page-title h1 { font-size: 30px; font-weight: 400; letter-spacing: 0; color: #234d78; }
.page-title p, .breadcrumb { color: #526b85; }
.forum-panel, .thread-list { border-radius: 10px; box-shadow: 0 1px 3px rgba(25,52,78,.12); }
.forum-panel { background: #fff; }
.forum-panel .forum-head { background: #f7f8fa; color: #667b91; border-bottom: 1px solid #d9e0e7; text-transform: none; }
.forum-panel .forum-row { min-height: 94px; padding: 17px 20px; border-top-color: #e0e5ea; }
.forum-panel .forum-row:first-of-type { border-top: 0; }
.forum-panel .forum-copy strong { color: #176bc1; font-size: 17px; font-weight: 400; }
.forum-panel .forum-copy small { color: #526b85; font-size: 13px; }
.forum-panel .forum-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #2585d8; font-size: 22px; }
.forum-image-icon { display: block; width: 52px; height: 52px; object-fit: cover; object-position: center; border-radius: 50%; clip-path: circle(48%); background: transparent; }
.section-image-icon { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 8px; clip-path: none; object-fit: cover; transform: scale(1.55); mix-blend-mode: multiply; }
.forum-panel .forum-icon:has(.forum-image-icon), .forum-panel .forum-icon:has(.section-image-icon) { width: 54px; height: 54px; overflow: hidden; background: transparent !important; }
.forum-panel .forum-row:nth-child(2) .forum-icon, .forum-panel .forum-row:nth-child(5) .forum-icon { background: #8b98a8; }
.count { color: #435e78; }
.chevron { color: #7d8c9c; }
.forum-tools { display: flex; gap: 10px; margin: 0 0 16px; }
.forum-tools input, .forum-tools select { border: 1px solid #c9d4df; border-radius: 5px; padding: 10px 12px; font: inherit; background: #fff; color: #344f69; }
.forum-tools input { flex: 1; }
.button { border-radius: 5px; background: #1976c9; }
@media (max-width: 720px) { .forum-tools { flex-wrap: wrap; } .forum-tools input { flex-basis: 100%; } }

/* Unified icon geometry: one reserved column, one bounded viewport, no overlap. */
.forum-panel .forum-row {
  grid-template-columns: 64px minmax(0, 1fr) 78px 72px 210px 20px;
  column-gap: 12px;
  align-items: center;
}
.forum-panel .forum-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex: 0 0 56px;
  border-radius: 9px;
  background: transparent !important;
}
.forum-panel .forum-image-icon,
.forum-panel .section-image-icon {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: none;
  clip-path: none;
  border-radius: 9px;
  mix-blend-mode: normal;
}
.forum-panel .forum-image-icon { border-radius: 50%; }
.forum-panel .section-image-icon { width: 54px; height: 54px; min-width: 54px; min-height: 54px; transform: none; mix-blend-mode: normal; }
.forum-panel .forum-copy { min-width: 0; overflow: hidden; }
.forum-panel .forum-copy strong,
.forum-panel .forum-copy small { min-width: 0; overflow-wrap: anywhere; }
.forum-panel .forum-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-panel .forum-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-panel .count,
.forum-panel .latest,
.forum-panel .chevron { min-width: 0; }

@media (max-width: 720px) {
  .shell, .welcome, .community-banner, .site-header > .header-main, .page { width: calc(100% - 24px); }
  .page { max-width: none; padding-inline: 12px; }
  .content-grid { padding-inline: 12px; }
  .community-banner img { width: 100%; height: auto; }
  .forum-panel .forum-row { grid-template-columns: 60px minmax(0, 1fr) 18px; column-gap: 10px; padding-inline: 12px; }
  .forum-panel .forum-icon { width: 52px; height: 52px; min-width: 52px; min-height: 52px; flex-basis: 52px; }
  .forum-panel .section-image-icon { width: 50px; height: 50px; min-width: 50px; min-height: 50px; }
  .forum-panel .forum-copy strong, .forum-panel .forum-copy small { white-space: normal; }
  .forum-panel .forum-row .count, .forum-panel .forum-row .latest { display: none; }
}