/* ============================================================
   Packagly — factory.css  (split from style.css)
   Depends on: common.css (variables, reset, icon helpers)
   Responsive @media rules live in responsive.css
   ============================================================ */

/* ============================================================
   WELCOME TO OUR FACTORY — 4-at-a-time image scroller
   ============================================================ */
.factory-section {
  background: #04120b;
  padding: 35px 0;
}
/* framed, rounded box (like the reference) */
.factory-inner {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--white-10);
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(
    120% 140% at 0% 0%,
    var(--bg-hero-1) 0%,
    var(--bg-hero-2) 45%,
    var(--bg-hero-3) 100%
  );
}

/* left intro panel */
.factory-intro {
  flex: 0 0 30%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 26px;
}
.factory-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.factory-title .accent {
  color: var(--green);
}
.factory-text {
  font-size: 9px;
  line-height: 1.7;
  color: var(--white-70);
  margin: 0 0 26px;
}
.factory-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: #06160d;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 26px;
  border-radius: 10px;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}
.factory-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  color: #06160d;
}

/* right scroller — container query units make EXACTLY 4 fit */
.factory-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}
.factory-track {
  display: flex;
  width: max-content;
  /* slow, continuous right-to-left scroll */
  animation: factory-scroll 80s linear infinite;
  will-change: transform;
}
.factory-marquee:hover .factory-track {
  animation-play-state: paused;
}
@keyframes factory-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* width = 1/4 of the viewport => 4 visible; gaps come from inner
   padding so the -50% loop point is perfectly seamless */
.factory-card {
  flex: 0 0 auto;
  width: 25cqw;
  padding: 3px;
}
.factory-card img {
  width: 100%;
  height: clamp(140px, 13vw, 188px);
  object-fit: cover;
  border-radius: 3px;
  display: block;
}


/* ---- responsive ---- */