/* ==========================================================================
   Build log
   Sections: head · tabs/filter bar · featured · feed
   ========================================================================== */

.loghead { padding-bottom: 40px; }

.loglead {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.loglead .phead__lead { max-width: 40ch; }

.loglead__sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Tabs + game filter ------------------------------------------------------- */

.logbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease);
}

.tab:hover { color: var(--text); }

.tab.is-on {
  color: var(--text);
  border-bottom-color: var(--red);
}

.tab small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-4);
}

.logbar__game {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

/* Featured ----------------------------------------------------------------- */

.featwrap { padding: 48px var(--gutter) 20px; }

.feat {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feat__img {
  height: 100%;
  min-height: 420px;
  aspect-ratio: auto;
}

.feat__body {
  gap: 16px;
  padding: 36px;
}

.feat__title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.feat__excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Feed --------------------------------------------------------------------- */

.logwall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 20px var(--gutter) var(--sec-y);
}

.logwall__more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.rem-t,
.rem-m { display: none; }

/* Entries past the first nine wait for "Load older" (site.js adds .is-all, or ?all=1).
   The --tm / --m variants hide the button where nothing more is waiting. */
.logwall:not(.is-all) > .post--more { display: none; }

.logwall__more--tm,
.logwall__more--m { display: none; }

.logwall__empty { grid-column: 1 / -1; }

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 1200px) {
  .loghead { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 32px; }
  .loglead { align-items: flex-start; }
  .loglead .phead__lead { max-width: 52ch; font-size: 18px; text-align: left; }
}

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat__img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .feat__body { padding: 24px; }
  .feat__title { font-size: 26px; }
  .logwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logwall:not(.is-all) > .post:nth-child(9) { display: none; }
  .logwall__more--tm { display: flex; }
  .rem-d { display: none; }
  .rem-t { display: inline; }
  .post__title--md { font-size: 18px; }
}

@media (max-width: 600px) {
  .tab { height: 40px; padding: 0 12px; font-size: 12px; }
  .logbar__game { flex-wrap: wrap; }
  .featwrap { padding-top: 28px; padding-bottom: 0; }
  .feat__body { gap: 8px; padding: 16px 18px 18px; }
  .feat__title { font-size: 17px; font-weight: 700; line-height: 1.25; text-transform: none; }
  .feat__excerpt { display: none; }
  .logwall { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .logwall:not(.is-all) > .post:nth-child(n + 6) { display: none; }
  .logwall__more--m { display: flex; }
  .rem-t { display: none; }
  .rem-m { display: inline; }
  .post__body--pad { padding: 16px 18px 18px; }
  .post__title--md { font-size: 17px; }
}