/* 3omar.hs — shared styles for the 3D Prints hub (/3d-prints) and the Electronics hub (/electronics/).
   Uses unified-glass.css + site-shell.css tokens; dark default, html.light-mode for light. */
:root {
  /* platform badge colours: all >= 4.5:1 with white text */
  --p-makerworld: #047857; --p-printables: #c2410c; --p-thingiverse: #0369a1; --p-thangs: #1d4ed8;
  --p-cults3d: var(--brand); --p-myminifactory: #b91c1c; --p-github: #24292f; --p-hackster: #1d5fa8;
  --p-instructables: #b45309; --p-arduino_hub: #00707a; --p-hackaday: #1f2937; --p-adafruit: #111827; --p-sparkfun: #a61e1e;
  --hub-free: #047857;
}
.hub-hero { padding-block: 24px 4px; }
.hub-hero h1 { margin: 10px 0 6px; font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.2; }
.hub-hero p { margin: 0; color: var(--glass-text-muted); max-width: 75ch; }

/* search */
.hub-search { position: relative; margin-top: 18px; max-width: 760px; }
.hub-search__row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--control-border); background: var(--control-bg); }
.hub-search__row:focus-within { border-color: var(--glass-border-focus); box-shadow: var(--focus-ring); }
.hub-search__icon { display: inline-grid; place-items: center; width: 34px; color: var(--glass-text-muted); flex-shrink: 0; }
.hub-search__input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--glass-text-main); font: inherit; font-size: 1rem; outline: none; }
.hub-search__input::-webkit-search-cancel-button { display: none; }
.hub-search__clear { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--glass-text-muted); cursor: pointer; font-size: 1rem; }
.hub-search__clear:hover { background: var(--glass-bg-hover); color: var(--glass-text-main); }
.hub-search__btn { min-height: 40px; border-radius: 999px; padding-inline: 18px; }
.hub-suggest { position: absolute; z-index: 50; inset-inline: 0; top: calc(100% + 6px); max-height: 360px; overflow-y: auto; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--surface-base); box-shadow: var(--glass-shadow); }
.hub-suggest[hidden] { display: none; }
.hub-suggest a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none; color: var(--glass-text-main); border-bottom: 1px solid var(--glass-border); }
.hub-suggest a:last-child { border-bottom: 0; }
.hub-suggest a:hover, .hub-suggest a:focus-visible { background: var(--glass-bg-hover); }
.hub-suggest img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--glass-bg-subtle); flex-shrink: 0; }
.hub-suggest__t { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-suggest__m { font-size: .78rem; color: var(--glass-text-muted); }

/* platform ribbon */
.hub-ribbon { display: flex; align-items: center; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.hub-ribbon__label { font-size: .78rem; font-weight: 700; color: var(--glass-text-muted); flex-shrink: 0; }
.hub-pchip { display: inline-flex; align-items: stretch; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); overflow: hidden; }
.hub-pchip__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; background: none; color: var(--glass-text-main); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; min-height: 36px; }
.hub-pchip__btn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--accent)); }
.hub-pchip__ext { display: inline-grid; place-items: center; padding-inline: 10px; border-inline-start: 1px solid var(--glass-border); color: var(--glass-text-muted); text-decoration: none; font-size: .8rem; }
.hub-pchip__ext:hover { color: var(--glass-text-main); background: var(--glass-bg-hover); }
[dir="rtl"] .hub-pchip__ext span { display: inline-block; transform: scaleX(-1); }
.hub-pchip:hover { border-color: var(--dot, var(--accent)); }
.hub-pchip.is-active { border-color: var(--dot, var(--accent)); box-shadow: inset 0 0 0 1px var(--dot, var(--accent)); }
.hub-pchip.is-active .hub-pchip__btn { background: color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent); }

