/* AURABRA responsive layer. Loaded after every legacy stylesheet. */
@media (max-width: 1100px) {
  #Bodycontainer { width: calc(100% - 20px) !important; }
  #ContentRow { grid-template-columns: 190px minmax(0,1fr) 190px !important; gap: 9px !important; }
  #AurabraTopNav { width: min(760px, calc(100% - 24px)) !important; }
  .ab-home-serverinfo-copy { width: 88%; }
}

@media (max-width: 760px) {
  .ab-system-tabs { grid-template-columns: 1fr 1fr; }
  .ab-system-header { display: block; padding: 17px; }
  .ab-system-header > strong { display: inline-block; margin-top: 10px; }
  .ab-system-layout,.ab-system-layout-portrait,.ab-system-layout-battlepass { grid-template-columns: 1fr; }
  .ab-system-feature-grid,.ab-system-feature-grid-four { grid-template-columns: 1fr; }
  .ab-system-media-wide { aspect-ratio: auto; }
  .ab-system-media-wide img { height: auto; object-fit: contain; }
  .ab-character-search > div { flex-direction: column; }
  .ab-guild-card { grid-template-columns: 58px minmax(0,1fr); }
  .ab-guild-card > img { width: 50px; height: 50px; }
  .ab-guild-card form { grid-column: 1 / -1; }
  .ab-guild-card button { width: 100%; }
  .ab-house-filter-grid { grid-template-columns: 1fr; }
  .ab-house-town-list { grid-template-columns: 1fr 1fr; max-height: 210px; }
  .ab-community-table { min-width: 520px; }
  .ab-spells-page .dataTables_wrapper { overflow-x: auto; }
  .ab-spells-page table.dataTable { min-width: 620px; }
  .ab-rules-list { grid-template-columns: 1fr; }
  .ab-rules-note { flex-direction: column; text-align: center; }
}

@media (max-width: 900px) {
  #ArtworkHelper { background-attachment: scroll !important; }
  #ContentRow {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "content" "right" "menu";
    gap: 14px !important;
  }
  #ContentColumn { grid-area: content; }
  #ThemeboxesColumn { grid-area: right; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #MenuColumn { grid-area: menu; }
  #ThemeboxesColumn > *, #Themeboxes #Topbar.AurabraHighscores { margin: 0 !important; }
  #MenuColumn { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: start; gap: 12px; }
  #Loginbox.AurabraLoginBox { margin: 0 !important; }
  #Menu.AurabraPortalMenu { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #Menu .AurabraMenuGroup { margin: 0 !important; }
  .ab3-side-art { height: 150px; }
  .ab-login-page { grid-template-columns: 1fr; }
  .ab-login-new-player { min-height: 210px; }
}

@media (max-width: 768px) {
  #AurabraLogoLink { width: 225px !important; height: 150px !important; }
  #AurabraTopNav { top: 150px !important; }
  #Bodycontainer { padding-top: 212px; }
  .ab-home-serverinfo { min-height: 250px; background-position: 58% center; }
  .ab-home-serverinfo-copy { width: 100%; padding: 30px 24px; background: linear-gradient(90deg,rgba(4,20,32,.88),rgba(4,20,32,.46)); }
  .ab-news-system-grid, .ab2-feature-line, .ab-si-training { grid-template-columns: 1fr 1fr !important; }
  .ab-si-quick { grid-template-columns: 1fr !important; }
  .ab-changelog-entry { grid-template-columns: 120px minmax(0,1fr); }
}

