/* EVERY12 BUILD12g (Todd: "it should be an app that can also click outta there and to the rest of the site"): the "More of BRO"
 * group in the app's side nav (computers) and the grid at the top of the More tab (phones). App tokens (app.css). */
.ic-news { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M17 9h3v8a2 2 0 0 1-2 2M8 9h5M8 13h5M8 16h3'/%3E%3C/svg%3E"); }
.ic-feed { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8'/%3E%3Ccircle cx='6' cy='18' r='1.5' fill='black'/%3E%3C/svg%3E"); }
.ic-social { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c1.8.7 3 2.4 3.5 5.2'/%3E%3C/svg%3E"); }
.ic-games { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10a4 4 0 0 1 4 4v2.5a2.5 2.5 0 0 1-4.5 1.5L15 14H9l-1.5 2A2.5 2.5 0 0 1 3 14.5V12a4 4 0 0 1 4-4z'/%3E%3Cpath d='M8 10.5v3M6.5 12h3M15.5 11.5h.01M17.5 12.5h.01'/%3E%3C/svg%3E"); }
.ic-connect { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8.7 10.7l6.6-3.4M8.7 13.3l6.6 3.4'/%3E%3C/svg%3E"); }
.ic-trade { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E"); }
.ic-ai { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.3L20 10l-5.8 1.7L12 17l-2.2-5.3L4 10l5.8-1.7z'/%3E%3Cpath d='M18.5 16l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E"); }
.ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-ticket { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v3a2 2 0 0 0 0 4v3H3v-3a2 2 0 0 0 0-4z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.ic-gym { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7v10M17 7v10M4 9v6M20 9v6M7 12h10'/%3E%3C/svg%3E"); }
.ic-church { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2v5M10 4h4M5 21V12l7-5 7 5v9z'/%3E%3Cpath d='M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3C/svg%3E"); }
.ic-bible { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 4h12a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M5 18a2 2 0 0 1 2-2h12M12 7v6M9.5 9.5h5'/%3E%3C/svg%3E"); }
.ic-cross { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M10 3h4v5h5v4h-5v9h-4v-9H5V8h5z'/%3E%3C/svg%3E"); }
.ic-price { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='black'/%3E%3C/svg%3E"); }
.ic-user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.4 4.2-6.5 8-6.5s7 2.1 8 6.5'/%3E%3C/svg%3E"); }
.ic-ext { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }

/* side nav group (computers only: the phone tab bar keeps its 6 tabs) */
.nav-more12g { display: none; }
@media (min-width: 900px) {
  .nav { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .nav-more12g { display: block; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .nav-more12g h2 { margin: 0 0 6px 14px; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
  .nav .nav-more12g a { min-height: 38px; font-size: 0.875rem; font-weight: 500; gap: 10px; }
  .nav .nav-more12g a .ic { width: 18px; height: 18px; }
  .nav .nav-more12g a .ic-ext { width: 14px; height: 14px; margin-left: auto; opacity: .55; }
}

/* the More tab grid (every screen size; on phones it is the way out to the rest of bro.com) */
.more12g { margin: 4px 0 26px; }
.more12g > p { margin: 0 0 14px; color: var(--text2); }
.more12g ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .more12g ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .more12g ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.more12g a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; text-align: center; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface2), var(--surface)); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.875rem; line-height: 1.2; }
.more12g a .ic { width: 26px; height: 26px; color: var(--gold-text); }
.more12g a:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.more12g h2 { font-size: 1.35rem; margin: 0 0 6px; }
.more12g-sub { margin: 26px 0 12px; font-size: 1.35rem; }