/* sponsor */
.hub-sponsor { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 16px 20px; border-radius: 18px; color: #f8fafc;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%); border: 1px solid #374151; position: relative; overflow: hidden; }
.hub-sponsor[hidden] { display: none; }
.hub-sponsor__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hub-sponsor__img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: #374151; flex-shrink: 0; }
.hub-sponsor__eyebrow { font-size: .72rem; font-weight: 800; color: var(--brand); }
.hub-sponsor__title { font-size: 1.1rem; font-weight: 800; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-sponsor__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .82rem; color: #cbd5e1; }
.hub-sponsor__price { background: var(--hub-free); color: #fff; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.hub-sponsor__meta a { color: #bfdbfe; }

/* controls */
.hub-controls { margin-top: 20px; display: grid; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.hub-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.hub-pill { flex-shrink: 0; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); color: var(--glass-text-muted); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.hub-pill:hover { color: var(--glass-text-main); background: var(--glass-bg-hover); }
.hub-pill[aria-pressed="true"] { background: var(--pill-gradient-active); color: #fff; border-color: transparent; }
.hub-pill--saved { margin-inline-start: auto; }
.hub-pill--saved[aria-pressed="true"] { background: #f59e0b; color: #111827; }
.hub-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--glass-border); padding-top: 12px; }
.hub-filters .select { width: auto; min-width: 150px; min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.hub-check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; min-height: 40px; padding-inline: 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); cursor: pointer; }
.hub-check input { width: 16px; height: 16px; accent-color: var(--accent-strong); }
.hub-count { margin-inline-start: auto; font-size: .86rem; color: var(--glass-text-muted); }

/* grid + cards */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; margin-top: 20px; min-height: 200px; }
.hub-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform .2s ease, border-color .2s ease; }
.hub-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.hub-card__media { position: relative; aspect-ratio: 3 / 2.04; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 25%, transparent), rgba(6,182,212,.18)); overflow: hidden; }
.hub-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .3s ease; }
.hub-card:hover .hub-card__media img { transform: scale(1.04); }
.hub-card__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.55); text-transform: uppercase; }
html.light-mode .hub-card__ph { color: rgba(67,56,202,.4); }
.hub-card__badges { position: absolute; z-index: 2; inset-inline: 10px; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-card__badges-end { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hub-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; color: #fff; background: #334155; box-shadow: 0 2px 4px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.hub-badge--platform { cursor: pointer; border: 0; font: inherit; font-size: .72rem; font-weight: 700; }
.hub-badge--price { max-width: none; background: #111827; font-variant-numeric: tabular-nums; }
.hub-badge--price.is-free { background: var(--hub-free); }
.hub-badge[data-p="makerworld"], .hub-pchip[data-p="makerworld"] { --dot: var(--p-makerworld); background-color: var(--p-makerworld); }
.hub-badge[data-p="printables"], .hub-pchip[data-p="printables"] { --dot: var(--p-printables); background-color: var(--p-printables); }
.hub-badge[data-p="thingiverse"], .hub-pchip[data-p="thingiverse"] { --dot: var(--p-thingiverse); background-color: var(--p-thingiverse); }
.hub-badge[data-p="thangs"], .hub-pchip[data-p="thangs"] { --dot: var(--p-thangs); background-color: var(--p-thangs); }
.hub-badge[data-p="cults3d"], .hub-pchip[data-p="cults3d"] { --dot: var(--p-cults3d); background-color: var(--p-cults3d); }
.hub-badge[data-p="myminifactory"], .hub-pchip[data-p="myminifactory"] { --dot: var(--p-myminifactory); background-color: var(--p-myminifactory); }
.hub-badge[data-p="github"], .hub-pchip[data-p="github"] { --dot: #8b949e; background-color: var(--p-github); }
.hub-badge[data-p="hackster"], .hub-pchip[data-p="hackster"] { --dot: var(--p-hackster); background-color: var(--p-hackster); }
.hub-badge[data-p="instructables"], .hub-pchip[data-p="instructables"] { --dot: var(--p-instructables); background-color: var(--p-instructables); }
.hub-badge[data-p="arduino_hub"], .hub-pchip[data-p="arduino_hub"] { --dot: var(--p-arduino_hub); background-color: var(--p-arduino_hub); }
.hub-badge[data-p="hackaday"], .hub-pchip[data-p="hackaday"] { --dot: #9ca3af; background-color: var(--p-hackaday); }
.hub-badge[data-p="adafruit"], .hub-pchip[data-p="adafruit"] { --dot: #f472b6; background-color: var(--p-adafruit); }
.hub-badge[data-p="sparkfun"], .hub-pchip[data-p="sparkfun"] { --dot: #f87171; background-color: var(--p-sparkfun); }
.hub-pchip { background-color: var(--glass-bg-subtle) !important; }
.hub-save { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; }
.hub-save:hover { background: rgba(0,0,0,.85); }
.hub-save[aria-pressed="true"] { background: #f59e0b; color: #111827; }
.hub-save[aria-pressed="true"] svg { fill: currentColor; }
.hub-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px; }
.hub-card__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.hub-card__creator { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--glass-text-muted); }
.hub-card__creator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-card__summary { margin: 0; font-size: .86rem; color: var(--glass-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.hub-chip { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); }
.hub-chip--flag { color: var(--accent); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
html.light-mode .hub-chip--flag { color: var(--brand); }
.hub-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--glass-border); font-size: .8rem; color: var(--glass-text-muted); font-variant-numeric: tabular-nums; }
.hub-card__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.hub-license { font-size: .74rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--glass-border); }
.hub-cta { display: flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); color: var(--glass-text-main); font-weight: 700; font-size: .88rem; text-decoration: none; text-align: center; }
.hub-cta:hover { background: var(--btn-gradient-primary); color: #fff; border-color: transparent; }
.hub-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.hub-action { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; }
html.light-mode .hub-action { color: var(--brand); }
.hub-action:hover { text-decoration: underline; }
.hub-action--report { color: var(--glass-text-muted) !important; margin-inline-start: auto; }

/* states */
.hub-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; border-radius: 18px; border: 1px dashed var(--glass-border); background: var(--glass-bg-subtle); }
.hub-empty h2 { margin: 0 0 6px; font-size: 1.2rem; }
.hub-empty p { margin: 0 auto 14px; max-width: 480px; color: var(--glass-text-muted); }
.hub-sentinel { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 56px; margin-top: 22px; }
.hub-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--glass-border); border-top-color: var(--accent-strong); animation: hubspin .8s linear infinite; }
.hub-spinner[hidden] { display: none; }
@keyframes hubspin { to { transform: rotate(360deg); } }
.hub-more[hidden] { display: none; }
.hub-cta-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; }
.hub-cta-block h2 { margin: 0 0 4px; font-size: 1.15rem; }
.hub-cta-block p { margin: 0; color: var(--glass-text-muted); }
.hub-note { margin-top: 18px; font-size: .84rem; color: var(--glass-text-muted); }

@media (max-width: 720px) {
  .hub-sponsor { flex-direction: column; align-items: stretch; }
  .hub-filters .select { flex: 1 1 140px; min-width: 0; }
  .hub-count { width: 100%; margin-inline-start: 0; }
  .hub-search__btn { padding-inline: 12px; }
}
@media (max-width: 420px) {
  .hub-search__icon { display: none; }
}