/* ============================================================
   TBB Homepage: section-specific styles
   Shared UI (buttons, cards, hero, stats, CTA) is in common.css,
   the SVG art in art.css and the carousels in carousel.css.
   Sections: Hero · Overview · Lab tools · Jobs · NewsFeed ·
             Test series · Community · About
   ============================================================ */

/* The hero art already ends in empty space, so the section after it
   needs less top padding than the others. */
.tbb-home .tbb-hero + .tbb-sec { padding-top: 32px; }

/* ── Feature rows (section head + animated art) ───────────────── */
.tbb-home .tbb-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.tbb-home .tbb-feature .tbb-head { margin-bottom: 0; }
.tbb-home .tbb-feature--flip .tbb-art { order: -1; }
.tbb-home .tbb-feature + .tbb-grid,
.tbb-home .tbb-feature + .tbb-empty { margin-top: 40px; }

/* ── Lab tools: category card with chip links ─────────────────── */
.tbb-home .tbb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}
.tbb-home .tbb-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 3px 8px;
  border: 1px solid var(--tbb-tag);
  border-radius: 4px;
  color: var(--tbb-muted);
  font-size: 12px;
  line-height: 1.5;
  transition: color .2s, border-color .2s;
}
.tbb-home .tbb-chip:hover { color: var(--tbb-brand); border-color: var(--tbb-edge-hover); }

/* ── Jobs: role card ──────────────────────────────────────────── */
.tbb-home .tbb-role__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tbb-home .tbb-role .tbb-link { margin-top: auto; padding-top: 14px; }
.tbb-home .tbb-role--soon,
.tbb-home .tbb-role--soon:hover { opacity: .6; border-color: var(--tbb-edge); }

/* ── NewsFeed: story card ─────────────────────────────────────── */
.tbb-home .tbb-ncard { padding: 0; overflow: hidden; }
.tbb-home .tbb-ncard__media { aspect-ratio: 16 / 9; overflow: hidden; }
.tbb-home .tbb-ncard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.tbb-home .tbb-ncard:hover .tbb-ncard__img { transform: scale(1.03); }
.tbb-home .tbb-ncard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}
.tbb-home .tbb-ncard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--tbb-subtle);
}
.tbb-home .tbb-ncard__title {
  margin-top: 12px;
  font-family: var(--tbb-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tbb-fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tbb-home .tbb-ncard__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tbb-home .tbb-ncard--text .tbb-ncard__excerpt { -webkit-line-clamp: 4; }
.tbb-home .tbb-ncard__foot {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  color: var(--tbb-subtle);
}
.tbb-home .tbb-empty { color: var(--tbb-muted); }

/* ── Test series: exam card ───────────────────────────────────── */
.tbb-home .tbb-exam__name {
  font-family: var(--tbb-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--tbb-fg);
}
.tbb-home .tbb-exam .tbb-card__text { margin-top: 10px; }
.tbb-home .tbb-exam__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* ── Community: WhatsApp channel card ─────────────────────────── */
.tbb-home .tbb-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
}
.tbb-home .tbb-channel .tbb-card__title { margin-top: 0; }
.tbb-home .tbb-channel__body { display: flex; flex-direction: column; }
.tbb-home .tbb-channel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.tbb-home .tbb-channel__foot .tbb-link { margin-top: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tbb-home .tbb-feature { grid-template-columns: minmax(0, 1fr); }
  .tbb-home .tbb-feature--flip .tbb-art { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tbb-home .tbb-ncard:hover .tbb-ncard__img { transform: none; }
}