/* ═══════════════════════════════════════════════════════════════════════
   Homepage product lines — blocks kit_groups, project_cards, schools_bulk
   and parts_hub (app/Views/dk/blocks/). Homepage plan, 16 Sep 2026:
   boards → kits → projects → schools → parts.

   Built on the site tokens (--bg2, --fg, --primary, --border …) so every
   section follows the light/dark switch. The one exception is the Our
   Boards band (boards-home.css), which is dark in both themes on purpose.
   Schools gets a blue tint so the B2B section reads as a different kind of
   offer from the shop sections either side of it. Scoped under .dkh-.
   ═══════════════════════════════════════════════════════════════════════ */
.dkh-sec { padding: 72px 0; }
.dkh-sec + .dkh-sec { padding-top: 24px; }
.dkh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dkh-lede { margin: 10px 0 0; max-width: 620px; font-size: 15px; line-height: 1.65; color: var(--fg2); }
.dkh-more { display: inline-block; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); text-decoration: none; }
.dkh-more:hover { color: var(--primary); }
.dkh-note { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px;
  border: 1px dashed var(--border); border-radius: 10px; font-size: 14px; color: var(--fg2); }
.dkh-note a { color: var(--primary); font-weight: 700; text-decoration: none; }
.dkh-note a:hover { text-decoration: underline; }

/* ── Kits ── */
.dkh-tabs { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.dkh-tabs.is-ready { display: flex; }
.dkh-tab { font: 600 13px/1 'DM Sans', system-ui, sans-serif; color: var(--fg2); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: border-color .2s, color .2s; }
.dkh-tab span { margin-left: 6px; font-size: 11px; color: var(--fg3); }
.dkh-tab:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--fg); }
.dkh-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.dkh-tab[aria-selected="true"] span { color: inherit; opacity: .8; }
.dkh-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dkh-panel + .dkh-panel { margin-top: 36px; }
.dkh-tabs.is-ready ~ .dkh-panel + .dkh-panel { margin-top: 0; }
.dkh-panel__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.dkh-panel__name { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.dkh-panel__sub { font-size: 13.5px; color: var(--fg3); }
/* The tab already names the group; the heading is for the no-JS stack. */
.dkh-tabs.is-ready ~ .dkh-panel .dkh-panel__name { display: none; }
.dkh-kits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dkh-kits__grid .dk-kit-card { height: 100%; display: flex; flex-direction: column; }
.dkh-kits__grid .dk-kit-card__body { flex: 1; display: flex; flex-direction: column; }
.dkh-kits__grid .dk-kit-card__footer { margin-top: auto; }

/* ── Projects ── */
.dkh-proj__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dkh-proj { --pj: #64748b; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.dkh-proj::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pj); }
.dkh-proj:hover { border-color: var(--pj); transform: translateY(-3px); box-shadow: 0 12px 28px var(--shadow); }
.dkh-proj[data-pj="sensing"]    { --pj: #0d9488; }
.dkh-proj[data-pj="display"]    { --pj: #4f46e5; }
.dkh-proj[data-pj="motion"]     { --pj: #d97706; }
.dkh-proj[data-pj="automation"] { --pj: #e11d48; }
.dkh-proj[data-pj="network"]    { --pj: #0f9d63; }
.dkh-proj__top { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.dkh-proj__tag { color: var(--pj); font-weight: 700; }
.dkh-proj__lvl { color: var(--fg3); }
.dkh-proj__lvl::before { content: "·"; margin-right: 6px; }
.dkh-proj__title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.dkh-proj__title a { color: var(--fg); text-decoration: none; }
/* Whole card opens the project; the kit link sits above that layer. */
.dkh-proj__title a::after { content: ""; position: absolute; inset: 0; }
.dkh-proj__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg2); }
.dkh-proj__with { position: relative; z-index: 1; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border2);
  display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.dkh-proj__with span { color: var(--fg3); }
.dkh-proj__with a { color: var(--primary); font-weight: 700; text-decoration: none; }
.dkh-proj__with a:hover { text-decoration: underline; }

/* ── Schools & Workshops ── */
.dkh-schools__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center;
  padding: 44px; border-radius: 16px; border: 1px solid color-mix(in srgb, #2f7df6 30%, var(--border));
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, #2f7df6 16%, transparent), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    var(--bg2); }
.dkh-schools .dk-section-label { color: #2f7df6; }
.dkh-schools__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dkh-schools__board { display: block; margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--fg2); text-decoration: none; }
.dkh-schools__board span { display: inline-block; margin-right: 8px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 5px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.dkh-schools__board:hover { color: var(--fg); }
.dkh-schools__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dkh-schools__tile { display: flex; gap: 14px; padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.dkh-schools__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  color: #2f7df6; background: color-mix(in srgb, #2f7df6 12%, transparent); }
.dkh-schools__ico svg { width: 22px; height: 22px; }
.dkh-schools__tile h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--fg); }
.dkh-schools__tile h3 a { color: inherit; text-decoration: none; }
.dkh-schools__tile h3 a:hover { color: var(--primary); }
.dkh-schools__tile p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg2); }

/* ── Parts ── */
.dkh-parts__wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.dkh-parts__wrap--solo { grid-template-columns: minmax(0, 1fr); }
.dkh-parts__sub { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); font-weight: 700; }
/* Picture tiles (20 Oct 2026). The category pictures are 3:2 banners with
   the category name painted on them, and a 40px square thumbnail threw all
   of that away. Each tile now shows the whole banner, four across, with the
   name and product count underneath. Eight categories make two rows that sit
   level with the best-seller list; twelve make three. */
.dkh-parts__catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dkh-parts__wrap--solo .dkh-parts__catgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dkh-cat { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.dkh-cat:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .28); }
.dkh-cat__img { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg3);
  border-bottom: 1px solid var(--border2); color: var(--fg3); font-size: 28px; }
.dkh-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dkh-cat:hover .dkh-cat__img img { transform: scale(1.04); }
.dkh-cat__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 12px; }
.dkh-cat__name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fg); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dkh-cat__n { font-size: 10.5px; letter-spacing: .04em; color: var(--fg3); }
/* Categories that did not get a tile (the block shows eight of twelve by
   default) sit under the grid as chips, so every category is still one click
   away and the space below two rows of tiles is not left empty. */
