/* ID-Bridge connectivity hub. Re-skin of the website animation (Nov/Dec 2025) in brand colours:
   ink panel, magenta for data leaving the bridge, Rajdhani from the shell. Sits in a dark section in both themes.
   Hand-written: port_flagships.py leaves this folder alone. */
.ids-bridge-hub { --hub-line: rgba(255,255,255,.16); --hub-in: #F2F2F0; --hub-out: #E94BA2; --hub-card: rgba(255,255,255,.04);
  position: relative; margin-top: 26px; color: #F2F2F0; }
.ids-bridge-hub .hub__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ids-bridge-hub .hub__col h3 { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C8C9CE; margin: 0 0 12px; }
.ids-bridge-hub .hub__list { display: grid; gap: 10px; }
.ids-bridge-hub .hub__card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; font: inherit; color: inherit;
  background: var(--hub-card); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; transition: opacity .3s, border-color .3s, background .3s; }
.ids-bridge-hub button.hub__card { cursor: pointer; -webkit-appearance: none; appearance: none; }
.ids-bridge-hub .hub__card svg { flex: none; width: 26px; height: 26px; color: var(--hub-out); display: block; }
.ids-bridge-hub .hub__card span { min-width: 0; }
.ids-bridge-hub .hub__card b { display: block; font-size: 18px; font-weight: 700; line-height: 1.15; color: #FFFFFF; }
.ids-bridge-hub .hub__card small { display: block; font-size: 15px; line-height: 1.25; color: #C8C9CE; }
.ids-bridge-hub.is-running .hub__in .hub__card { opacity: .42; }
.ids-bridge-hub .hub__in .hub__card.is-active { opacity: 1; border-color: var(--hub-in); background: rgba(255,255,255,.09); }
.ids-bridge-hub.is-out .hub__out .hub__card { border-color: rgba(233,75,162,.7); background: rgba(233,75,162,.08); }
.ids-bridge-hub .hub__core { text-align: center; }
.ids-bridge-hub .hub__device { background: #FFFFFF; color: #2C2C2B; border-radius: 12px; padding: 18px 18px 16px; box-shadow: 0 12px 32px rgba(0,0,0,.35); transition: box-shadow .4s; }
.ids-bridge-hub.is-out .hub__device { box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 3px #AB005E, 0 0 28px 6px rgba(233,75,162,.35); }
.ids-bridge-hub .hub__device img { width: 100%; max-width: 230px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 auto 8px; display: block; }
.ids-bridge-hub .hub__device .hub__pict { width: 62%; max-width: 200px; margin: 4px auto 10px; display: block; color: #585857; }
.ids-bridge-hub .hub__device strong { display: block; font-size: 30px; font-weight: 700; color: #2C2C2B; line-height: 1.1; }
.ids-bridge-hub .hub__chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: #AB005E; color: #FFFFFF; font-size: 15px; font-weight: 600; }
.ids-bridge-hub .hub__chip svg { width: 16px; height: 16px; display: block; }
.ids-bridge-hub .hub__fx { margin-top: 14px; padding: 14px 16px; text-align: left; border: 1px solid rgba(255,255,255,.12); border-left: 3px solid #E94BA2;
  border-radius: 0 8px 8px 0; background: rgba(255,255,255,.03); font-size: 16px; }
.ids-bridge-hub .hub__fx h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E94BA2; }
.ids-bridge-hub .hub__fx p { margin: 4px 0 0; color: #C8C9CE; max-width: none; }
.ids-bridge-hub .hub__fx b { color: #FFFFFF; font-weight: 600; }
.ids-bridge-hub .hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.ids-bridge-hub .hub__wires path { fill: none; stroke: var(--hub-line); stroke-width: 2; transition: stroke .3s; }
.ids-bridge-hub .hub__wires path.is-in { stroke: var(--hub-in); }
.ids-bridge-hub .hub__wires path.is-out { stroke: var(--hub-out); }
.ids-bridge-hub .hub__wires .pkt text { font: 700 13px "Rajdhani", sans-serif; letter-spacing: .06em; }
.ids-bridge-hub .hub__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 16px; color: #C8C9CE; }
.ids-bridge-hub .hub__status { margin: 0; min-height: 1.5em; max-width: none; }
.ids-bridge-hub .hub__status b { color: #FFFFFF; }
.ids-bridge-hub .hub__toggle { flex: none; font: inherit; font-weight: 600; font-size: 15px; padding: 5px 14px; border-radius: 6px; cursor: pointer;
  color: #F2F2F0; background: transparent; border: 1px solid rgba(255,255,255,.3); }
.ids-bridge-hub .hub__toggle:hover { border-color: #FFFFFF; }
.ids-bridge-hub :focus-visible { outline: 2px solid #E94BA2; outline-offset: 2px; }

/* narrow: no wires, the cards light up in turn */
@media (max-width: 1100px) { .ids-bridge-hub .hub__grid { gap: 40px; } }
@media (max-width: 900px) {
  .ids-bridge-hub .hub__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ids-bridge-hub .hub__wires { display: none; }
  .ids-bridge-hub .hub__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ids-bridge-hub .hub__device img { max-width: 180px; }
}
@media (max-width: 420px) { .ids-bridge-hub .hub__card { padding: 9px 10px; gap: 9px; } .ids-bridge-hub .hub__card b { font-size: 16px; } .ids-bridge-hub .hub__card small { font-size: 14px; } }

/* the four advantages and the product photo, on the regular page around the hub */
.bridge-adv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin-top: 20px; }
.bridge-adv > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-c); }
.bridge-adv svg { width: 24px; height: 24px; color: var(--link); margin-top: 3px; }
.bridge-adv h3 { font-size: 20px; margin: 0 0 4px; }
.bridge-adv p { font-size: 17px; margin: 0; }
.bridge-photo { background: #FFFFFF; border-radius: var(--ids-radius-lg); padding: 24px; border: 1px solid var(--line-c); }
.bridge-photo img { margin: 0 auto; max-height: 320px; width: auto; }
@media (max-width: 700px) { .bridge-adv { grid-template-columns: minmax(0, 1fr); } }
.bridge-photo .hub__pict { width: 62%; max-width: 280px; margin: 24px auto; display: block; color: #585857; }