@media (max-width: 620px) {
  #AurabraLogoLink { width: min(210px, 92vw) !important; height: 140px !important; }
  #AurabraTopNav {
    top: 140px !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: calc(100% - 18px) !important;
  }
  #AurabraTopNav a, #AurabraTopNav .AurabraLanguage { min-height: 38px; padding: 0 4px; border-bottom: 1px solid rgba(219,180,86,.45); font-size: 9px !important; }
  #AurabraTopNav > :nth-child(3n) { border-right: 0; }
  #AurabraTopNav > :nth-child(n+4) { border-bottom: 0; }
  #Bodycontainer { width: calc(100% - 12px) !important; padding-top: 232px; }
  #ContentRow { gap: 11px !important; }
  #ThemeboxesColumn { grid-template-columns: 1fr !important; }
  #MenuColumn { grid-template-columns: 1fr; }
  #Menu.AurabraPortalMenu { grid-template-columns: 1fr; }
  .ab-home-serverinfo { margin: 4px 4px 12px; min-height: 270px; }
  .ab-home-serverinfo-copy { padding: 32px 18px; }
  .ab-home-serverinfo h1 { font-size: 25px !important; }
  .ab-home-serverinfo strong { font-size: 14px; }
  .ab-dynamic-news { padding: 0 4px 4px; }
  .ab-news-content { padding: 11px; }
  .ab-news-system-grid, .ab2-feature-line, .ab3-steps, .ab-si-rates, .ab-si-training { grid-template-columns: 1fr !important; }
  .ab-si-strip { grid-template-columns: 1fr 1fr; }
  .ab-si-strip div:nth-child(2) { border-right: 0; }
  .ab-si-strip div:nth-child(-n+2) { border-bottom: 1px solid #36576c; }
  .ab2-anchor-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .ab2-system-detail, .ab2-copy-section { padding: 12px !important; }
  .ab2-system-detail { grid-template-columns: 46px minmax(0,1fr) !important; }
  .ab2-system-highlight .ab2-system-promo-art { grid-column: 1 / -1 !important; min-height: 190px; }
  .ab-login-page { padding: 4px; }
  .ab-login-actions { align-items: stretch; flex-direction: column; }
  .ab-login-actions button { width: 100%; }
  .ab-login-actions a { padding: 5px; text-align: center; }
  .ab-changelog-entry { grid-template-columns: 1fr; }
  .ab-changelog-meta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ab-changelog-meta span { align-self: auto; }
  .ab-highscores-table-wrap { overflow-x: auto; }
  .ab-highscores-table { min-width: 0 !important; table-layout: fixed; }
  .ab-highscores-table .ab-highscores-flag,
  .ab-highscores-table .ab-highscores-points { display: none !important; }
  .ab-highscores-table .ab-highscores-rank { width: 34px !important; min-width: 34px; }
  .ab-highscores-table .ab-highscores-outfit { width: 54px !important; min-width: 54px; }
  .ab-highscores-table .ab-highscores-value { width: 58px !important; }
  .ab-highscores-table .ab-highscores-name { overflow-wrap: anywhere; }
  #Footer { margin-top: 10px !important; }
}

@media (max-width: 420px) {
  #AurabraLogoLink { width: min(198px, 92vw) !important; height: 132px !important; }
  #AurabraTopNav { top: 132px !important; }
  #Bodycontainer { padding-top: 224px; }
  #ContentColumn .BoxContent { padding-right: 3px !important; padding-left: 3px !important; }
  .ab-home-serverinfo { min-height: 286px; }
  .ab-home-serverinfo-copy { padding: 30px 14px; }
  .ab-home-serverinfo h1 { font-size: 23px !important; }
  .ab-home-serverinfo strong { font-size: 13px; }
  .ab-news-entry .NewsHeadline { padding: 8px; }
  .ab-news-entry .NewsHeadline h2 { font-size: 14px; }
  .ab-news-system-grid { gap: 6px; }
  .ab-si-strip { grid-template-columns: 1fr; }
  .ab-si-strip div { border-right: 0; border-bottom: 1px solid #36576c; }
  .ab-si-strip div:last-child { border-bottom: 0; }
  .ab2-anchor-nav { grid-template-columns: 1fr !important; }
  .ab2-system-detail { grid-template-columns: 1fr !important; }
  .ab2-system-number { font-size: 22px !important; }
  .ab3-side-art { height: 130px; }
}
