/* ============================================================
   Home: the photo hero (broadcast.css .photo-hero), the member's slim
   row under it, then two columns: the challenge's top three and
   "Around the shop" on the left, the league table and what is on at
   the shop on the right. One column on phones. Square throughout.
   ============================================================ */

/* A hero with no photo behind it (the plain welcome, a member with no
   ranked lap): the dark surface, no gradient to darken. */
.photo-hero.is-plain { min-height: 220px; background: #101216; }
.photo-hero.is-plain::after { display: none; }
@media (max-width: 640px) {
  .photo-hero.is-plain .photo-hero-in { padding-top: 40px; }
}

/* ---------- the member's row ---------- */
.home-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 4px;
  margin-top: 6px;
}
.home-strip-cell { min-width: 0; padding: 12px 16px; background: #101216; }
.home-strip-label { font-family: var(--font-text); font-style: normal; font-weight: 500; font-size: 0.85rem; color: var(--ink-faint); }
.home-strip-line {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #fff;
}
.home-strip-line b { font-weight: 700; }
.home-strip-line a:hover { color: var(--accent); }
.home-strip-quiet { font-family: var(--font-text); font-weight: 500; font-size: 0.9rem; color: var(--ink-muted); }
.home-strip-sub { margin-top: 4px; font-size: 0.85rem; color: var(--ink-muted); }
.home-strip .home-bar { display: block; height: 4px; margin-top: 6px; border-radius: 0; }
.home-strip .home-bar > span { border-radius: 0; }
.home-tier-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--tone);
  vertical-align: 0;
}
.home-delta {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--accent-soft);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  vertical-align: 3px;
}
.home-delta.is-down { background: var(--surface-2); color: var(--ink-muted); }
@media (max-width: 900px) {
  .home-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-strip-hello { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .home-strip-hello .home-strip-line, .home-strip-hello .home-strip-sub { margin-top: 0; }
}
@media (max-width: 640px) {
  .home-strip { grid-template-columns: minmax(0, 1fr); margin-inline: -1.25rem; }
}

/* ---------- the two columns ---------- */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.home-col { display: grid; align-content: start; gap: 26px; min-width: 0; }
@media (max-width: 900px) {
  .home-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.home-head .section-title a:hover { color: var(--accent); }
.home-head > a { font-size: 0.9rem; }
.home-head-note { font-size: 0.95rem; color: var(--ink-faint); }
.home-quiet { margin-top: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); }
.home-more { margin-top: 10px; font-size: 0.9rem; }

/* "Around the shop": one line each, name and time in bold. */
.home-feed li + li { margin-top: 8px; }
.home-feed a { display: block; font-size: 0.95rem; line-height: 1.45; color: #c3c8cf; }
.home-feed a:hover { color: #fff; }
.home-feed b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }

/* The league block: champion or leader, then the next two. */
.home-champ { display: grid; gap: 2px; padding: 16px 20px; background: #101216; }
.home-champ-what { font-size: 0.92rem; color: var(--ink-muted); }
.home-champ-who {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  color: #fff;
  overflow-wrap: anywhere;
}
.home-champ-who a:hover { color: var(--accent); }
.home-mini {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
}
.home-mini-pos { padding-left: 4px; color: var(--ink-faint); }
.home-mini-name { min-width: 0; overflow-wrap: anywhere; }
.home-mini-name a:hover { color: var(--accent); }
.home-mini-pts { padding-right: 4px; font-variant-numeric: tabular-nums; }
.home-mini.is-you .home-mini-name::after { content: " (you)"; font-family: var(--font-text); font-weight: 500; font-size: 0.8rem; color: var(--ink-faint); }

/* What is on: a title, when, and the kind under it. */
.home-happening li { padding: 9px 0; border-bottom: 1px solid var(--edge); }
.home-happening li:first-child { padding-top: 0; }
.home-happening-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.home-happening-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: #fff; }
.home-happening-title a:hover { color: var(--accent); }
.home-when { font-size: 0.85rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.home-happening-detail { margin-top: 2px; font-size: 0.85rem; color: var(--ink-muted); }

/* The footer line: the way onto a rig, and for a visitor the way in. */
.home-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--edge); }
.home-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-left: auto; }
.home-foot-actions .btn { margin-left: 0; }
@media (max-width: 640px) {
  .home-foot-actions { margin-left: 0; }
}