/* VideoNest — Integration Animation v2 */

.ia-section {
  padding: 2.5rem 0 3rem;
  background: #F9FAFB;
}

.ia-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Cards */
.ia-card {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  position: relative;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.ia-card.ia-flash,
.ia-card.ia-published {
  border-color: var(--glow-border, rgba(254,72,0,0.45));
  box-shadow: 0 0 0 4px var(--glow-shadow, rgba(254,72,0,0.07)), 0 4px 20px var(--glow-outer, rgba(254,72,0,0.1));
}
.ia-left {
  width: 190px; flex-shrink: 0; height: 255px;
  padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.ia-right {
  flex: 1; min-width: 0; height: 255px;
  padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}

/* Header row */
.ia-header { display: flex; align-items: center; gap: 0.625rem; }
.ia-logo {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ia-logo img { width: 100%; height: 100%; object-fit: contain; }
.ia-name { font-size: 0.8125rem; font-weight: 700; color: #111827; line-height: 1.2; }
.ia-sub  { font-size: 0.6rem; color: #9ca3af; margin-top: 1px; }

/* Synced badge — bottom of destination card */
.ia-synced {
  flex-shrink: 0; align-self: center;
  font-size: 0.55rem; font-weight: 700; color: #16a34a;
  background: rgba(22,163,74,0.09); border: 1px solid rgba(22,163,74,0.18);
  border-radius: 99px; padding: 3px 10px;
  opacity: 0; transition: opacity 0.3s ease; white-space: nowrap;
  letter-spacing: 0.02em; margin-top: auto;
}
.ia-card.ia-published .ia-synced { opacity: 1; }

/* Queue section */
.ia-queue {
  flex: 1; border-top: 1px solid #F3F4F6; padding-top: 0.5rem;
  overflow: hidden; display: flex; flex-direction: column; gap: 0;
}
.ia-queue-label {
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: #d1d5db; margin-bottom: 0.4rem; flex-shrink: 0;
}

/* Source queue items (outgoing) */
.ia-qi {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.375rem; border-radius: 6px;
  border-left: 2.5px solid transparent;
  transition: opacity 0.3s, transform 0.3s, border-color 0.25s, background 0.25s;
  opacity: 0; transform: translateY(6px);
}
.ia-qi.visible  { opacity: 1; transform: translateY(0); }
.ia-qi.exiting  { opacity: 0; transform: translateY(-6px); }
.ia-qi.entering { opacity: 0; transform: translateY(8px); }
.ia-qi.ia-sending { border-left-color: #FE4800; background: rgba(254,72,0,0.04); }

.ia-qi-thumb {
  width: 42px; height: 26px; border-radius: 4px; flex-shrink: 0;
  position: relative; overflow: hidden; background: #E5E7EB;
}
.ia-qi-thumb::after {
  content: '▶'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: rgba(255,255,255,0.7);
}
.ia-qi.ia-sending .ia-qi-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(254,72,0,0.35); z-index: 1;
}
.ia-qi-meta { flex: 1; min-width: 0; }
.ia-qi-title {
  font-size: 0.5875rem; font-weight: 600; color: #374151;
  overflow: hidden; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ia-qi-cat  { font-size: 0.5rem; color: #9ca3af; margin-top: 1px; }
.ia-qi-sending-label {
  display: none; align-items: center; gap: 3px;
  font-size: 0.5rem; font-weight: 700; color: #FE4800; margin-top: 2px;
}
.ia-qi.ia-sending .ia-qi-sending-label { display: flex; }
.ia-qi-spinner {
  width: 5px; height: 5px; border-radius: 50%; background: #FE4800;
  animation: ia-spin 0.7s ease-in-out infinite alternate;
}
@keyframes ia-spin { from { opacity:.3; transform:scale(.7); } to { opacity:1; transform:scale(1); } }

/* Received items (destination) */
.ia-ri {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.3rem; border-radius: 5px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease; flex-shrink: 0;
}
.ia-ri.visible { opacity: 1; transform: translateY(0); }
.ia-ri.exiting { opacity: 0; transform: translateY(6px); }

.ia-ri-thumb {
  width: 38px; height: 24px; border-radius: 3px;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.ia-ri-thumb::after {
  content: '▶'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; color: rgba(255,255,255,0.75);
}
.ia-ri-title {
  flex: 1; min-width: 0; font-size: 0.5625rem; font-weight: 600;
  color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-ri-check { font-size: 0.5rem; font-weight: 800; color: #16a34a; flex-shrink: 0; }

/* Connector */
.ia-connector {
  flex-shrink: 0; width: 64px;
  display: flex; align-items: center; align-self: center;
}
.ia-conn-svg { width: 64px; height: 16px; overflow: visible; }
.ia-conn-bg {
  fill: none; stroke: #E5E7EB; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ia-conn-overlay { fill: none; stroke: transparent; stroke-linecap: butt; }
.ia-conn-dot     { fill: #1B4FE8; opacity: 0; r: 5; }

/* ─── Hero wrap — transparent container, cards stand alone ─── */
.ia-hero-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  min-height: 280px;
}
.ia-hero-wrap::after { display: none; }
.ia-hero-wrap .ia-wrap {
  max-width: 700px;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
}
.ia-hero-wrap .ia-left,
.ia-hero-wrap .ia-right { flex: 1; width: auto; height: 310px; }

/* Dark card overrides — each card is self-contained */
.ia-hero-wrap .ia-card {
  background: #1A1A20;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.ia-hero-wrap .ia-card.ia-flash,
.ia-hero-wrap .ia-card.ia-published {
  border-color: var(--glow-border, rgba(254,72,0,0.5));
  box-shadow: 0 0 0 4px var(--glow-shadow, rgba(254,72,0,0.08)), 0 4px 20px var(--glow-outer, rgba(254,72,0,0.12));
}
.ia-hero-wrap .ia-name        { color: rgba(255,255,255,0.9); }
.ia-hero-wrap .ia-screen-header .ia-name { color: rgba(255,255,255,0.9); }
.ia-hero-wrap .ia-sub         { color: rgba(255,255,255,0.4); }
.ia-hero-wrap .ia-queue       { border-top-color: rgba(255,255,255,0.08); }
.ia-hero-wrap .ia-queue-label { color: rgba(255,255,255,0.3); }
.ia-hero-wrap .ia-qi-title    { color: rgba(255,255,255,0.82); }
.ia-hero-wrap .ia-qi-cat      { color: rgba(255,255,255,0.38); }
.ia-hero-wrap .ia-ri-title    { color: rgba(255,255,255,0.82); }
.ia-hero-wrap .ia-ri-check    { color: #4ade80; }
.ia-hero-wrap .ia-synced      { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.22); }
.ia-hero-wrap .ia-conn-bg     { stroke: rgba(255,255,255,0.25); }

/* Mobile: hero-wrap stacks below text, full-width */
@media (max-width: 1000px) {
  .ia-hero-wrap { margin-top: 2rem; border-radius: 10px; }
}

/* Tablet / large phone — remove outer box, cards get full space */
@media (max-width: 768px) {
  .ia-hero-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 1rem 0;
    min-height: auto;
  }
  .ia-hero-wrap::after { display: none; }
  .ia-hero-wrap .ia-wrap { padding: 0; }
  .ia-hero-wrap .ia-left { width: 44%; min-width: 120px; flex-shrink: 1; }
  .ia-hero-wrap .ia-right { min-width: 0; }
  .ia-hero-wrap .ia-connector { width: 22px; }
  .ia-hero-wrap .ia-conn-svg  { width: 22px; }
  .ia-hero-wrap .ia-synced { font-size: 0.55rem; padding: 2px 8px; }
  .ia-hero-wrap .ia-left,
  .ia-hero-wrap .ia-right { height: auto; min-height: 220px; padding: 0.75rem; }
  .ia-hero-wrap .ia-logo { width: 32px; height: 32px; border-radius: 7px; }
  .ia-hero-wrap .ia-name { font-size: 0.75rem; }
  .ia-hero-wrap .ia-sub  { font-size: 0.5625rem; }
  .ia-hero-wrap .ia-qi-thumb { width: 38px; height: 24px; }
  .ia-hero-wrap .ia-ri-thumb { width: 34px; height: 21px; }
  .ia-hero-wrap .ia-qi-title { font-size: 0.5625rem; }
  .ia-hero-wrap .ia-ri-title { font-size: 0.5375rem; }
  .ia-hero-wrap .ia-queue-label { font-size: 0.475rem; }
}

/* Small phone — tighter but still no outer box */
@media (max-width: 480px) {
  .ia-hero-wrap { padding: 0.75rem 0; }
  .ia-hero-wrap .ia-left { width: 42%; min-width: 110px; }
  .ia-hero-wrap .ia-left,
  .ia-hero-wrap .ia-right { min-height: 190px; padding: 0.5rem; gap: 0.375rem; }
  .ia-hero-wrap .ia-connector { width: 16px; }
  .ia-hero-wrap .ia-conn-svg  { width: 16px; }
  .ia-hero-wrap .ia-logo { width: 28px; height: 28px; border-radius: 6px; }
  .ia-hero-wrap .ia-name { font-size: 0.6875rem; }
  .ia-hero-wrap .ia-qi-thumb { width: 32px; height: 20px; }
  .ia-hero-wrap .ia-ri-thumb { width: 30px; height: 19px; }
  .ia-hero-wrap .ia-qi { padding: 0.2rem 0.25rem; gap: 0.375rem; }
  .ia-hero-wrap .ia-ri { padding: 0.2rem 0.25rem; gap: 0.3rem; }
  .ia-hero-wrap .ia-qi-title { font-size: 0.525rem; -webkit-line-clamp: 1; }
  .ia-hero-wrap .ia-ri-title { font-size: 0.5rem; }
  .ia-hero-wrap .ia-synced { font-size: 0.5rem; padding: 2px 7px; }
}

/* ─── 3-Node signage layout ─── */

/* 3-node wrap — wider to fit 3 equal cards */
.ia-wrap-3 { max-width: 820px; }

/* Equal-width cards — each fills its share of available space */
.ia-wrap-3 .ia-left,
.ia-wrap-3 .ia-mid-card,
.ia-wrap-3 .ia-screen-card {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 310px;
}

/* Compact connectors between 3 equal cards */
.ia-wrap-3 .ia-connector { width: 22px; flex-shrink: 0; }
.ia-wrap-3 .ia-conn-svg  { width: 22px; }

/* Mid card — signage relay node */
.ia-mid-card {
  height: 310px;
  padding: 0.875rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.375rem;
}
.ia-relay-bar {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.4rem;
  display: flex; align-items: center; gap: 5px;
}
.ia-relay-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 4px rgba(34,197,94,0.5);
  flex-shrink: 0;
}
.ia-relay-txt {
  font-size: 0.4375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.3);
}

/* Screen card — equal width, realistic monitor */
.ia-screen-card {
  height: 310px;
  padding: 0.875rem 0.875rem;
  display: flex; flex-direction: column; gap: 0.375rem;
}
/* Single-line header: "On Screen" ←→ live status */
.ia-screen-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-shrink: 0; margin-bottom: 0.25rem;
}
.ia-screen-header .ia-name { font-size: 0.8125rem; font-weight: 700; color: #111827; }

/* Monitor hardware */
.ia-monitor {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
}
.ia-monitor-frame {
  background: rgba(255,255,255,0.06);
  border: 3px solid rgba(255,255,255,0.22);
  border-radius: 9px;
  padding: 5px;
  width: 100%;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.ia-monitor-frame.ia-screen-active {
  border-color: var(--glow-border, rgba(254,72,0,0.55));
  box-shadow: 0 0 0 4px var(--glow-shadow, rgba(254,72,0,0.1)), 0 6px 24px var(--glow-outer, rgba(254,72,0,0.14));
}
.ia-screen-display {
  width: 100%; aspect-ratio: 16/9;
  background: #0a0a0e;
  border-radius: 4px; overflow: hidden;
  position: relative;
  transition: background 0.65s ease;
}
/* Play button */
.ia-screen-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 0; height: 0; z-index: 2;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent rgba(255,255,255,0.5);
}
/* Now Playing — lower-third overlay on screen display */
.ia-screen-lower-third {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.82));
  padding: 18px 6px 5px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ia-screen-lower-third.ia-visible { opacity: 1; }
.ia-now-playing-label {
  font-size: 0.35rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55); margin-bottom: 2px;
}
.ia-screen-title {
  font-size: 0.4875rem; font-weight: 600;
  color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
/* Progress bar at bottom of screen */
.ia-screen-bar-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,0.1); z-index: 3;
}
.ia-screen-bar-fill {
  height: 100%; width: 34%;
  background: #FE4800; border-radius: 1px;
}
/* Monitor stand */
.ia-monitor-neck {
  width: 20%; height: 7px;
  background: rgba(255,255,255,0.12);
  margin: 0 auto;
}
.ia-monitor-base {
  width: 48%; height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 3px 3px;
  margin: 0 auto;
}
/* Status row below monitor */
.ia-screen-status {
  display: flex; align-items: center; gap: 5px;
  padding: 0 1px; margin-top: 0.375rem;
  flex-shrink: 0;
}
.ia-screen-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.35s, box-shadow 0.35s;
  flex-shrink: 0;
}
.ia-screen-live-dot.ia-live {
  background: #22C55E;
  box-shadow: 0 0 5px rgba(34,197,94,0.65);
}
.ia-screen-live-text {
  font-size: 0.4375rem; color: rgba(255,255,255,0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── 3-node mobile: vertical stack ─── */
@media (max-width: 900px) {
  .ia-3node-wrap { margin-top: 2rem; }

  .ia-wrap-3 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Cards go full width, auto height */
  .ia-wrap-3 .ia-left,
  .ia-wrap-3 .ia-mid-card,
  .ia-wrap-3 .ia-screen-card {
    flex: none;
    width: 100% !important;
    height: auto;
  }
  .ia-wrap-3 .ia-left    { min-height: 180px; }
  .ia-wrap-3 .ia-mid-card { min-height: 150px; }
  .ia-wrap-3 .ia-screen-card { min-height: 160px; }
  /* Connectors become vertical arrows */
  .ia-wrap-3 .ia-connector {
    width: 100%;
    height: 22px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .ia-wrap-3 .ia-conn-svg { display: none; }
  .ia-wrap-3 .ia-connector::after {
    content: '';
    display: block;
    width: 1.5px;
    height: 22px;
    background: rgba(255,255,255,0.18);
  }
  /* Monitor frame narrower so it doesn't stretch too wide */
  .ia-monitor-frame { max-width: 240px; margin: 0 auto; }
}

/* ─── Partner logo background classes ─── */

/* White background logos */
.ia-logo-brightsign,
.ia-logo-easysignage,
.ia-logo-embed-signage,
.ia-logo-firmchannel,
.ia-logo-mediatile,
.ia-logo-novisign,
.ia-logo-optisigns,
.ia-logo-play-ds,
.ia-logo-screencloud,
.ia-logo-signagelive,
.ia-logo-wallboard,
.ia-logo-youtube,
.ia-logo-msn,
.ia-logo-dropbox,
.ia-logo-gdrive,
.ia-logo-apple-news,
.ia-logo-api,
.ia-logo-apple-podcasts,
.ia-logo-backblaze,
.ia-logo-box,
.ia-logo-buffer,
.ia-logo-contentful,
.ia-logo-drupal,
.ia-logo-feedly,
.ia-logo-ftp,
.ia-logo-ghost,
.ia-logo-google-news,
.ia-logo-instagram,
.ia-logo-make,
.ia-logo-newsbreak,
.ia-logo-onedrive,
.ia-logo-outbrain,
.ia-logo-pluto-tv,
.ia-logo-sanity,
.ia-logo-shopify,
.ia-logo-smartnews,
.ia-logo-strapi,
.ia-logo-taboola,
.ia-logo-tubi,
.ia-logo-wasabi,
.ia-logo-webhooks     { background: #fff; border: 1px solid #E5E7EB; padding: 4px; }

/* Dark/coloured background logos */
.ia-logo-vn           { background: #fff; border: 1.5px solid #E5E7EB; padding: 5px; }
.ia-logo-vn img       { filter: brightness(0); }
.ia-logo-fire-tv      { background: #0F1111; padding: 6px; }
.ia-logo-roku         { background: #662D91; padding: 6px; }
.ia-logo-spotify      { background: #191414; padding: 6px; }
.ia-logo-apple        { background: #000; padding: 5px; }
.ia-logo-s3           { background: #232F3E; padding: 5px; }
.ia-logo-amazon-music { background: #232F3E; padding: 5px; }
.ia-logo-bluesky      { background: #0560FF; padding: 6px; }
.ia-logo-facebook     { background: #1877F2; padding: 6px; }
.ia-logo-flipboard    { background: #E62B2B; padding: 6px; }
.ia-logo-iheart       { background: #CC0000; padding: 6px; }
.ia-logo-lg-channels  { background: #A50034; padding: 6px; }
.ia-logo-linkedin     { background: #0A66C2; padding: 6px; }
.ia-logo-n8n          { background: #EA4B71; padding: 6px; }
.ia-logo-pinterest    { background: #E60023; padding: 6px; }
.ia-logo-samsung      { background: #1428A0; padding: 6px; }
.ia-logo-squarespace  { background: #000; padding: 6px; }
.ia-logo-threads      { background: #000; padding: 6px; }
.ia-logo-tiktok       { background: #000; padding: 6px; }
.ia-logo-twitch       { background: #9146FF; padding: 6px; }
.ia-logo-vimeo        { background: #1AB7EA; padding: 6px; }
.ia-logo-webflow      { background: #4353FF; padding: 6px; }
.ia-logo-wix          { background: #000; padding: 6px; }
.ia-logo-wordpress    { background: #21759B; padding: 6px; }
.ia-logo-x-twitter    { background: #000; padding: 6px; }
.ia-logo-xumo         { background: #000; padding: 6px; }
.ia-logo-yahoo-news   { background: #6001D2; padding: 6px; }
.ia-logo-zapier       { background: #FF4A00; padding: 6px; }

/* Inverted logo images */
.ia-logo-fire-tv img,
.ia-logo-roku img,
.ia-logo-spotify img,
.ia-logo-apple img,
.ia-logo-s3 img,
.ia-logo-amazon-music img,
.ia-logo-bluesky img,
.ia-logo-facebook img,
.ia-logo-flipboard img,
.ia-logo-iheart img,
.ia-logo-lg-channels img,
.ia-logo-linkedin img,
.ia-logo-n8n img,
.ia-logo-pinterest img,
.ia-logo-samsung img,
.ia-logo-squarespace img,
.ia-logo-threads img,
.ia-logo-tiktok img,
.ia-logo-twitch img,
.ia-logo-vimeo img,
.ia-logo-webflow img,
.ia-logo-wix img,
.ia-logo-wordpress img,
.ia-logo-x-twitter img,
.ia-logo-xumo img,
.ia-logo-yahoo-news img,
.ia-logo-zapier img   { filter: brightness(0) invert(1); }

/* LinkedIn SVG already has white letterforms on blue rect — no invert needed */
.ia-logo-linkedin img { filter: none; }