.dkh-parts__rest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.dkh-parts__rest-l { margin-right: 2px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
.dkh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--fg2); text-decoration: none; transition: border-color .2s, color .2s; }
.dkh-chip:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--fg); }
.dkh-chip .mono { font-size: 10.5px; font-weight: 400; color: var(--fg3); }
.dkh-parts__rest .dkh-more { margin: 0 0 0 auto; }
.dkh-best { list-style: none; margin: 0; padding: 4px 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; }
.dkh-best__row { display: grid; grid-template-columns: auto 50px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 16px; }
.dkh-best__row + .dkh-best__row { border-top: 1px solid var(--border2); }
.dkh-best__rank { width: 16px; font-size: 11px; color: var(--fg3); text-align: right; }
.dkh-best__img { width: 50px; height: 50px; border-radius: 10px; overflow: hidden; background: var(--bg3); }
.dkh-best__img img { width: 100%; height: 100%; object-fit: cover; }
.dkh-best__name { font-size: 14px; line-height: 1.4; color: var(--fg); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dkh-best__name:hover { color: var(--primary); }
.dkh-best__price { font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.dkh-best__add { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg);
  color: var(--primary); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dkh-best__add:hover { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.dkh-note--parts { justify-content: center; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .dkh-kits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dkh-schools__wrap { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 28px; }
  .dkh-parts__wrap { grid-template-columns: minmax(0, 1fr); }
  .dkh-parts__catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dkh-parts__wrap--solo .dkh-parts__catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dkh-kits__grid, .dkh-proj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dkh-parts__catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dkh-sec { padding: 52px 0; }
  .dkh-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dkh-kits__grid, .dkh-proj__grid, .dkh-schools__tiles { grid-template-columns: minmax(0, 1fr); }
  .dkh-parts__catgrid, .dkh-parts__wrap--solo .dkh-parts__catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dkh-schools__wrap { padding: 22px 16px; border-radius: 12px; }
  .dkh-schools__cta .dk-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .dkh-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .dkh-tab { flex: none; }
  /* Six stacked project cards is three phone screens; four make the point
     and "All projects" is right above them. */
  .dkh-proj:nth-child(n+5) { display: none; }
}

/* ── Homepage hero, compact (18 Sep 2026) ────────────────────────────────
   The hero was 875px on desktop and 770px on a phone: a whole screen of
   headline before the first product line. Same content, less air — the
   boards section now starts above the fold on a laptop. Scoped to
   .dk-hero--home so the /kits, /custom-kit and /about heroes keep theirs. */
.dk-hero--home .dk-hero__content { padding: 44px 0 48px; }
.dk-hero--home .dk-live-badge { margin-bottom: 18px; padding: 5px 14px; }
.dk-hero--home h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; }
.dk-hero--home .dk-hero__sub { font-size: 16px; line-height: 1.65; max-width: 560px; margin-bottom: 22px; }
.dk-hero--home .dk-search { margin-bottom: 18px; }
.dk-hero--home .dk-tags { margin-bottom: 18px; }
.dk-hero--home .dk-hero-titan { margin-top: 18px; padding: 13px 16px; }
.dk-hero--home .dk-hero-titan__head { margin-bottom: 10px; }
.dk-hero--home .dk-hero-titan__avatar { width: 30px; height: 30px; font-size: 14px; }
@media (max-width: 900px) {
  .dk-hero--home .dk-hero__content { padding: 32px 0 36px; }
  .dk-hero--home h1 { font-size: clamp(29px, 7.6vw, 38px); }
  .dk-hero--home .dk-hero__sub { font-size: 14.5px; margin-bottom: 18px; }
  .dk-hero--home .dk-live-badge { margin-bottom: 14px; }
}
@media (max-width: 480px) {
  /* Two short buttons side by side instead of stacked full width, and a
     tighter Titan card: between them the phone hero loses another ~110px. */
  /* 20px side padding made the pair 361px wide in a 358px column, so they
     wrapped onto two rows by three pixels. */
  .dk-hero--home .dk-hero__actions { gap: 8px; }
  .dk-hero--home .dk-hero__actions .dk-btn { flex: 0 1 auto; padding-left: 15px; padding-right: 15px; }
  .dk-hero--home .dk-hero-titan { margin-top: 14px; padding: 12px 13px; }
  .dk-hero--home .dk-hero-titan__head { margin-bottom: 8px; gap: 10px; }
  .dk-hero--home .dk-hero-titan__form { flex-direction: row; }
  .dk-hero--home .dk-hero-titan__go { width: auto; padding-left: 14px; padding-right: 14px; }
}