/* ==========================================================================
   Partner Companies section (AMIT-64) — theme 33 (brandseducation) only.
   Linked only when udemy_theme/partials/partners.blade.php renders a section.
   Every rule is nested under .cp-partners.

   Layout = inbithaq.com's partners band (measured live, AMIT-72/74), with
   three rows since AMIT-79: full-width rows of logo cards sliding in
   alternating directions (~6 cards per
   row, ~57 px/s), and a pale-blue overlay over the whole band — solid on the text
   side, clear from ~69 % — carrying the heading and subtitle. Cards slide in
   underneath the text; about three per row are fully visible.

   NEHA-10 (2026-09-28): the band's tan/gold (#ece3d0 base, #d6c097 scrim) was
   replaced by the owner's pale blue. Colour values only — the four background
   declarations below; every structure, stop position and angle is as AMIT-74
   measured it. Base gradient is the owner's exact value; the two overlay
   scrims and the mobile band keep their own solid->transparent shape in the
   same #e9f6fb family, so the heading still sits on an opaque patch.
   ========================================================================== */

.cp-partners {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(46deg, #e9f6fb 28.75%, rgba(233, 246, 251, .49) 64.07%);
}

/* ---- Overlay with the text (AMIT-74) ---------------------------------- */
.cp-partners__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e9f6fb 42.5%, rgba(233, 246, 251, 0) 68.5%);
  pointer-events: none;         /* hover on a visible card still pauses its row */
}
[dir="rtl"] .cp-partners__overlay {
  background: linear-gradient(270deg, #e9f6fb 42.5%, rgba(233, 246, 251, 0) 68.5%);
}
.cp-partners__overlay .container { width: 100%; }
.cp-partners__intro {
  max-width: min(400px, 34vw);  /* stays on the solid part of the overlay */
  pointer-events: auto;
}
.cp-partners h2 {
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #0e1016;
  overflow-wrap: anywhere;      /* long Arabic headings wrap, never overflow */
}
.cp-partners__sub {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #0e1016;
  overflow-wrap: anywhere;
}

/* ---- Sliding rows (AMIT-72) ------------------------------------------- */
/* The track holds the row's set twice and slides by exactly one set (50 % of
   the track plus half a gap), so the loop is seamless. Rows are always laid
   out left-to-right (logos carry no reading order), which keeps the -50 %
   maths right on Arabic pages. */
.cp-partners__slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 80px 0;
}
.cp-partners__row {
  container-type: inline-size;  /* 100cqw = the row's own (full band) width */
  overflow: hidden;
  direction: ltr;
}
.cp-partners__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  width: max-content;
  animation: cpPartnersSlide var(--ptn-dur, 48s) linear infinite;   /* AMIT-80: 8 s per card */
  will-change: transform;
}
.cp-partners__row--reverse .cp-partners__track { animation-direction: reverse; }
.cp-partners__row:hover .cp-partners__track,
.cp-partners__row:focus-within .cp-partners__track { animation-play-state: paused; }
@keyframes cpPartnersSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); }   /* 8px = half the 16px gap */
}

/* One company: a single centred, still row. */
.cp-partners__row--static .cp-partners__track { animation: none; width: auto; justify-content: center; }

/* ---- Cards (inbithaq: 213×76 at 1360 px, 20px radius, light border) ---- */
.cp-partners__card {
  flex: 0 0 210px;                              /* fallback without container units */
  flex: 0 0 calc((100cqw - 80px) / 6);          /* six per full row, five 16px gaps */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(164, 192, 210, .4);
  border-radius: 20px;
}
.cp-partners__card img {
  display: block;
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;          /* never stretched */
}
.cp-partners__placeholder {
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---- Tablet / phone: text above the rows, no overlay gradient ---------- */
@media (max-width: 991px) {
  .cp-partners { background: linear-gradient(to bottom, #e9f6fb 0%, rgba(233, 246, 251, .49) 100%); }
  .cp-partners__overlay,
  [dir="rtl"] .cp-partners__overlay {
    position: static;
    background: none;
    padding: 48px 0 0;
    pointer-events: auto;
  }
  .cp-partners__intro { max-width: none; text-align: center; }
  .cp-partners h2 { margin-bottom: 12px; }
  .cp-partners__slider { padding: 28px 0 48px; }
  .cp-partners--has-text .cp-partners__slider { padding-top: 28px; }
  .cp-partners__card { flex-basis: calc((100cqw - 16px) / 2); }
}

@media (max-width: 575px) {
  .cp-partners h2 { font-size: 24px; }
  .cp-partners__sub { font-size: 15px; }
  .cp-partners__card { height: 76px; padding: 12px; }
  .cp-partners__card img { max-height: 46px; }
}

/* "Reduce motion": the slider keeps moving (inbithaq's does, and Windows Server /
   Remote Desktop sessions report "reduce" by default, which froze it for the
   owner), but at half speed; hover or keyboard focus still pauses it. */
@media (prefers-reduced-motion: reduce) {
  .cp-partners__track { animation-duration: calc(var(--ptn-dur, 48s) * 2); }
}