/**
 * Subsidiaries (#subsidiaries): shared vertical rhythm (home + about, EN + AR).
 *
 * cta-build-future.css sets padding-bottom: 0 on .subsidiaries-inner (last child
 * before #cta). We restore bottom padding here (!important).
 *
 * Band height: −40% vs the original (space-2xl + space-md) top formula, plus 20px
 * top and bottom, applied symmetrically so space above the headings = space below the logos.
 */
:root {
  /* Desktop/tablet: 60% of (2xl + md) ≈ −40% section padding vs that baseline */
  --subsidiaries-pad-y: calc((var(--space-2xl, 48px) + var(--space-md, 16px)) * 0.6 + 20px);
  /* Mobile: 60% of 2xl band (matches “shorter section” on small screens) */
  --subsidiaries-pad-y-mobile: calc(var(--space-2xl, 48px) * 0.6 + 20px);
}

/* No extra strip below the inner — bottom breathing room is on .subsidiaries-inner */
#subsidiaries {
  padding-bottom: 0 !important;
}

section#subsidiaries > .subsidiaries-inner {
  padding-top: var(--subsidiaries-pad-y) !important;
  padding-bottom: var(--subsidiaries-pad-y) !important;
}

@media (max-width: 639px) {
  section#subsidiaries > .subsidiaries-inner,
  html[dir="rtl"] section#subsidiaries > .subsidiaries-inner {
    padding-top: var(--subsidiaries-pad-y-mobile) !important;
    padding-bottom: var(--subsidiaries-pad-y-mobile) !important;
  }

  /**
   * Local + international logo rows: single row, no squeeze (grid overridden).
   * Auto-scroll marquee is applied via subsidiaries-marquee.js (.subsidiaries-logos--auto-scroll).
   * Fallback: horizontal pan with scrollbar hidden until JS runs or if reduced motion.
   */
  section#subsidiaries .subsidiaries-group--local .subsidiaries-logos,
  section#subsidiaries .subsidiaries-group--international .subsidiaries-logos,
  html[dir="rtl"] section#subsidiaries .subsidiaries-group--local .subsidiaries-logos,
  html[dir="rtl"] section#subsidiaries .subsidiaries-group--international .subsidiaries-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-lg, 24px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    grid-template-columns: unset;
  }

  section#subsidiaries .subsidiaries-group--local .subsidiaries-logos::-webkit-scrollbar,
  section#subsidiaries .subsidiaries-group--international .subsidiaries-logos::-webkit-scrollbar,
  html[dir="rtl"] section#subsidiaries .subsidiaries-group--local .subsidiaries-logos::-webkit-scrollbar,
  html[dir="rtl"] section#subsidiaries .subsidiaries-group--international .subsidiaries-logos::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  section#subsidiaries .subsidiaries-logos .subsidiary-item,
  html[dir="rtl"] section#subsidiaries .subsidiaries-logos .subsidiary-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  /* Marquee: infinite auto-scroll, no scrollbar */
  section#subsidiaries .subsidiaries-logos.subsidiaries-logos--auto-scroll,
  html[dir="rtl"] section#subsidiaries .subsidiaries-logos.subsidiaries-logos--auto-scroll {
    overflow: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto;
  }

  section#subsidiaries .subsidiaries-logos--auto-scroll .subsidiaries-logos-marquee,
  html[dir="rtl"] section#subsidiaries .subsidiaries-logos--auto-scroll .subsidiaries-logos-marquee {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-lg, 24px);
    width: max-content;
    direction: ltr;
    animation: subsidiaries-logos-marquee var(--subsidiaries-marquee-duration, 28s) linear infinite;
    will-change: transform;
  }

  section#subsidiaries .subsidiaries-logos--auto-scroll .subsidiaries-logos-track,
  html[dir="rtl"] section#subsidiaries .subsidiaries-logos--auto-scroll .subsidiaries-logos-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-lg, 24px);
    flex: 0 0 auto;
  }

  @keyframes subsidiaries-logos-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
}